/**
 * KOL Color System — DS theme layer (brand-neutral).
 *
 * Surface tiers, ink-based accent default, ui-state, borders, opacity ramp
 * re-declarations for surface-inverse contexts. Brand identity (hue ramps,
 * cream ramp, brand-primary/secondary roles, accent rebind) lives in the
 * sibling `kol-brand-color.css` and mirrors the `kol-brand` package — loaded
 * explicitly by `index.css` for this repo (the brand showcase). A scaffolded
 * project that does NOT pull `kol-brand` skips the brand import and renders
 * brand-neutral with `--kol-accent-*` defaulting to surface ink.
 *
 * Dark mode toggle:
 *   document.documentElement.setAttribute('data-theme', 'dark')
 */

/* =============================================================================
 * LIGHT MODE (Default)
 * ============================================================================= */

:root {
  /* Absolutes + surface elevation tiers now come from
   * @kol/theme/kol-base-tokens.css (imported first by kol-theme.css) — the
   * shared canonical neutral base, identical to apps/web. */

  /* ---------------------------------------------------------------------------
   * ACCENT (interactive role — buttons, toggles, focus rings)
   *
   * Brand-neutral default: points at the surface ink color so the DS works
   * without a brand layer. kol-brand-color.css overrides these to point at
   * --brand-primary / --brand-on-primary / a brand-strong stop.
   * --------------------------------------------------------------------------- */

  --kol-accent-primary:        var(--kol-surface-on-primary);
  --kol-accent-on-primary:     var(--kol-surface-primary);
  --kol-accent-primary-strong: color-mix(in srgb, var(--kol-accent-primary) 80%, var(--kol-surface-primary));

  /* ---------------------------------------------------------------------------
   * HYPERLINKS — the one text role with its own color (2026-07-15, chess
   * consumer audit finding 3: no link token, no a{} rule → links rendered as
   * body ink). Theme-owned hex defaults in the --ui-info blue family; the
   * brand layer overrides the tokens, consumers override per element.
   * --------------------------------------------------------------------------- */

  /* Link color is a PER-REPO decision (user law 2026-07-29): the DS ships the
   * hook, not a color. currentColor = links render as surrounding ink until a
   * consumer binds the token at its root, e.g.
   *   :root { --kol-link: var(--kol-color-yellow-300); --kol-link-hover: … }
   * (The old defaults were raw Tailwind blue-600/700 — placeholder, never
   * brand-bound; killed the same day a consumer's DS-Table flush exposed it.) */
  --kol-link:       currentColor;
  --kol-link-hover: currentColor;

  /* ---------------------------------------------------------------------------
   * UI STATE — error / warning / info / success.
   * Direct hex (not ramp-dependent). Intentionally not part of the brand layer
   * so consumers get sensible defaults out of the box.
   * --------------------------------------------------------------------------- */

  --ui-error:    #B91C1C;
  --ui-warning:  #EAB308;
  --ui-info:     #1D4ED8;
  --ui-success:  #15803D;

  /* ---------------------------------------------------------------------------
   * PALETTE — shared categorical colors for tags, charts, data viz.
   * Lifted verbatim from the monorepo theme (2026-07-16): the dashboards +
   * chess component CSS already reference these vars, but the definitions
   * never migrated — first real kol-dashboards consumer found them dangling.
   * --------------------------------------------------------------------------- */

  --kol-palette-blue:   #3740D3;
  --kol-palette-teal:   #49a0a2;
  --kol-palette-green:  #66a44c;
  --kol-palette-yellow: #ffe32e;
  --kol-palette-red:    #ce4646;
  --kol-palette-orange: #db8000;
  --kol-palette-purple: #9437FF;

  /* Palette Light — muted variants for light-mode backgrounds */
  --kol-palette-blue-light:   #c8caf4;
  --kol-palette-teal-light:   #d0e8e9;
  --kol-palette-green-light:  #d4e6cb;
  --kol-palette-yellow-light: #d0d79d;
  --kol-palette-red-light:    #f0caca;
  --kol-palette-orange-light: #f5ddb3;
  --kol-palette-purple-light: #e0c8ff;

  /* ---------------------------------------------------------------------------
   * BORDER
   * --------------------------------------------------------------------------- */

  --kol-focus-ring: var(--kol-accent-primary);
  /* The QUIET ring — 1px, inset, for dense rows where the loud ring's 2px
   * offset would bloom over its neighbours (nav rail leaves today).
   *
   * It exists so the pair is a real OFF SWITCH (FocusRingsInConsumers, kol-fxr
   * 2026-08-15, user ruling): --kol-focus-ring alone was only ever half of one,
   * because the rails hardcoded --kol-fg-32 and never read it, so a consumer
   * setting it transparent lost button rings and kept rail rings. Set BOTH to
   * transparent and the system is genuinely off — no `outline: none !important`
   * in consumer CSS, which is the local override this replaces.
   *
   * Default is --kol-fg-32, exactly what the rails already drew, so minting
   * this changes NOTHING visually. Both rings are white (--kol-accent-primary
   * resolves to --kol-surface-on-primary); the two differ in weight, not hue. */
}

