/* =========================================================================
   MyGPT design tokens — the single source of truth for the UI (Phase 18).

   Every color, size, radius, shadow, and motion value the app uses comes from
   a variable defined here — components never hard-code magic numbers. Two
   themes (warm light + warm dark) are expressed purely as different values for
   the SAME semantic tokens, so the whole UI re-themes by swapping this block.

   Theme resolution:
     - no [data-theme]      → follow the OS (prefers-color-scheme)
     - [data-theme="light"] → force light, even on a dark OS
     - [data-theme="dark"]  → force dark,  even on a light OS
   js/theme.js sets the attribute before first paint (no flash).
   ========================================================================= */

/* Self-hosted UI font (CSP font-src 'self'). Inter as a single variable file
   covering the whole weight axis — no per-weight downloads, no CDN. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- type ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* modular type scale (~1.2), comfortable density → 16px base */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md: 1rem; /* 16 */
  --text-lg: 1.125rem; /* 18 */
  --text-xl: 1.375rem; /* 22 */
  --text-2xl: 1.75rem; /* 28 */
  --text-3xl: 2.25rem; /* 36 */

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

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

  /* ---- spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- radii (warm aesthetic → generous rounding) ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---- layout ---- */
  --rail-w: 76px;
  --list-w: 280px;
  --content-max: 760px; /* readable chat measure */

  /* ---- z-index layers ---- */
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 30;
  --z-scrim: 35;
  --z-slideover: 40;
  --z-modal: 50;
  --z-toast: 100;

  /* ---- motion ---- */
  --dur-fast: 0.12s;
  --dur-base: 0.18s;
  --dur-slow: 0.3s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ===================== LIGHT THEME (default) ===================== */
  /* warm, paper-like neutrals — friendly, not clinical */
  --bg: #f7f5f1;
  --surface: #fffefb;
  --surface-2: #f1eee7;
  --surface-3: #e9e5db; /* hover/pressed */
  --border: #e4dfd3;
  --border-strong: #d4cdbd;

  --fg: #2a2722;
  --muted: #6f685d;
  --subtle: #938b7d;

  --accent: #10a37f;
  --accent-hover: #0e8e6f;
  --accent-fg: #ffffff;
  --accent-soft: rgba(16, 163, 127, 0.12); /* tinted fills */

  --danger: #c2410c;
  --danger-fg: #ffffff;
  --danger-bg: #fbe6dd;
  --danger-text: #9a3412;

  --warn-bg: #f7eccf;
  --warn-fg: #8a6516;
  --ok-bg: #d8efdd;
  --ok-fg: #1f7a3d;

  --focus-ring: rgba(16, 163, 127, 0.45);

  --code-bg: #f3f0e9;
  --code-block-bg: #f5f2ec;
  --code-inline-bg: rgba(42, 39, 34, 0.06);

  --shadow-sm: 0 1px 2px rgba(58, 50, 38, 0.08);
  --shadow-md: 0 4px 14px rgba(58, 50, 38, 0.1);
  --shadow-lg: 0 12px 32px rgba(58, 50, 38, 0.16);
  --shadow-xl: 0 18px 48px rgba(58, 50, 38, 0.22);

  color-scheme: light;
}

/* dark token values, factored out so the two selectors below stay in sync */
[data-theme="dark"] {
  --bg: #1a1714;
  --surface: #221f1a;
  --surface-2: #2a2620;
  --surface-3: #332e27;
  --border: #38322a;
  --border-strong: #4a4339;

  --fg: #ece7de;
  --muted: #a59d8f;
  --subtle: #7d756a;

  --accent: #1bb78f;
  --accent-hover: #2bc79f;
  --accent-fg: #08130f;
  --accent-soft: rgba(27, 183, 143, 0.16);

  --danger: #f0764a;
  --danger-fg: #1a0f0a;
  --danger-bg: #2e1b12;
  --danger-text: #f8a07e;

  --warn-bg: #3a2f12;
  --warn-fg: #e3b341;
  --ok-bg: #12331f;
  --ok-fg: #4fc46a;

  --focus-ring: rgba(43, 199, 159, 0.5);

  --code-bg: #1c1915;
  --code-block-bg: #15120f;
  --code-inline-bg: rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* follow-system: apply the dark values when the OS is dark AND the user hasn't
   pinned a theme. Mirrors the [data-theme="dark"] block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #1a1714;
    --surface: #221f1a;
    --surface-2: #2a2620;
    --surface-3: #332e27;
    --border: #38322a;
    --border-strong: #4a4339;

    --fg: #ece7de;
    --muted: #a59d8f;
    --subtle: #7d756a;

    --accent: #1bb78f;
    --accent-hover: #2bc79f;
    --accent-fg: #08130f;
    --accent-soft: rgba(27, 183, 143, 0.16);

    --danger: #f0764a;
    --danger-fg: #1a0f0a;
    --danger-bg: #2e1b12;
    --danger-text: #f8a07e;

    --warn-bg: #3a2f12;
    --warn-fg: #e3b341;
    --ok-bg: #12331f;
    --ok-fg: #4fc46a;

    --focus-ring: rgba(43, 199, 159, 0.5);

    --code-bg: #1c1915;
    --code-block-bg: #15120f;
    --code-inline-bg: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 18px 48px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}