/*
 * Rufus — Claude Design tokens.
 * Source of truth: design_handoff_rufus/design/tokens.css.
 *
 * Single global stylesheet; every visual value in the app should resolve
 * through one of these custom properties. Never hardcode a color, radius,
 * font size, or spacing value in a .razor or .razor.css file.
 *
 * Density and theme are applied as body classes (theme-light / theme-dark
 * / density-compact / density-comfort / theme-accent-copper etc.);
 * ThemeService drives these.
 *
 * DEVIATION FROM HANDOFF: the handoff ships dark as the canonical default.
 * Per QUESTIONS §D1 the Rufus user prefers light as the first-run theme;
 * we still ship both themes at parity — it's a one-line default flip in
 * ThemeService, the tokens themselves are identical.
 */

:root {
  /* Type */
  --ff-sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Role palette — the only saturated colors on screen.
   * Cycle order: the first 5 match the seeded roles; the next 11
   * extend the palette so newly created roles loop through hues that
   * stay perceptually balanced (L 0.64–0.78, C 0.04–0.15) and never
   * out-shout an existing role chip on --ink-0. See
   * DefaultRolePalette.cs for the assignment logic. */
  --role-work: oklch(0.68 0.14 260);     /* 1.  indigo (existing) */
  --role-health: oklch(0.72 0.14 160);   /* 2.  moss   (existing) */
  --role-family: oklch(0.72 0.12 20);    /* 3.  terracotta (existing) */
  --role-creative: oklch(0.70 0.13 320); /* 4.  violet (existing) */
  --role-learning: oklch(0.76 0.14 75);  /* 5.  amber  (existing) */
  --role-teal: oklch(0.74 0.12 195);     /* 6.  teal */
  --role-cyan: oklch(0.76 0.10 225);     /* 7.  cyan */
  --role-plum: oklch(0.66 0.13 350);     /* 8.  plum */
  --role-rose: oklch(0.72 0.13 5);       /* 9.  rose */
  --role-coral: oklch(0.74 0.13 40);     /* 10. coral */
  --role-olive: oklch(0.74 0.11 110);    /* 11. olive */
  --role-sage: oklch(0.76 0.09 145);     /* 12. sage */
  --role-sky: oklch(0.78 0.09 240);      /* 13. sky */
  --role-lavender: oklch(0.74 0.10 295); /* 14. lavender */
  --role-magenta: oklch(0.68 0.15 340);  /* 15. magenta */
  --role-slate: oklch(0.64 0.04 250);    /* 16. slate (neutral / meta) */

  /*
   * Ink color used on saturated role-color surfaces (role chips, role
   * letter squares, role rails). Fixed across light/dark themes so the
   * letter "W" / "C" / "H" stays legible against the same saturated
   * role color in both modes.
   */
  --role-ink: #0A0B0C;

  /* State */
  --ok: oklch(0.72 0.14 160);
  --warn: oklch(0.76 0.14 75);
  --danger: oklch(0.65 0.18 27);
  --info: oklch(0.72 0.10 230);
}

/* LIGHT — default for new users per QUESTIONS §D1 */
.theme-light {
  color-scheme: light;
  --ink-0: #FAFAF7;   /* warm paper */
  --ink-1: #F3F3EE;
  --ink-2: #FFFFFF;
  --ink-3: #F6F6F1;
  --ink-4: #E6E6DF;
  --line: #E8E8E1;
  --line-soft: #EFEFE9;

  --fg-0: #121416;
  --fg-1: #3A3F45;
  --fg-2: #6C727A;
  --fg-3: #9AA0A8;

  --accent: oklch(0.55 0.13 55);
  --accent-ink: #FFFFFF;
  --accent-soft: oklch(0.55 0.13 55 / 0.10);
}

/*
 * WHITE — pure-white-background variant of Light. Same color family, but a
 * pure white page, slightly cooler/stronger borders, marginally darker text,
 * and a ~1-chroma-step stronger accent. Mirrors RufusTheme.RufusWhite().
 */
