/* Show Friends theme tokens.
 *
 * Built on Una Kravets' modern CSS theming approach: a single `color-scheme`
 * switch drives `light-dark()`, so Tailwind utilities re-pointed at these
 * tokens flip automatically. `:root[data-theme]` overrides the OS preference;
 * with no attribute the browser respects `prefers-color-scheme`.
 *
 * Dark is dark-but-not-black (page ~oklch L 0.19); light is light-but-not-white
 * (page ~L 0.96). Foreground ramps invert: near-black headings in light, near
 * white in dark.
 */

@property --fg-strong {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.22 0.012 268);
}
@property --bg-strong {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.96 0.004 268);
}

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

html {
  background: var(--gray-950);
  color: var(--gray-300);
}

:root {
  /* Neutral ramp — surfaces go lighter-than-page in light (raised cards),
     darker-than-page in dark. Text inverts. Hue 268 (warm neutral). */
  --gray-100: light-dark(oklch(0.22 0.012 268), oklch(0.945 0.005 268));
  --gray-200: light-dark(oklch(0.28 0.011 268), oklch(0.90 0.006 268));
  --gray-300: light-dark(oklch(0.34 0.011 268), oklch(0.84 0.007 268));
  --gray-400: light-dark(oklch(0.45 0.010 268), oklch(0.70 0.008 268));
  --gray-500: light-dark(oklch(0.55 0.009 268), oklch(0.58 0.008 268));
  --gray-600: light-dark(oklch(0.78 0.006 268), oklch(0.40 0.008 268));
  --gray-700: light-dark(oklch(0.82 0.005 268), oklch(0.33 0.009 268));
  --gray-800: light-dark(oklch(0.88 0.005 268), oklch(0.28 0.009 268));
  --gray-900: light-dark(oklch(0.985 0.003 268), oklch(0.22 0.009 268));
  --gray-950: light-dark(oklch(0.96 0.004 268), oklch(0.19 0.009 268));

  /* Brand purple (hue 295). Buttons lighten in light mode so flipped
     near-black text stays readable; accent text darkens on light bg. */
  --purple-200: light-dark(oklch(0.35 0.10 295), oklch(0.86 0.10 295));
  --purple-300: light-dark(oklch(0.45 0.14 295), oklch(0.78 0.13 295));
  --purple-400: light-dark(oklch(0.50 0.16 295), oklch(0.70 0.15 295));
  --purple-500: light-dark(oklch(0.72 0.15 295), oklch(0.60 0.16 295));
  --purple-600: light-dark(oklch(0.66 0.15 295), oklch(0.53 0.15 295));
  --purple-700: light-dark(oklch(0.58 0.14 295), oklch(0.46 0.14 295));
  --purple-800: light-dark(oklch(0.88 0.06 295), oklch(0.33 0.12 295));
  --purple-900: light-dark(oklch(0.93 0.04 295), oklch(0.28 0.10 295));

  /* Status: green (150) / yellow (90) / red (27). Accent text stays vivid but
     deepens on light; -900 badge backgrounds flip to light tints with their
     -300 text flipping to deeper tones for contrast. */
  --green-200: light-dark(oklch(0.35 0.09 150), oklch(0.86 0.10 150));
  --green-300: light-dark(oklch(0.40 0.11 150), oklch(0.84 0.13 150));
  --green-400: light-dark(oklch(0.45 0.13 150), oklch(0.75 0.15 150));
  --green-500: light-dark(oklch(0.66 0.15 150), oklch(0.66 0.16 150));
  --green-600: light-dark(oklch(0.60 0.15 150), oklch(0.58 0.15 150));
  --green-700: light-dark(oklch(0.52 0.14 150), oklch(0.50 0.14 150));
  --green-800: light-dark(oklch(0.88 0.06 150), oklch(0.34 0.10 150));
  --green-900: light-dark(oklch(0.93 0.05 150), oklch(0.30 0.08 150));

  --yellow-200: light-dark(oklch(0.40 0.08 90), oklch(0.88 0.10 90));
  --yellow-300: light-dark(oklch(0.45 0.11 90), oklch(0.85 0.13 90));
  --yellow-400: light-dark(oklch(0.50 0.13 90), oklch(0.80 0.14 90));
  --yellow-600: light-dark(oklch(0.70 0.14 90), oklch(0.72 0.15 90));
  --yellow-700: light-dark(oklch(0.62 0.13 90), oklch(0.62 0.14 90));
  --yellow-800: light-dark(oklch(0.90 0.06 90), oklch(0.38 0.10 90));
  --yellow-900: light-dark(oklch(0.94 0.05 90), oklch(0.32 0.08 90));

  --red-200: light-dark(oklch(0.40 0.10 27), oklch(0.85 0.09 27));
  --red-300: light-dark(oklch(0.45 0.13 27), oklch(0.78 0.13 27));
  --red-400: light-dark(oklch(0.50 0.16 27), oklch(0.70 0.16 27));
  --red-600: light-dark(oklch(0.58 0.17 27), oklch(0.58 0.17 27));
  --red-700: light-dark(oklch(0.52 0.16 27), oklch(0.50 0.16 27));
  --red-800: light-dark(oklch(0.88 0.05 27), oklch(0.36 0.10 27));
  --red-900: light-dark(oklch(0.93 0.04 27), oklch(0.30 0.08 27));
  --red-950: light-dark(oklch(0.95 0.03 27), oklch(0.24 0.07 27));

  /* Secondary accent colors (color-coded dots / chips). */
  --indigo-600: light-dark(oklch(0.50 0.16 265), oklch(0.62 0.16 265));
  --indigo-700: light-dark(oklch(0.45 0.15 265), oklch(0.52 0.15 265));
  --teal-700: light-dark(oklch(0.50 0.11 180), oklch(0.60 0.11 180));
  --rose-700: light-dark(oklch(0.55 0.16 15), oklch(0.62 0.16 15));
  --rose-800: light-dark(oklch(0.88 0.05 15), oklch(0.40 0.11 15));
  --pink-400: light-dark(oklch(0.55 0.16 0), oklch(0.72 0.15 0));
  --pink-800: light-dark(oklch(0.90 0.05 0), oklch(0.40 0.10 0));
  --cyan-400: light-dark(oklch(0.50 0.11 200), oklch(0.72 0.11 200));
  --cyan-600: light-dark(oklch(0.55 0.12 200), oklch(0.62 0.12 200));
  --cyan-700: light-dark(oklch(0.50 0.12 200), oklch(0.52 0.12 200));
  --cyan-800: light-dark(oklch(0.88 0.05 200), oklch(0.38 0.10 200));
  --blue-400: light-dark(oklch(0.50 0.15 250), oklch(0.70 0.15 250));
  --blue-600: light-dark(oklch(0.52 0.16 250), oklch(0.60 0.16 250));
  --blue-700: light-dark(oklch(0.46 0.15 250), oklch(0.52 0.15 250));
  --blue-800: light-dark(oklch(0.88 0.05 250), oklch(0.38 0.10 250));

  /* Role aliases for the Tailwind `white`/`black` overrides and reusable
     surfaces. */
  --fg-strong: light-dark(oklch(0.22 0.012 268), oklch(0.945 0.005 268));
  --bg-strong: light-dark(oklch(0.96 0.004 268), oklch(0.19 0.009 268));
  --surface-hover: light-dark(oklch(0.88 0.005 268), oklch(0.32 0.009 268));

  /* Scrims are mode-independent dark overlays (modals / image backdrops). */
  --scrim: 6 8 14;
}