/* ============================================================================
   DESIGN TOKENS — the "set it once" layer.

   The whole system is grayscale + ONE accent. To re-skin the brand, change
   --accent. To re-skin light/dark, change the surface tokens.

   Key idea: --field is the fill for inputs & secondary buttons. It is CONTEXTUAL
   — on the page it's white (pops on the gray bg); inside a .card it flips to the
   page color (pops on the white card). One variable, set once per context.
   ========================================================================= */
:root {
  /* The one knob. Everything accent-colored derives from this. */
  --accent:        #f59e0b;
  --accent-hover:  color-mix(in srgb, var(--accent) 86%, #000);
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);
  /* accent used as TEXT/foreground — must contrast its background per theme.
     Light: the brand violet. Dark: a lightened violet (derived, still one knob). */
  --accent-text:   var(--accent);
  /* Amber is light: white ink lands near 2.1:1 on it, black at 9.8:1. */
  --on-accent:     #000000;

  /* Monochrome accent option: pure black fill in light mode, white ink on it.
     Dark mode flips both (see below). The picker points --accent at var(--mono). */
  --mono:     #000000;
  --mono-ink: #ffffff;

  /* Semantic status — FIXED meaning, NOT derived from --accent. Brand theming
     uses --accent; these convey success/warning/danger and stay constant across
     every accent choice. Only the contrast adapts per theme (see dark below).
     Each pairs a saturated ink with a soft tint, mirroring the accent pattern. */
  --success: #16a34a;  --success-soft: color-mix(in srgb, #16a34a 12%, transparent);
  --warning: #b45309;  --warning-soft: color-mix(in srgb, #b45309 14%, transparent);
  --danger:  #dc2626;  --danger-soft:  color-mix(in srgb, #dc2626 12%, transparent);

  /* Surfaces (light) */
  --bg:       #eef0f3;   /* page */
  --surface:  #ffffff;   /* cards, menus, modals */
  --field:    #ffffff;   /* inputs + secondary buttons (default = on the page) */
  --control:  #d2d5db;   /* toggle track / neutral control backing */
  --text:     #1b1c20;
  --text-muted: #6b7280;

  /* The one neutral hover tint for borderless interactive surfaces (nav links,
     menu items, ghost buttons, the vote/post-action buttons…). Derived from
     --text, so it auto-inverts per theme: a faint dark wash in light mode, a
     faint light wash on dark surfaces — no dark-mode override needed. One value
     replaces the old hand-rolled 4–8% color-mix() scattered across the kit. */
  --hover-tint: color-mix(in srgb, var(--text) 8%, transparent);

  /* Hairline rules — the kit's one sanctioned "line" (the divider thesis: a
     faded suggestion, never a hard boxy border). Both derive from --text, so
     they invert per theme with no override. --rule is the subtle row hairline;
     --rule-strong anchors a header/section — a low/high pair mirroring
     --shadow-1/--shadow-3. Neutral by design: rules never track --accent. */
  --rule:        color-mix(in srgb, var(--text) 8%, transparent);
  --rule-strong: color-mix(in srgb, var(--text) 16%, transparent);

  /* Spacing scale */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 3rem;

  /* Radius */
  --radius-1: 0.375rem;
  --radius-2: 0.625rem;
  --radius-3: 1rem;
  --radius-full: 9999px;

  /* Typography */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 0.75rem;   --text-sm: 0.875rem;  --text-base: 0.9375rem;  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;   --text-2xl: 1.625rem;
  --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tracking-tight: -0.02em;

  /* Shadows — soft, used sparingly (no borders anywhere) */
  --shadow-1: 0 1px 2px rgba(17,20,40,0.05), 0 1px 1px rgba(17,20,40,0.04);
  --shadow-3: 0 16px 40px -12px rgba(17,20,40,0.22), 0 4px 10px -4px rgba(17,20,40,0.12);
  /* Inset "well" for recessed fields on a card — the same family as the toggle
     track's inset, so a field on a card reads as depth, not a flat grey panel.
     Light only: dark mode ELEVATES on-card fields (see --surface-2) instead of
     recessing them, so it switches this off (set to none below). */
  --field-inset: inset 0 1.5px 2.5px rgba(0,0,0,0.10);

  /* Motion */
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  /* A more deliberate variant (same easing) for larger, more physical motions
     like the toggle switch, where the snappy --transition reads as too fast. */
  --transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark = pitch-black page, dark-gray surfaces. Only re-point these tokens. */
[data-theme="dark"] {
  --bg:       #000000;
  --surface:  #1c1c1e;
  --surface-2: #2c2c2e;  /* elevated fill: content resting ON a card (one step up) */
  --field:    #1c1c1e;
  --control:  #3a3a3c;
  --text:     #f3f3f5;
  --text-muted: #98989f;
  --accent-soft: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 32%, #fff);
  --shadow-1: none;
  --shadow-3: 0 16px 40px -12px rgba(0,0,0,0.6);
  --field-inset: none;  /* dark elevates on-card fields; no recessed well */
  --mono:     #ffffff;
  --mono-ink: #000000;
  /* Same hues, lightened ink + thicker tint so they read on a black page. */
  --success: #4ade80;  --success-soft: color-mix(in srgb, #4ade80 22%, transparent);
  --warning: #fbbf24;  --warning-soft: color-mix(in srgb, #fbbf24 22%, transparent);
  --danger:  #f87171;  --danger-soft:  color-mix(in srgb, #f87171 22%, transparent);
}

/* THE override: inside a card, on-card fills (inputs, secondary buttons, popovers)
   shift OFF the card colour so they stay legible without borders. Light mode
   RECESSES to the page grey; dark mode ELEVATES to a lighter grey — pure-black
   insets read as harsh holes on a dark card. Primary buttons opt out below. */
.card { --field: var(--bg); }
[data-theme="dark"] .card { --field: var(--surface-2); }