/* SURFACE-DERIVED chrome tokens live on the THEME selectors, not `:root` alone
 * (0.52.0, nested-theme-scope) — same reason as the fg ramp in kol-opacity.css:
 * a var() resolves where the property is declared, so a themed SUBTREE that
 * flips --kol-surface-on-primary kept the root's border colour (a white 8%
 * hairline on white paper). The accent family stays in the :root block above
 * on purpose: kol-brand-color.css rebinds it at :root only, and a themed
 * re-declaration here would hand a branded app's nested pane the neutral
 * ink accent instead of the brand. */
:root,
:is([data-theme="light"], .light),
:is([data-theme="dark"], .dark) {
  --kol-border-default: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
  --kol-border-focus: color-mix(in srgb, var(--kol-accent-primary) 70%, var(--kol-surface-on-primary));
  --kol-focus-ring-quiet: var(--kol-fg-32);
}

:root[data-theme="light"] {
  --ui-error:    #DC2626;
  --ui-warning:  #CA8A04;
  --ui-info:     #2563EB;
  --ui-success:  #16A34A;
}

/* =============================================================================
 * DARK MODE
 * Explicit dark-mode surface overrides ([data-theme="dark"], .dark) live in
 * kol-base-tokens.css, alongside their system-follow MIRROR blocks
 * (@media prefers-color-scheme gated on :root:not([data-theme])) — USER law
 * corrected 2026-07-28: explicit choice > system/auto > light. This file
 * defines no dark rules of its own.
 * ============================================================================= */

/* =============================================================================
 * LINK COLOR — OPT-IN, never global. The old bare `a { color }` rule painted
 * every anchor in every consumer and out-ranked chrome on two axes: `a:hover`
 * (0,1,1) beats any single utility class, and an unlayered theme import beats
 * whole `layer(...)` chrome sheets regardless of specificity. Chrome owns its
 * anchor colors; content links are `.kol-prose a` (inherit + underline).
 * COLOR is a per-repo choice (user law 2026-07-29): `.kol-link` and
 * `.kol-table a` are hooks on `--kol-link`, which defaults to currentColor —
 * the DS ships NO link color. A repo binds the token at its root to opt in.
 * ============================================================================= */

.kol-link { color: var(--kol-link); }
.kol-link:hover { color: var(--kol-link-hover); }

/* =============================================================================
 * CONTEXT-AWARE SURFACE INVERSE
 * ============================================================================= */

.bg-surface-inverse {
  background-color: var(--kol-surface-inverse);
  color: var(--kol-surface-on-inverse);

  --kol-surface-primary: var(--kol-surface-inverse);
  --kol-surface-on-primary: var(--kol-surface-on-inverse);
  --kol-surface-secondary: var(--kol-surface-secondary);
  --kol-surface-on-secondary: var(--kol-surface-on-inverse);
  --kol-surface-tertiary: var(--kol-surface-tertiary);
  --kol-surface-on-tertiary: var(--kol-surface-on-inverse);
  --kol-border-default: color-mix(in srgb, var(--kol-surface-on-inverse) 8%, transparent);

  /* Re-declare fg-ramp against on-inverse so opacity tokens flip with surface.
   * CSS substitutes inner var() at the declaration site, so the :root declarations
   * bake the on-primary color and don't re-resolve here. Redeclaring here lets every
   * --kol-fg-* consumer (borders, dividers, dimmed text) automatically contrast-flip. */
  --kol-fg-01: color-mix(in srgb, var(--kol-surface-on-inverse) 1%, transparent);
  --kol-fg-02: color-mix(in srgb, var(--kol-surface-on-inverse) 2%, transparent);
  --kol-fg-04: color-mix(in srgb, var(--kol-surface-on-inverse) 4%, transparent);
  --kol-fg-08: color-mix(in srgb, var(--kol-surface-on-inverse) 8%, transparent);
  --kol-fg-12: color-mix(in srgb, var(--kol-surface-on-inverse) 12%, transparent);
  --kol-fg-16: color-mix(in srgb, var(--kol-surface-on-inverse) 16%, transparent);
  --kol-fg-24: color-mix(in srgb, var(--kol-surface-on-inverse) 24%, transparent);
  --kol-fg-32: color-mix(in srgb, var(--kol-surface-on-inverse) 32%, transparent);
  --kol-fg-40: color-mix(in srgb, var(--kol-surface-on-inverse) 40%, transparent);
  --kol-fg-48: color-mix(in srgb, var(--kol-surface-on-inverse) 48%, transparent);
  --kol-fg-64: color-mix(in srgb, var(--kol-surface-on-inverse) 64%, transparent);
  --kol-fg-80: color-mix(in srgb, var(--kol-surface-on-inverse) 80%, transparent);
  --kol-fg-88: color-mix(in srgb, var(--kol-surface-on-inverse) 88%, transparent);
  --kol-fg-96: color-mix(in srgb, var(--kol-surface-on-inverse) 96%, transparent);
}

