/* ============================================================================
 * Self-hosted Inter (no Google Fonts / CDN — avoids third-party IP logging
 * for GDPR compliance; see LG München 3 O 17493/20). Source:
 * github.com/rsms/inter via the @fontsource/inter npm package (SIL OFL 1.1;
 * license text ships alongside the files in /fonts/inter/LICENSE).
 * Replaced IBM Plex Sans (July 2026, owner decision) for its taller
 * x-height and small-size UI hinting — marginally easier on the eyes at
 * 13-14px dashboard density. The old Plex files remain in
 * /fonts/ibm-plex-sans/ for easy revert; delete them once Inter has
 * bedded in. To update: re-download from the @fontsource/inter npm
 * package; bump the ?v= cache buster.
 * ============================================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter/inter-700.woff2') format('woff2');
}

/* ============================================================================
 * tokens.css — Design tokens for MariciSelect
 *
 * Foundation layer for Decision #010 (Lit + TypeScript + Design Tokens).
 * See DECISION_LOG.md.
 *
 * INTENT
 *   Every visual primitive in the app — colors, spacing, radii, type sizes,
 *   shadows — should ultimately resolve to a CSS variable defined here.
 *   This file is the contract that future Lit components will consume as
 *   props, so it ships BEFORE the Lit pilot per the decision's sequencing
 *   ("Tokens first ~3 days → one reference screen with Lit").
 *
 * COMPAT
 *   On day one this file is additive. It does NOT change any existing
 *   visual — the tokens are sized to match the current `dashboard.css`
 *   values exactly. As individual rules get refactored to use var(--token),
 *   they continue to render identically; testing keeps running undisturbed.
 *
 * NAMING
 *   - Semantic where possible (--surface, --border, --primary) over raw
 *     scale (--gray-200) so future Lit components stay readable. Raw
 *     scale is also exposed for when a designer needs precise control.
 *   - Lowercase + hyphens, prefixed with the layer they belong to.
 *
 * EXTENDING
 *   Add new tokens here, not as one-off hex values inside component CSS.
 *   If you find yourself wanting a value that doesn't fit any token,
 *   propose adding it to this file in the same PR.
 *
 * DARK MODE
 *   `prefers-color-scheme: dark` overrides at the bottom remap surface,
 *   text, and border tokens. Semantic colors (primary, success, etc.)
 *   stay the same — they read well on both themes.
 * ============================================================================ */

