/* FitBuddy semantic tokens, Spotter direction. Components reference ONLY these.

   Dark is the default and the design; [data-theme="light"] re-points the same
   names. This is the reverse of the previous direction, where light led. */
:root, [data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas: var(--fb-ink-950);
  --bg-sunken: var(--fb-ink-990);
  --bg-inverse: var(--fb-chalk-100);

  --surface-1: var(--fb-ink-900);
  --surface-2: var(--fb-ink-850);
  --surface-3: var(--fb-ink-800);
  --surface-inverse: var(--fb-chalk-100);
  --surface-accent-soft: color-mix(in oklab, var(--fb-red-500) 14%, var(--fb-ink-950));
  --surface-live-soft:   color-mix(in oklab, var(--fb-lime-500) 12%, transparent);
  --surface-steel-soft:  var(--fb-ink-900);   /* quiet informational surface */
  --surface-hover:    color-mix(in oklab, var(--fb-chalk-0) 6%, transparent);
  --surface-press:    color-mix(in oklab, var(--fb-chalk-0) 11%, transparent);
  --surface-selected: color-mix(in oklab, var(--fb-red-500) 16%, transparent);
  --surface-glass:    color-mix(in oklab, var(--fb-ink-950) 50%, transparent);
  --surface-scrim:    color-mix(in oklab, var(--fb-ink-990) 66%, transparent);

  --border-subtle:  color-mix(in oklab, var(--fb-chalk-0) 7%, transparent);
  --border-default: color-mix(in oklab, var(--fb-chalk-0) 14%, transparent);
  --border-strong:  color-mix(in oklab, var(--fb-chalk-0) 28%, transparent);
  --border-inverse: color-mix(in oklab, var(--fb-ink-950) 20%, transparent);
  --border-accent:  var(--fb-red-500);

  --text-primary:   var(--fb-chalk-100);
  --text-secondary: var(--fb-ink-300);
  --text-tertiary:  var(--fb-ink-400);
  --text-disabled:  var(--fb-ink-500);
  --text-inverse:   var(--fb-ink-950);
  --text-inverse-secondary: color-mix(in oklab, var(--fb-ink-950) 70%, transparent);
  --text-accent:    var(--fb-red-400);
  --text-on-accent: var(--fb-chalk-0);     /* white sits on the red fill */
  --text-on-bright: var(--fb-ink-950);     /* on lime, chalk or a crew hue */
  /* Over a photograph, under a protection gradient. Deliberately the same in
     both themes: the ground is the picture, not the page, so this must not
     flip to ink in light mode and disappear into the image. Anything sitting
     on media takes these two, and nothing else does. */
  --text-on-media:   var(--fb-chalk-0);
  /* One step down, and only one. Secondary text on media used to be written
     inline at four different opacities between 66% and 82%, and the dimmest of
     them measured 2.97:1 over a blown sky. A single value that has been
     measured is worth more than four that have not. */
  --text-on-media-secondary: color-mix(in oklab, var(--fb-chalk-0) 82%, transparent);
  --border-on-media: color-mix(in oklab, var(--fb-chalk-0) 24%, transparent);
  --text-link:      var(--fb-red-400);
  --text-link-hover: var(--fb-lime-500);

  /* Primary action: chalk on near-black. Red is the brand, not the button. */
  --action-primary-bg: var(--fb-chalk-100);
  --action-primary-bg-hover: var(--fb-chalk-0);
  --action-primary-bg-press: var(--fb-chalk-300);
  --action-primary-fg: var(--fb-ink-950);

  --action-accent-bg: var(--fb-red-500);
  --action-accent-bg-hover: var(--fb-red-400);
  --action-accent-bg-press: var(--fb-red-600);
  --action-accent-fg: var(--fb-chalk-0);

  --action-secondary-bg: transparent;
  --action-secondary-bg-hover: var(--surface-hover);
  --action-secondary-fg: var(--text-primary);
  --action-secondary-border: color-mix(in oklab, var(--fb-chalk-100) 20%, transparent);

  --accent: var(--fb-red-500);
  --accent-quiet: color-mix(in oklab, var(--fb-red-500) 24%, var(--fb-ink-950));
  --accent-loud: var(--fb-red-400);
  --live: var(--fb-lime-500);
  --live-fg: var(--fb-ink-950);
  --live-text: var(--fb-lime-500);   /* the lime label itself */
  /* The lime SHAPE: a dot, a ring, a today block. Lime on the near-black ground
     is 15:1, and on a light ground it is 1.2:1, which means the one thing lime
     exists to signal disappears in light mode. Text already had this handled by
     --live-text; a 7px dot is at least as fragile as text, so it gets the same
     treatment. Dark is unchanged. */
  --live-mark: var(--fb-lime-500);

  /* Crew hues, exposed semantically so components stop reaching into palette */
  --crew-periwinkle: var(--fb-hue-periwinkle);
  --crew-teal:       var(--fb-hue-teal);
  --crew-sage:       var(--fb-hue-sage);
  --crew-clay:       var(--fb-hue-clay);
  --crew-plum:       var(--fb-hue-plum);

  /* The hue tints the chip; the ink writes on it. On the near-black ground the
     two are the same colour, because a mid hue on a dark tint is legible. On a
     light ground that same pairing falls to 2:1, so the ink drops to the deep
     variant while the tint keeps its identity. Locked lightness across all five
     either way, so no face reads as more important than another. */
  --crew-periwinkle-ink: var(--fb-hue-periwinkle);
  --crew-teal-ink:       var(--fb-hue-teal);
  --crew-sage-ink:       var(--fb-hue-sage);
  --crew-clay-ink:       var(--fb-hue-clay);
  --crew-plum-ink:       var(--fb-hue-plum);

  /* Data at rest. Red carries data in thin shapes only, so anything that
     would become a large solid block is neutral or chalk instead. */
  --data-rest:  color-mix(in oklab, var(--fb-chalk-0) 14%, transparent);
  --data-empty: color-mix(in oklab, var(--fb-chalk-0) 8%, transparent);
  --data-done:  var(--fb-chalk-100);
  --data-today: var(--live-mark);

  --control-knob: var(--fb-chalk-0);

  /* The streak flame. The one sanctioned illustration in the system, and the
     only place a filled multi-colour shape is allowed. Built entirely from the
     existing ember ramp, so it reads as i-Fitness red catching light rather
     than as a new colour. Sizes are capped by the component: at flame scale
     red is a fingernail, which is the size the brand rule intends. */
  --flame-outer: var(--fb-red-600);
  --flame-mid:   var(--fb-red-500);
  --flame-core:  var(--fb-amber-500);
  --flame-ink:   var(--fb-ink-950);
  --flame-ember: var(--fb-red-400);

  --status-success-fg: #8FE39C;
  --status-success-bg: color-mix(in oklab, var(--fb-green-500) 22%, var(--fb-ink-900));
  --status-success-solid: var(--fb-green-500);
  --status-warn-fg: #F3CE7A;
  --status-warn-bg: color-mix(in oklab, var(--fb-amber-500) 22%, var(--fb-ink-900));
  --status-warn-solid: var(--fb-amber-500);
  --status-danger-fg: var(--fb-red-400);
  --status-danger-bg: color-mix(in oklab, var(--fb-red-500) 22%, var(--fb-ink-900));
  --status-danger-solid: var(--fb-red-500);

  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--fb-red-500);
  --track: color-mix(in oklab, var(--fb-chalk-0) 10%, transparent);
  --skeleton: color-mix(in oklab, var(--fb-chalk-0) 8%, transparent);
  --skeleton-sheen: color-mix(in oklab, var(--fb-chalk-0) 4%, transparent);
}

