/* =========================================================================
   Knowledge Center v2 — design token layer
   -------------------------------------------------------------------------
   Single source of truth for the redesign. Every v2 stylesheet builds on
   these; no v2 file may hardcode a colour, radius or shadow that lives here.

   Two rules that shape this file:

   1. TENANT ACCENT. `tenant-theme.js` (shared with v1) fetches
      /api/tenant/config and rewrites `--ti-blue` / `--ti-green` /
      `--ti-dark` as *RGB triplets* on :root. v2 does not reinvent that —
      it derives `--kc-accent` from `--ti-blue`, so per-tenant branding
      keeps working with zero backend change. The fallback below is the
      same blue v1 ships with, so a failed config fetch degrades to the
      historic look rather than to the design's demo red.

   2. LIGHT ONLY, ON PURPOSE. v2 ships light-only: the dark theme was
      never designed for this language, and the old auto-detection
      (localStorage + prefers-color-scheme) would strand anyone whose OS
      is in dark mode on an undesigned page. v2 pages hardcode
      data-theme="light" and never read localStorage. The dark token block
      at the bottom is kept *latent* — structurally ready, unreachable
      today — so a future dark pass has somewhere to land.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Tenant brand (overwritten at runtime by tenant-theme.js) --------- */
  --ti-blue:  61 151 205;   /* primary   → accent */
  --ti-green: 76 183 114;   /* accent    → reserved */
  --ti-dark:  29 29 27;     /* secondary → reserved */

  /* --- Surfaces --------------------------------------------------------- */
  --kc-canvas:      #f5f5f6;  /* page background */
  --kc-surface:     #ffffff;  /* floating cards */
  --kc-field:       #f5f5f7;  /* inputs, user bubbles, inner surfaces */
  --kc-field-hover: #ebebed;  /* chip hover */
  --kc-segmented:   #e9e9eb;  /* active pill background */
  --kc-row-hover:   #fafafa;  /* list / table row hover */

  /* --- Text ------------------------------------------------------------- */
  /* Four steps, and every one of them legible: 16.8 / 8.4 / 6.0 / 5.1 against
     white, all above the 4.5 the smallest type on these screens needs. The
     old ladder went 16.8 / 5.1 / 3.6 / 1.7 — the bottom two were decoration
     pretending to be text, and the table headers were the worst of it.
     Four legible greys sit closer together than four arbitrary ones, so the
     hierarchy is carried where it always really was: size, weight, letter
     spacing, uppercase. Colour supports that; it no longer does it alone. */
  --kc-text:    #1d1d1f;
  --kc-text-2:  #4d4d51;
  --kc-muted:   #636368;
  --kc-faint:   #6e6e73;
  --kc-on-dark: #ffffff;

  /* `--kc-faint` used to do two jobs — quiet text AND the marks around it —
     and raising it for the first would have blackened every chevron on the
     screen. They are separate now: a decorative mark answers to nobody, a
     control you have to see answers to 3:1. */
  --kc-glyph:   #b8b8be;   /* separators, chevrons, the search magnifier */
  --kc-control: #949499;   /* the edge of a control: checkbox, empty toggle */

  /* --- Lines ------------------------------------------------------------ */
  --kc-hairline:    #f0f0f2;  /* separators inside cards */
  --kc-divider:     #e5e5e7;  /* header divider */
  --kc-page-border: #ececee;  /* A4 page frame in the viewer */
  --kc-dashed:      #d8d8dc;  /* upload dropzone */

  /* --- Accent (per tenant) ---------------------------------------------- */
  --kc-accent:      rgb(var(--ti-blue));
  --kc-accent-soft: color-mix(in srgb, rgb(var(--ti-blue)) 10%, #ffffff);
  --kc-accent-10:   rgb(var(--ti-blue) / 0.10);
  /* The accent as *text*. A brand colour is chosen to be seen against white
     as a shape, not read as 11px letters: Futura's blue scores 2.96 on its
     own soft background. Darkened by a fixed amount rather than replaced, so
     every tenant keeps their hue and none of them is unreadable — the same
     blue lands at 4.9, and an already-dark accent only gets safer. */
  --kc-accent-text: color-mix(in srgb, rgb(var(--ti-blue)) 72%, #000000);

  /* --- Semantics -------------------------------------------------------- */
  /* 4.07 on its own badge background, which is under the line for 11px type. */
  --kc-success:    #1f7a35;
  --kc-success-bg: #eafaf0;
  --kc-dot-on:     #34c759;
  --kc-dot-off:    #c7c7cc;
  --kc-info:       #0b66c3;
  --kc-info-bg:    #eaf3fe;
  --kc-info-bar:   #0071e3;
  --kc-warning:    #b25000;
  /* Warning had a colour but never a surface: the only thing tinted in that
     family so far was a line of text. A state that is not an error but must
     not be missed — documents whose folder nobody chose — needs the same
     badge-and-banner pair the other three semantics already have. */
  --kc-warning-bg: #fdf2e7;
  /* Destructive / error red. The mockups paint these with the accent, but
     only because the demo tenant's accent happens to be red — on a blue
     tenant a blue "Esci" or a blue validation error would read as neutral.
     Fixed, tenant-independent, deliberately the same red as the mockup. */
  --kc-danger:     #d51f26;
  --kc-danger-soft:#fdecec;
  --kc-link:       #0071e3;
  --kc-link-hover: #0059b3;

  /* --- Radius ----------------------------------------------------------- */
  --kc-r-pill:   9999px;
  --kc-r-card:   20px;
  --kc-r-card-m: 16px;   /* mobile card */
  --kc-r-modal:  20px;
  --kc-r-popover:16px;
  --kc-r-sheet:  22px;   /* mobile bottom sheet, top corners */
  --kc-r-input:  12px;
  --kc-r-menu:   10px;   /* popover row */
  --kc-r-thumb:  8px;
  --kc-r-page:   6px;    /* A4 page in the viewer */

  /* --- Shadows ---------------------------------------------------------- */
  /* Two layers, not one. A single wide blur at low opacity reads as haze on a
     near-white canvas: the card looked like it was printed on the page rather
     than sitting above it. The tight layer draws the edge, the wide one does
     the lifting — same restraint, more separation. */
  --kc-sh-card:    0 1px 2px rgba(0, 0, 0, .05), 0 6px 26px rgba(0, 0, 0, .075);
  --kc-sh-pill:    0 1px 2px rgba(0, 0, 0, .06), 0 2px 7px rgba(0, 0, 0, .09);
  --kc-sh-pill-hi: 0 1px 3px rgba(0, 0, 0, .09), 0 4px 12px rgba(0, 0, 0, .13);
  --kc-sh-popover: 0 16px 50px rgba(0, 0, 0, .22);
  --kc-sh-pager:   0 4px 20px rgba(0, 0, 0, .12);
  --kc-sh-modal:   0 20px 60px rgba(0, 0, 0, .2);
  --kc-sh-login:   0 8px 40px rgba(0, 0, 0, .08);
  --kc-scrim:      rgba(29, 29, 31, .18);

  /* --- Type ------------------------------------------------------------- */
  /* system-ui by design; tenant-theme.js may override --kc-font per tenant */
  --kc-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kc-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --kc-fs-hero:  24px;   /* chat empty state */
  --kc-fs-title: 22px;   /* page titles */
  --kc-fs-lg:    19px;   /* login heading */
  --kc-fs-md:    15px;
  --kc-fs-base:  14px;
  --kc-fs-sm:    13.5px;
  --kc-fs-13:    13px;
  --kc-fs-12:    12px;
  --kc-fs-11:    11px;
  --kc-ls-title: -0.02em;
  --kc-ls-hero:  -0.025em;
  --kc-ls-kicker: 0.04em;

  /* --- Geometry --------------------------------------------------------- */
  --kc-header-h:  64px;
  --kc-gutter:    28px;  /* page side padding, aligns titles with the logo */
  --kc-rail-w:    120px; /* viewer thumbnail rail */

  /* --- Motion ----------------------------------------------------------- */
  --kc-ease: ease-out;
  --kc-dur:  150ms;
}

/* -------------------------------------------------------------------------
   LATENT dark theme. Not reachable in v2: pages hardcode data-theme="light"
   and nothing writes the attribute. Kept so a future designed dark pass has
   a place to override tokens instead of rewriting components.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --kc-canvas:      #131315;
  --kc-surface:     #1c1c1e;
  --kc-field:       #242426;
  --kc-field-hover: #2c2c2e;
  --kc-segmented:   #2c2c2e;
  --kc-row-hover:   #202022;

  /* Same rule as the light ladder: four steps, all of them legible against
     the surface. `--kc-faint` was #5a5a5f, which is 2.5:1 on #1c1c1e — the
     same mistake as the light theme had, waiting for whoever turns this on.
     `--kc-glyph` and `--kc-control` are not overridden: a light mark on a
     dark surface is already the right way round. */
  --kc-text:    #f5f5f7;
  --kc-text-2:  #b4b4ba;
  --kc-muted:   #9a9aa0;
  --kc-faint:   #8e8e94;

  --kc-hairline:    #2a2a2c;
  --kc-divider:     #313134;
  --kc-page-border: #333336;
  --kc-dashed:      #3a3a3d;

  --kc-accent-soft: color-mix(in srgb, rgb(var(--ti-blue)) 22%, #1c1c1e);
  --kc-success-bg:  #10301c;
  --kc-info-bg:     #0f2439;
  --kc-warning-bg:  #3a2408;

  --kc-sh-card: 0 4px 24px rgba(0, 0, 0, .45);
  --kc-scrim:   rgba(0, 0, 0, .5);
}