:root {
  /* ── Color scale ─────────────────────────────────────────────────────── */
  /* Calibrated against existing dashboard.css values (May 2026 snapshot).
     Slate-cooled palette to match the Linear/Ashby "calm" reference. */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;

  /* Shim tokens for the Tailwind cool-gray ramp used in legacy dashboard.css.
     These exist so every hardcoded literal can flow through tokens.css —
     consolidating onto the slate ramp above is a design decision deferred
     to the Decision #010 polish pass. Search for `--gray-cool-` to find
     every usage when ready to consolidate. */
  --gray-cool-50:  #fafafa;
  --gray-cool-100: #f4f4f5;
  --gray-cool-200: #e4e4e7;
  --gray-cool-300: #d4d4d8;
  --gray-cool-400: #a1a1aa;
  --gray-cool-500: #71717a;
  --gray-cool-600: #52525b;
  --gray-cool-700: #3f3f46;
  --gray-cool-800: #27272a;
  --gray-cool-900: #18181b;

  /* Primary — violet placeholder (Hostinger-inspired). To swap brand color
     later, only these 9 values + --brand-primary-* need changing. */
  --primary-50:  #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #7c3aed;
  --primary-600: #6d28d9;
  --primary-700: #5b21b6;
  --primary-800: #4c1d95;
  --primary: var(--primary-600);

  /* Brand-primary aliases — name-stable across theme swaps. */
  --brand-primary:       var(--primary-600);
  --brand-primary-hover: var(--primary-700);
  --brand-primary-tint:  var(--primary-100);  /* subtle bg */
  --brand-primary-ink:   var(--primary-700);  /* text on tint */

  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-150: #dcfce7;
  --green-200: #a7f3d0;
  --green-300: #86efac;
  --green-400: #22c55e;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #065f46;
  --green-800: #166534;
  --success: var(--green-500);

  --orange-50:  #fff7ed;
  --orange-100: #fef3c7;
  --orange-150: #ffedd5;
  --orange-400: #fbbf24;
  --orange-500: #f59e0b;
  --orange-600: #d97706;
  --orange-700: #92400e;
  --amber-700: #b45309;  /* warning-text tint used by status pills */
  --warning: var(--orange-500);

  --yellow-50: #fefce8;
  --yellow-100: #fffbeb;

  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-400: #ef4444;
  --red-500: #dc2626;
  --red-600: #b91c1c;
  --red-700: #991b1b;
  --error: var(--red-500);
  --danger: var(--red-500);

  --indigo-500: #6366f1;
  --info: var(--indigo-500);
  --blue-100: #dbeafe;  /* info-chip tint (candidate result chips) */

  /* Accent — used for portfolio highlights, special tags */
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;

  /* ── Semantic surfaces ───────────────────────────────────────────────── */
  --surface:        #ffffff;     /* card / modal background */
  --surface-muted:  var(--gray-50);
  --surface-sunken: var(--gray-100);
  /* Page canvas behind cards. Deliberately one luminance step below the
     card surface (between gray-100 and gray-200) so the UI layers into
     canvas < muted < card instead of white-on-near-white — the old #f5f5f9
     body made the whole screen read as one large bright emitter (eye
     strain in long sessions) and gave cards almost no separation. */
  --surface-canvas: #f4f4f5;  /* shadcn "muted" zinc-100 */
  --backdrop:       rgba(15, 23, 42, 0.60); /* modal overlay — dark enough to quiet the page behind a modal */

  /* ── Text colors ─────────────────────────────────────────────────────── */
  --text-strong:  var(--gray-900);
  --text-default: var(--gray-800);
  --text-muted:   var(--gray-600);
  --text-subtle:  var(--gray-500);
  /* Lightest READABLE text. Was gray-400 (#94a3b8, ~2.5:1 on white — fails
     WCAG AA and is genuinely hard to read), but it was used on real content
     (timestamps, metadata). gray-500 is ~4.76:1, the floor for text a user
     must actually read. Purely decorative marks should use --gray-300/400
     directly, never a --text-* token. */
  --text-light:   var(--gray-500);
  --text-on-primary: #ffffff;

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --border:        var(--gray-200);
  /* Form-control border. Kept at gray-500 (#71717a, ~4.05:1 vs white) to
     satisfy WCAG 2.1 §1.4.11 Non-text Contrast (3:1 minimum for UI
     component boundaries). An earlier shadcn pass dropped it to gray-400
     (~2.4:1), which failed 1.4.11 and made inputs hard to locate for
     users with low vision or bright ambient light. Cosmetic (non-
     interactive) borders continue to use --border (gray-200) — that
     token is exempt from 1.4.11 because it's not a UI component boundary.
     Do NOT lower --border-strong further. */
  --border-strong: var(--gray-500);
  --border-focus:  var(--primary-500);
  /* Focus ring — the old 3px --brand-primary-tint (#ede9fe) glow was nearly
     invisible against white surfaces, so keyboard users had to hunt for
     focus. 25%-alpha brand violet reads clearly on white and tinted
     surfaces alike. */
  --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.25);

  /* ── Spacing scale (4px base, with half-steps for fine control) ──────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-3-5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-base: 6px;   /* most common pill/chip radius */
  --radius-lg:   8px;   /* buttons, inputs (shadcn rounded-lg) */
  --radius-xl:   10px;  /* cards, modals (shadcn-tight) */
  --radius-2xl:  20px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-serif: Georgia, 'Times New Roman', serif;

  --text-2xs:  10px;  /* tiny badges / counters */
  --text-xs:   11px;
  --text-sm:   12px;
  /* Bumped 13px → 14px: 13px body text in an all-day tool forces sustained
     focus effort (eye strain). 14px matches Linear/Hostinger body copy.
     11-12px stays reserved for badges/counters, not readable content. */
  --text-base: 14px;
  --text-md:   14px;
  --text-15:   15px;  /* used in pull-quotes + emphasis text */
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-display-sm: 20px;
  --text-display-md: 24px;
  --text-3xl:  28px;

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.8;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-quick:  150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* Dark-mode reskin — surfaces flip, text inverts, semantic colors stay.
   Activates when the user's OS is in dark mode. Future: add a manual
   theme override class (.theme-dark) once the settings UI exposes it. */
@media (prefers-color-scheme: dark) {
  :root.theme-auto-dark, :root[data-theme="dark"] {
    --surface:        #0f172a;
    --surface-muted:  #111c2e;
    --surface-sunken: #0a1322;
    --surface-canvas: #0a1322;
    --backdrop:       rgba(0, 0, 0, 0.6);

    --text-strong:  #f8fafc;
    --text-default: #e2e8f0;
    --text-muted:   #94a3b8;
    --text-subtle:  #64748b;
    --text-light:   #475569;

    --border:        #1f2a3a;
    --border-strong: #2d3a4d;
  }
}