/* =============================================================================
 * UTILITY CLASSES (HEAVILY USED — Based on usage audit)
 *
 * - .text-fg-* (594 references) live in kol-opacity.css
 * - .border-fg-* / .bg-fg-* live in kol-opacity.css
 *
 * Below: surface + elevation + basic + state classes that consume the surface
 * tier directly (not through opacity ramps).
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * Surface Utilities
 * --------------------------------------------------------------------------- */

.bg-surface-primary {
  background-color: var(--kol-surface-primary);
  color: var(--kol-surface-on-primary);
}

.bg-surface-secondary {
  background-color: var(--kol-surface-secondary);
  color: var(--kol-surface-on-secondary);
}

.bg-surface-tertiary {
  background-color: var(--kol-surface-tertiary);
  color: var(--kol-surface-on-tertiary);
}

.bg-surface-inverse {
  background-color: var(--kol-surface-inverse);
  color: var(--kol-surface-on-inverse);
}

/* ---------------------------------------------------------------------------
 * Elevation Utilities
 * --------------------------------------------------------------------------- */

.elevation-base {
  background-color: var(--kol-surface-primary);
  color: var(--kol-surface-on-primary);
}

.elevation-raised {
  background-color: var(--kol-surface-secondary);
  color: var(--kol-surface-on-secondary);
}

.elevation-elevated {
  background-color: var(--kol-surface-tertiary);
  color: var(--kol-surface-on-tertiary);
}

/* ---------------------------------------------------------------------------
 * Basic Utilities
 * --------------------------------------------------------------------------- */

.text-auto {
  color: var(--kol-surface-on-primary);
}

.text-inverse {
  color: var(--kol-surface-on-inverse);
}

.bg-auto {
  background-color: var(--kol-surface-primary);
}

.bg-fg {
  background-color: var(--kol-surface-on-primary);
}

.border-auto {
  border-color: var(--kol-border-default);
}

.divider-auto {
  border-color: var(--kol-border-default);
  border-width: 1px;
}

/* ---------------------------------------------------------------------------
 * Surface-based Borders (for contrast on bg-fg fills)
 * --------------------------------------------------------------------------- */

.border-surface {
  border-color: var(--kol-surface-primary);
}

.border-surface-08 {
  border-color: color-mix(in srgb, var(--kol-surface-primary) 8%, transparent);
}

.border-surface-16 {
  border-color: color-mix(in srgb, var(--kol-surface-primary) 16%, transparent);
}

/* ---------------------------------------------------------------------------
 * State Utilities
 * --------------------------------------------------------------------------- */

.hover\:border-hover:hover {
  border-color: var(--kol-border-default);
}

.focus\:border-focus:focus {
  border-color: var(--kol-border-focus);
}

.focus-visible\:border-focus:focus-visible {
  border-color: var(--kol-border-focus);
}

.focus-visible\:ring-focus:focus-visible {
  outline: 2px solid var(--kol-focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Absolute Colors
 * --------------------------------------------------------------------------- */

.bg-ab-white {
  background-color: var(--kol-color-ab-white);
}

.bg-ab-black {
  background-color: var(--kol-color-ab-black);
}

.text-ab-white {
  color: var(--kol-color-ab-white);
}

.text-ab-black {
  color: var(--kol-color-ab-black);
}

/* =============================================================================
 * TAILWIND CONTRACT — color exposures (DS layer)
 *
 * Tailwind v4 generates utilities from --color-* tokens. UI state lives here
 * (DS-level). Brand role + brand ramps + cream are registered in
 * kol-brand-color.css (loaded after this file when client branding is desired).
 * ============================================================================= */

@theme {
  /* UI state — conventional Tailwind hexes, disconnected from brand ramps. */
  --color-ui-error:             var(--ui-error);
  --color-ui-warning:           var(--ui-warning);
  --color-ui-info:              var(--ui-info);
  --color-ui-success:           var(--ui-success);
}