/* ==========================================================================
   HR Corrective Action Letter AI — Design tokens
   Direction (COMPETITOR-SUPERSET.md §5 / competitive-data.json designLanguage):
   "quietly premium compliance tool" — warm cream ground, one confident
   non-blue accent (deep amber/ink), humanist serif headlines + clean sans
   body/UI, generous whitespace, flat-color iconography, restrained motion.
   Product name (working): FairFile
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Type ---- */
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  --text-2xs: 0.6875rem;   /* 11px — labels, badges, footer */
  --text-xs: 0.75rem;      /* 12px — meta, captions */
  --text-sm: 0.8125rem;    /* 13px — secondary UI */
  --text-base: 0.9375rem;  /* 15px — body */
  --text-md: 1.0625rem;    /* 17px — emphasized body */
  --text-lg: 1.25rem;      /* 20px — card titles */
  --text-xl: 1.625rem;     /* 26px — section headers */
  --text-2xl: 2.125rem;    /* 34px — page headline */
  --text-3xl: 2.75rem;     /* 44px — hero headline */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* ---- Accent: deep amber (ink-navy as secondary) ---- */
  --accent-50:  #fbf3e6;
  --accent-100: #f4e2c2;
  --accent-200: #eaca8f;
  --accent-300: #ddab5c;
  --accent-400: #cc8f3a;
  --accent-500: #b1752a;   /* primary accent */
  --accent-600: #925c1f;
  --accent-700: #714718;
  --accent-800: #4f3212;
  --accent-900: #34210c;

  --ink-50:  #f3f4f6;
  --ink-100: #e2e5ea;
  --ink-200: #c7ccd6;
  --ink-300: #9aa2b2;
  --ink-400: #6b7386;
  --ink-500: #4b5266;
  --ink-600: #363c4d;
  --ink-700: #262b38;
  --ink-800: #1a1e28;
  --ink-900: #12151c;

  /* ---- Semantic (state colors, restrained) ---- */
  --success-fg: #2f6b4f;
  --success-bg: #e7f2ec;
  --success-border: #b9d9c8;

  --warn-fg: #8a5a12;
  --warn-bg: #fdf1de;
  --warn-border: #f0d4a3;

  --danger-fg: #a3372f;
  --danger-bg: #fbeceb;
  --danger-border: #eec3bf;

  --info-fg: #2f5f8a;
  --info-bg: #eaf2f8;
  --info-border: #c3d9ea;

  /* ---- Ground / surface (light) ---- */
  --bg-canvas: #faf6ee;      /* warm cream */
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-sunken: #f3ede0;
  --bg-chrome: #f6f1e5;

  --border-subtle: #e8e0cd;
  --border-default: #ddd3ba;
  --border-strong: #c7b998;

  --text-primary: #211c14;
  --text-secondary: #5c5342;
  --text-tertiary: #8a7f68;
  --text-on-accent: #fffaf0;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- Spacing (8px grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Shadows (soft, warm-tinted, never cold gray) ---- */
  --shadow-xs: 0 1px 2px rgba(52, 33, 12, 0.06);
  --shadow-sm: 0 2px 6px rgba(52, 33, 12, 0.07), 0 1px 2px rgba(52, 33, 12, 0.05);
  --shadow-md: 0 8px 24px rgba(52, 33, 12, 0.10), 0 2px 6px rgba(52, 33, 12, 0.06);
  --shadow-lg: 0 20px 48px rgba(52, 33, 12, 0.14), 0 6px 16px rgba(52, 33, 12, 0.08);
  --shadow-focus: 0 0 0 3px rgba(177, 117, 42, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --accent-500: #d79c52;
    --accent-400: #e3b578;
    --accent-600: #b1752a;

    --ink-50: #12151c;
    --ink-900: #f3f4f6;

    --success-fg: #7fd6ac;
    --success-bg: #133226;
    --success-border: #245240;

    --warn-fg: #f0c583;
    --warn-bg: #332309;
    --warn-border: #5c451a;

    --danger-fg: #f0958c;
    --danger-bg: #341615;
    --danger-border: #5c2a26;

    --info-fg: #9dc3e4;
    --info-bg: #101f2c;
    --info-border: #24445e;

    --bg-canvas: #17140f;
    --bg-surface: #211d16;
    --bg-surface-raised: #2a251c;
    --bg-sunken: #14110c;
    --bg-chrome: #1c1811;

    --border-subtle: #362e21;
    --border-default: #453a29;
    --border-strong: #5c4d35;

    --text-primary: #f6f0e3;
    --text-secondary: #cabe9f;
    --text-tertiary: #9a8c6c;
    --text-on-accent: #1c1811;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.50), 0 6px 16px rgba(0, 0, 0, 0.34);
    --shadow-focus: 0 0 0 3px rgba(215, 156, 82, 0.32);
  }
}

/* Explicit theme override (data-theme attr wins over prefers-color-scheme) */
[data-theme="dark"] {
  color-scheme: dark;
  --accent-500: #d79c52;
  --accent-400: #e3b578;
  --accent-600: #b1752a;
  --ink-50: #12151c;
  --ink-900: #f3f4f6;
  --success-fg: #7fd6ac;
  --success-bg: #133226;
  --success-border: #245240;
  --warn-fg: #f0c583;
  --warn-bg: #332309;
  --warn-border: #5c451a;
  --danger-fg: #f0958c;
  --danger-bg: #341615;
  --danger-border: #5c2a26;
  --info-fg: #9dc3e4;
  --info-bg: #101f2c;
  --info-border: #24445e;
  --bg-canvas: #17140f;
  --bg-surface: #211d16;
  --bg-surface-raised: #2a251c;
  --bg-sunken: #14110c;
  --bg-chrome: #1c1811;
  --border-subtle: #362e21;
  --border-default: #453a29;
  --border-strong: #5c4d35;
  --text-primary: #f6f0e3;
  --text-secondary: #cabe9f;
  --text-tertiary: #9a8c6c;
  --text-on-accent: #1c1811;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.50), 0 6px 16px rgba(0, 0, 0, 0.34);
  --shadow-focus: 0 0 0 3px rgba(215, 156, 82, 0.32);
}
[data-theme="light"] {
  color-scheme: light;
}

/* ---- Base resets used by every scene ---- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--text-primary);
}
p { margin: 0; }
button { font-family: inherit; }