.theme-white {
  color-scheme: light;
  --ink-0: #FFFFFF;   /* pure white page (vs light's warm #FAFAF7) */
  --ink-1: #F4F4F4;
  --ink-2: #FFFFFF;
  --ink-3: #F7F7F7;
  --ink-4: #DCDCDC;
  --line: #E2E2E2;
  --line-soft: #EDEDED;

  --fg-0: #0E1012;
  --fg-1: #2F343A;
  --fg-2: #5C626A;
  --fg-3: #8A9098;

  --accent: oklch(0.55 0.15 55);
  --accent-ink: #FFFFFF;
  --accent-soft: oklch(0.55 0.15 55 / 0.10);
}

/* DARK — canonical per handoff, swap via ThemeService */
.theme-dark {
  color-scheme: dark;
  --ink-0: #0A0B0C;   /* deepest — page bg */
  --ink-1: #0F1113;   /* chrome / rail */
  --ink-2: #15181B;   /* card surface */
  --ink-3: #1C2024;   /* hover / raised */
  --ink-4: #242930;   /* divider strong */
  --line: #1E2126;    /* hairline */
  --line-soft: #181B1F;

  --fg-0: #F2F3F4;    /* primary text */
  --fg-1: #C7CBD0;    /* secondary */
  --fg-2: #8A9099;    /* tertiary */
  --fg-3: #5B6069;    /* quaternary / icon idle */

  --accent: oklch(0.78 0.12 65);           /* copper */
  --accent-ink: #0A0B0C;
  --accent-soft: oklch(0.78 0.12 65 / 0.14);
}

/*
 * Accent variants. Applied as a body class in addition to theme-light /
 * theme-dark. Overrides --accent, --accent-ink, --accent-soft.
 */
.theme-accent-copper  { --accent: oklch(0.78 0.12 65);  --accent-soft: oklch(0.78 0.12 65 / 0.14); }
.theme-accent-amber   { --accent: oklch(0.80 0.16 85);  --accent-soft: oklch(0.80 0.16 85 / 0.14); }
.theme-accent-sage    { --accent: oklch(0.72 0.10 150); --accent-soft: oklch(0.72 0.10 150 / 0.14); }
.theme-accent-steel   { --accent: oklch(0.68 0.06 240); --accent-soft: oklch(0.68 0.06 240 / 0.14); }

