/* FitBuddy raw palette, Spotter direction.
   Near-black ground, one red, one lime. Transcribed from the Claude Design
   project "FitBuddy design system directions", file "FitBuddy Foundations.dc.html".

   Dark is the default and the design. Light is supported but secondary.
   Raw ramps: never reference these directly in components. Use semantic.css. */
:root {
  /* Ground, near-black with a cool cast */
  --fb-ink-990: #06080B;  /* sunken */
  --fb-ink-950: #0A0C10;  /* canvas, the ground the brand sits on */
  --fb-ink-900: #12151B;  /* surface 1 */
  --fb-ink-850: #1A1E26;  /* surface 2 */
  --fb-ink-800: #242932;  /* surface 3 */
  --fb-ink-700: #333945;
  --fb-ink-600: #565E6B;  /* secondary text, light theme */
  --fb-ink-500: #616875;  /* tertiary text, light theme */
  --fb-ink-400: #7E8695;  /* tertiary text, dark theme */
  --fb-ink-300: #8C939F;  /* secondary text, dark theme */
  --fb-ink-200: #C6CBD4;
  --fb-ink-100: #D8DCE3;

  /* Chalk, the light end. #EDEFF2 is the inverse and the primary action. */
  --fb-chalk-0:   #FFFFFF;
  --fb-chalk-50:  #F4F5F7;  /* canvas, light theme */
  --fb-chalk-100: #EDEFF2;  /* inverse, primary action, primary text on dark */
  --fb-chalk-200: #E2E5EA;  /* sunken, light theme */
  --fb-chalk-300: #D2D6DD;

  /* i-Fitness red. The brand and the destructive state, never a large field. */
  --fb-red-100: #FFE3E0;
  --fb-red-300: #FF8B82;
  --fb-red-400: #FF5245;  /* red on dark, text */
  --fb-red-500: #F60C01;  /* brand, straight off the logo */
  --fb-red-600: #C90A00;  /* press, and red text on a light ground */
  --fb-red-800: #7E0700;

  /* Lime. Live and nothing else.
     If lime appears twice on one screen, one of them is wrong. */
  --fb-lime-200: #E4FCB4;
  --fb-lime-500: #B8F53A;  /* live, in the gym now */
  --fb-lime-700: #4A7300;  /* the lime label on a light ground */

  /* Crew hues. Lightness and chroma locked, hue is the only variable,
     so no crew ever reads as more important than another. */
  --fb-hue-periwinkle: oklch(0.72 0.13 278);
  --fb-hue-teal:       oklch(0.72 0.13 208);
  --fb-hue-sage:       oklch(0.72 0.13 148);
  --fb-hue-clay:       oklch(0.72 0.13 58);
  --fb-hue-plum:       oklch(0.72 0.13 350);
  --fb-hue-periwinkle-deep: oklch(0.44 0.11 278);
  --fb-hue-teal-deep:       oklch(0.44 0.11 208);
  --fb-hue-sage-deep:       oklch(0.44 0.11 148);
  --fb-hue-clay-deep:       oklch(0.44 0.11 58);
  --fb-hue-plum-deep:       oklch(0.44 0.11 350);

  /* Status. Danger is the brand red, per the direction. */
  --fb-green-500: #3FB950;
  --fb-green-100: #D8F5DD;
  --fb-green-800: #1B5E28;
  --fb-amber-500: #E3A008;
  --fb-amber-100: #FBEFD0;
  --fb-amber-800: #7A5300;

  /* ---- Compatibility aliases -------------------------------------------
     The previous direction called the accent "ember", the live colour
     "citrus" and the chromatic "steel". Those names survive here, repointed
     at Spotter values, so older specimen cards and UI kits still resolve.
     Do not use them in new work. */
  --fb-ember-50:  var(--fb-red-100);
  --fb-ember-100: var(--fb-red-100);
  --fb-ember-200: var(--fb-red-300);
  --fb-ember-300: var(--fb-red-300);
  --fb-ember-400: var(--fb-red-400);
  --fb-ember-500: var(--fb-red-500);
  --fb-ember-600: var(--fb-red-600);
  --fb-ember-700: var(--fb-red-600);
  --fb-ember-800: var(--fb-red-800);
  --fb-ember-900: var(--fb-red-800);

  --fb-citrus-100: var(--fb-lime-200);
  --fb-citrus-200: var(--fb-lime-200);
  --fb-citrus-300: var(--fb-lime-200);
  --fb-citrus-400: var(--fb-lime-500);
  --fb-citrus-500: var(--fb-lime-500);
  --fb-citrus-600: var(--fb-lime-700);
  --fb-citrus-700: var(--fb-lime-700);

  --fb-steel-50:  var(--fb-chalk-50);
  --fb-steel-100: var(--fb-chalk-200);
  --fb-steel-200: var(--fb-ink-100);
  --fb-steel-300: var(--fb-ink-200);
  --fb-steel-400: var(--fb-ink-300);
  --fb-steel-500: var(--fb-ink-400);
  --fb-steel-600: var(--fb-ink-500);
  --fb-steel-700: var(--fb-ink-600);
  --fb-steel-800: var(--fb-ink-800);
  --fb-steel-900: var(--fb-ink-900);
  --fb-steel-950: var(--fb-ink-950);
}