/* variables.css — design tokens
   PixelOS "Monet" cream theme is the default. A warm charcoal dark theme lives
   under [data-theme="dark"]. System preference is honored via
   @media (prefers-color-scheme: dark) when no explicit data-theme is set. */

:root {
  /* Typography */
  --font-display: "Cal Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", monospace;

  /* PixelOS cream theme (default) */
  --bg-primary: #fbf4d6;
  --bg-secondary: #fcf8e6;
  --bg-card: #fffdf5;
  --bg-card-hover: #f8f1da;
  --border: rgba(64, 52, 18, 0.12);
  --border-hover: rgba(224, 168, 46, 0.6);

  /* Accent — readable green ink + warm pastel blob tones (button gradient = yellow) */
  --accent-1: #2e7d54;
  --accent-1-rgb: 46, 125, 84;
  --accent-2: #b5791c;
  --accent-2-rgb: 181, 121, 28;
  --accent-3: #ebd27a; /* butter — hero blob */
  --accent-3-rgb: 235, 210, 122;
  --accent-4: #a7d9b5; /* mint — hero blob */
  --accent-4-rgb: 167, 217, 181;
  --accent-5: #d9c24e; /* olive — hero blob */
  --accent-5-rgb: 217, 194, 78;
  --gradient: linear-gradient(135deg, #f4d65b, #e8b63c);
  --gradient-soft: linear-gradient(135deg, rgba(235, 210, 122, 0.5), rgba(167, 217, 181, 0.45));
  --text-gradient: linear-gradient(135deg, #2e7d54, #a87b1e);

  /* Text */
  --text-primary: #2b2a24;
  --text-secondary: #6e6a57;
  --text-muted: #a39e86;
  --text-on-accent: #2b2a24;

  /* Status */
  --success: #3e9b6a;

  /* Spacing scale (8pt grid) */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Shadows */
  --shadow-card: 0 0 0 1px rgba(64, 52, 18, 0.05), 0 6px 24px rgba(120, 100, 30, 0.1);
  --shadow-glow: 0 0 40px rgba(233, 183, 62, 0.3);
  --shadow-lg: 0 24px 60px rgba(120, 100, 30, 0.18);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 0.3s;
  --duration-slow: 0.5s;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 4.5rem;

  /* Theme transition (applied when toggling) */
  --theme-transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out);
}

/* ── Dark theme (warm charcoal) ──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary: #18191b;
  --bg-secondary: #1f2123;
  --bg-card: #26282b;
  --bg-card-hover: #2f3134;
  --border: rgba(255, 255, 255, 0.09);
  --border-hover: rgba(242, 210, 75, 0.5);

  --accent-1: #7fd0a0;
  --accent-1-rgb: 127, 208, 160;
  --accent-2: #f2d24b;
  --accent-2-rgb: 242, 210, 75;
  --accent-3: #ebd27a;
  --accent-3-rgb: 235, 210, 122;
  --accent-4: #a7d9b5;
  --accent-4-rgb: 167, 217, 181;
  --accent-5: #d9c24e;
  --accent-5-rgb: 217, 194, 78;
  --gradient: linear-gradient(135deg, #f2d24b, #e6b53c);
  --gradient-soft: linear-gradient(135deg, rgba(242, 210, 75, 0.16), rgba(143, 212, 168, 0.16));
  --text-gradient: linear-gradient(135deg, #f2d24b, #8fd4a8);

  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-muted: #6b7077;
  --text-on-accent: #2b2a24;

  --shadow-card: 0 0 0 1px rgba(255, 250, 220, 0.05), 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 40px rgba(242, 210, 75, 0.2);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Honor system preference when no explicit theme has been chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg-primary: #18191b;
    --bg-secondary: #1f2123;
    --bg-card: #26282b;
    --bg-card-hover: #2f3134;
    --border: rgba(255, 255, 255, 0.09);
    --border-hover: rgba(242, 210, 75, 0.5);
    --accent-1: #7fd0a0;
    --accent-1-rgb: 127, 208, 160;
    --accent-2: #f2d24b;
    --accent-2-rgb: 242, 210, 75;
    --accent-3: #ebd27a;
    --accent-3-rgb: 235, 210, 122;
    --accent-4: #a7d9b5;
    --accent-4-rgb: 167, 217, 181;
    --accent-5: #d9c24e;
    --accent-5-rgb: 217, 194, 78;
    --gradient: linear-gradient(135deg, #f2d24b, #e6b53c);
    --gradient-soft: linear-gradient(135deg, rgba(242, 210, 75, 0.16), rgba(143, 212, 168, 0.16));
    --text-gradient: linear-gradient(135deg, #f2d24b, #8fd4a8);
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --text-muted: #6b7077;
    --text-on-accent: #2b2a24;
    --shadow-card: 0 0 0 1px rgba(255, 250, 220, 0.05), 0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 40px rgba(242, 210, 75, 0.2);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}