/* Light variants push the accent a shade darker so it still reads on paper. */
.theme-light.theme-accent-copper  { --accent: oklch(0.55 0.13 55);  --accent-ink: #FFFFFF; --accent-soft: oklch(0.55 0.13 55 / 0.10); }
.theme-light.theme-accent-amber   { --accent: oklch(0.58 0.16 80);  --accent-ink: #FFFFFF; --accent-soft: oklch(0.58 0.16 80 / 0.10); }
.theme-light.theme-accent-sage    { --accent: oklch(0.48 0.10 150); --accent-ink: #FFFFFF; --accent-soft: oklch(0.48 0.10 150 / 0.10); }
.theme-light.theme-accent-steel   { --accent: oklch(0.45 0.06 240); --accent-ink: #FFFFFF; --accent-soft: oklch(0.45 0.06 240 / 0.10); }

/* White variants — like Light but ~1 chroma step stronger. */
.theme-white.theme-accent-copper  { --accent: oklch(0.55 0.15 55);  --accent-ink: #FFFFFF; --accent-soft: oklch(0.55 0.15 55 / 0.10); }
.theme-white.theme-accent-amber   { --accent: oklch(0.58 0.18 80);  --accent-ink: #FFFFFF; --accent-soft: oklch(0.58 0.18 80 / 0.10); }
.theme-white.theme-accent-sage    { --accent: oklch(0.47 0.12 150); --accent-ink: #FFFFFF; --accent-soft: oklch(0.47 0.12 150 / 0.10); }
.theme-white.theme-accent-steel   { --accent: oklch(0.44 0.08 240); --accent-ink: #FFFFFF; --accent-soft: oklch(0.44 0.08 240 / 0.10); }

/* Density */
.density-compact  { --row-h: 34px; --gap: 10px; --pad-x: 12px; --pad-y: 8px;  --fs-body: 13px; --fs-h1: 28px; --fs-h2: 18px; --fs-micro: 11px; }
.density-comfort  { --row-h: 40px; --gap: 14px; --pad-x: 16px; --pad-y: 12px; --fs-body: 14px; --fs-h1: 34px; --fs-h2: 20px; --fs-micro: 11.5px; }

/*
 * Body-level rules are now unconditional — the legacy MudBlazor chrome
 * was removed in GAP-14. The body class drift (theme-light / theme-dark
 * / density-* / theme-accent-*) is still applied by ThemeService.
 */
body {
  font-family: var(--ff-sans);
  background: var(--ink-0);
  color: var(--fg-0);
  font-size: var(--fs-body);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* Focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Scrollbars (minimal) */
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

/*
 * sRGB hex fallback for browsers that do not support oklch().
 *
 * oklch() landed in Chrome 111 / Safari 15.4 / Firefox 113 (~April 2023),
 * so this block is rarely exercised. It exists to keep older shells from
 * rendering null/black for any custom property defined in oklch space.
 *
 * Hex values are sRGB approximations of the oklch coordinates; they are
 * not pixel-exact (oklch's wider gamut clips on conversion) but stay
 * within the same hue/lightness band so colour identity is preserved.
 */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --role-work: #6675D1;
    --role-health: #3FB591;
    --role-family: #E08F7C;
    --role-creative: #C078B0;
    --role-learning: #D8A435;
    --role-teal: #4CB1B5;
    --role-cyan: #7AB3D5;
    --role-plum: #B26196;
    --role-rose: #D58191;
    --role-coral: #E0926A;
    --role-olive: #B5A557;
    --role-sage: #94BC9B;
    --role-sky: #9DC1E2;
    --role-lavender: #B4A8D2;
    --role-magenta: #C75CA0;
    --role-slate: #7A8696;

    --ok: #3FB591;
    --warn: #D8A435;
    --danger: #D5604A;
    --info: #6FAEC9;
  }

  .theme-light {
    --accent: #9F5C2C;
    --accent-soft: rgba(159, 92, 44, 0.10);
  }

  .theme-white {
    --accent: #C0531A;
    --accent-soft: rgba(192, 83, 26, 0.10);
  }

  .theme-dark {
    --accent: #D89856;
    --accent-soft: rgba(216, 152, 86, 0.14);
  }

  .theme-accent-copper { --accent: #D89856; --accent-soft: rgba(216, 152, 86, 0.14); }
  .theme-accent-amber  { --accent: #DAA42E; --accent-soft: rgba(218, 164, 46, 0.14); }
  .theme-accent-sage   { --accent: #62B186; --accent-soft: rgba(98, 177, 134, 0.14); }
  .theme-accent-steel  { --accent: #83A0BC; --accent-soft: rgba(131, 160, 188, 0.14); }

  .theme-light.theme-accent-copper { --accent: #9F5C2C; --accent-soft: rgba(159, 92, 44, 0.10); }
  .theme-light.theme-accent-amber  { --accent: #A87616; --accent-soft: rgba(168, 118, 22, 0.10); }
  .theme-light.theme-accent-sage   { --accent: #387758; --accent-soft: rgba(56, 119, 88, 0.10); }
  .theme-light.theme-accent-steel  { --accent: #566F8A; --accent-soft: rgba(86, 111, 138, 0.10); }

  .theme-white.theme-accent-copper { --accent: #C0531A; --accent-soft: rgba(192, 83, 26, 0.10); }
  .theme-white.theme-accent-amber  { --accent: #B0750F; --accent-soft: rgba(176, 117, 15, 0.10); }
  .theme-white.theme-accent-sage   { --accent: #2F6B45; --accent-soft: rgba(47, 107, 69, 0.10); }
  .theme-white.theme-accent-steel  { --accent: #3F5C7E; --accent-soft: rgba(63, 92, 126, 0.10); }
}