[data-theme="light"] {
  color-scheme: light;

  --bg-canvas: var(--fb-chalk-50);
  --bg-sunken: var(--fb-chalk-200);
  --bg-inverse: var(--fb-ink-950);

  --surface-1: var(--fb-chalk-0);
  --surface-2: var(--fb-chalk-0);
  --surface-3: var(--fb-chalk-200);
  --surface-inverse: var(--fb-ink-950);
  --surface-accent-soft: var(--fb-red-100);
  --surface-live-soft:   color-mix(in oklab, var(--fb-lime-500) 20%, var(--fb-chalk-0));
  --surface-steel-soft:  var(--fb-chalk-200);
  --surface-hover:    color-mix(in oklab, var(--fb-ink-950) 4%, transparent);
  --surface-press:    color-mix(in oklab, var(--fb-ink-950) 8%, transparent);
  --surface-selected: color-mix(in oklab, var(--fb-red-500) 10%, transparent);
  --surface-glass:    color-mix(in oklab, var(--fb-chalk-0) 72%, transparent);
  --surface-scrim:    color-mix(in oklab, var(--fb-ink-950) 52%, transparent);

  --border-subtle:  color-mix(in oklab, var(--fb-ink-950) 9%, transparent);
  --border-default: color-mix(in oklab, var(--fb-ink-950) 16%, transparent);
  --border-strong:  color-mix(in oklab, var(--fb-ink-950) 30%, transparent);
  --border-inverse: color-mix(in oklab, var(--fb-chalk-0) 20%, transparent);
  --border-accent:  var(--fb-red-500);

  --text-primary:   var(--fb-ink-950);
  --text-secondary: var(--fb-ink-600);
  --text-tertiary:  var(--fb-ink-500);
  --text-disabled:  var(--fb-ink-300);
  --text-inverse:   var(--fb-chalk-100);
  --text-inverse-secondary: color-mix(in oklab, var(--fb-chalk-0) 74%, transparent);
  --text-accent:    var(--fb-red-600);
  --text-on-accent: var(--fb-chalk-0);
  --text-on-bright: var(--fb-ink-950);
  /* Restated, not flipped. A photograph is dark under its gradient whichever
     theme the page is in, so these two hold. */
  --text-on-media:   var(--fb-chalk-0);
  --text-on-media-secondary: color-mix(in oklab, var(--fb-chalk-0) 82%, transparent);
  --border-on-media: color-mix(in oklab, var(--fb-chalk-0) 24%, transparent);
  --text-link:      var(--fb-red-600);
  --text-link-hover: var(--fb-lime-700);

  /* The primary action inverts to near-black on white. */
  --action-primary-bg: var(--fb-ink-950);
  --action-primary-bg-hover: var(--fb-ink-900);
  --action-primary-bg-press: var(--fb-ink-990);
  --action-primary-fg: var(--fb-chalk-0);

  --action-secondary-border: color-mix(in oklab, var(--fb-ink-950) 16%, transparent);

  --accent-quiet: var(--fb-red-100);
  --accent-loud: var(--fb-red-600);
  /* Lime never carries text on a light ground, so the label darkens. */
  --live-text: var(--fb-lime-700);
  --live-mark: var(--fb-lime-700);   /* see the note above: the shape darkens too */

  /* See the note above: the ink darkens on a light ground, the tint does not. */
  --crew-periwinkle-ink: var(--fb-hue-periwinkle-deep);
  --crew-teal-ink:       var(--fb-hue-teal-deep);
  --crew-sage-ink:       var(--fb-hue-sage-deep);
  --crew-clay-ink:       var(--fb-hue-clay-deep);
  --crew-plum-ink:       var(--fb-hue-plum-deep);

  --data-rest:  color-mix(in oklab, var(--fb-ink-950) 16%, transparent);
  --data-empty: color-mix(in oklab, var(--fb-ink-950) 8%, transparent);
  --data-done:  var(--fb-ink-950);

  --status-success-fg: var(--fb-green-800);
  --status-success-bg: var(--fb-green-100);
  --status-warn-fg: var(--fb-amber-800);
  --status-warn-bg: var(--fb-amber-100);
  --status-danger-fg: var(--fb-red-600);
  --status-danger-bg: var(--fb-red-100);

  --track: color-mix(in oklab, var(--fb-ink-950) 10%, transparent);
  --skeleton: color-mix(in oklab, var(--fb-ink-950) 7%, transparent);
  --skeleton-sheen: color-mix(in oklab, var(--fb-ink-950) 3%, transparent);
}