/* ==========================================================================
   Bullet Log design tokens — landing site copy
   --------------------------------------------------------------------------
   Byte-identical to app/styles/tokens.css. Neither the app nor the landing
   site has a build step that could share one file, so this is a plain copy:
   refresh it with `cp app/styles/tokens.css landing/www/tokens.css` and check
   with `diff`. Three layers:
     1. PRIMITIVES  (:root)              raw ramps — never referenced by components
     2. SEMANTIC    ([data-theme=...])   the only names components may use
     3. SCALES      (:root)              type / space / radius / motion

   `data-theme` is stamped on <html> by the boot script in index.html before
   first paint, from localStorage ?? prefers-color-scheme. The landing site
   reads the same `bulletlog.theme` key as the app, so a choice made in one
   carries to the other.

   BREAKPOINTS — literals, because custom properties do NOT work in @media:
     sm  480px
     md  768px   nav collapses to the dropdown below this
     lg 1024px
     xl 1280px
   ========================================================================== */

:root {
  /* ---- sand: warm neutral -------------------------------------------- */
  --sand-25: #fdfaf6;
  --sand-50: #f9f3eb;
  --sand-100: #f2e9dc;
  --sand-200: #e7d9c6;
  --sand-300: #d6c2a8;
  --sand-400: #bca486;
  --sand-500: #9c8468;
  --sand-600: #7a654d;
  --sand-700: #5b4a38;
  --sand-800: #3d3227;
  --sand-900: #262019;
  --sand-950: #171310;

  /* ---- teal: brand accent -------------------------------------------- */
  --teal-50: #e9f4f3;
  --teal-100: #cbe6e4;
  --teal-200: #9ccfcc;
  --teal-300: #6bb5b1;
  --teal-400: #3f9995;
  --teal-500: #1f7d79;
  --teal-600: #146562;
  --teal-700: #0f504e;
  --teal-800: #0b3b39;
  --teal-900: #072826;

  /* ---- clay: negative / destructive ----------------------------------- */
  --clay-100: #f8e3dc;
  --clay-300: #e8ae99;
  --clay-500: #c9603f;
  --clay-600: #a94b2d;
  --clay-700: #85391f;

  /* ---- moss: positive / confirmation ---------------------------------- */
  --moss-100: #ddeee1;
  --moss-300: #8fc7a2;
  --moss-500: #3e8c5e;
  --moss-600: #2f7049;
  --moss-700: #235736;

  /* ---- amber: pending / warning -------------------------------------- */
  --amber-100: #fbebcf;
  --amber-400: #e0a94a;
  --amber-600: #a9761e;

  /* ---- ink: dark-mode surfaces (warm-tinted, never neutral gray) ------ */
  --ink-950: #15120f;
  --ink-900: #1f1b17;
  --ink-800: #2a241e;
  --ink-700: #362e26;
  --ink-600: #4a4036;
}

/* ==========================================================================
   2. SEMANTIC ALIASES
   Teal (brand) is deliberately kept separate from moss (positive). If the
   accent doubled as the success colour, every primary button would read as a
   "saved" confirmation.
   ========================================================================== */

[data-theme='light'] {
  color-scheme: light;

  --color-bg: var(--sand-50);
  --color-bg-wash: linear-gradient(170deg, var(--sand-100) 0%, var(--sand-50) 45%, var(--sand-25) 100%);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: var(--sand-100);

  --color-border: var(--sand-200);
  --color-border-strong: var(--sand-300);

  --color-text: var(--sand-900);
  --color-text-muted: var(--sand-600); /* ~6:1 on surface — body-safe */
  --color-text-subtle: var(--sand-500); /* ~4.3:1 — >=16px or decorative only */
  --color-text-inverse: var(--sand-25);

  --color-accent: var(--teal-600);
  --color-accent-hover: var(--teal-700);
  --color-accent-soft: var(--teal-50);
  --color-accent-soft-border: var(--teal-100);
  --color-accent-contrast: #ffffff;

  --color-positive: var(--moss-600);
  --color-positive-soft: var(--moss-100);
  --color-negative: var(--clay-600);
  --color-negative-soft: var(--clay-100);
  --color-warning: var(--amber-600);
  --color-warning-soft: var(--amber-100);

  --color-overlay: rgb(38 32 25 / 0.45);
  --color-focus-ring: var(--teal-500);
  --color-skeleton: var(--sand-200);
  --color-skeleton-shine: var(--sand-100);

  --shadow-xs: 0 1px 2px rgb(60 45 32 / 0.06);
  --shadow-sm: 0 2px 8px rgb(60 45 32 / 0.08);
  --shadow-md: 0 8px 24px -8px rgb(60 45 32 / 0.14);
  --shadow-lg: 0 20px 40px -16px rgb(60 45 32 / 0.22);
}

[data-theme='dark'] {
  color-scheme: dark;

  --color-bg: var(--ink-950);
  --color-bg-wash: linear-gradient(170deg, var(--ink-900) 0%, var(--ink-950) 55%, #100e0c 100%);
  --color-surface: var(--ink-900);
  --color-surface-raised: var(--ink-800);
  --color-surface-sunken: #100e0c;

  --color-border: var(--ink-700);
  --color-border-strong: var(--ink-600);

  --color-text: #f3ece3;
  --color-text-muted: #bdb0a2;
  --color-text-subtle: #8c8175;
  --color-text-inverse: var(--ink-950);

  --color-accent: var(--teal-300);
  --color-accent-hover: var(--teal-200);
  --color-accent-soft: rgb(107 181 177 / 0.16);
  --color-accent-soft-border: rgb(107 181 177 / 0.3);
  --color-accent-contrast: var(--teal-900);

  --color-positive: #7cd3a0;
  --color-positive-soft: rgb(124 211 160 / 0.14);
  --color-negative: #f09274;
  --color-negative-soft: rgb(240 146 116 / 0.14);
  --color-warning: var(--amber-400);
  --color-warning-soft: rgb(224 169 74 / 0.14);

  --color-overlay: rgb(0 0 0 / 0.6);
  --color-focus-ring: var(--teal-200);
  --color-skeleton: var(--ink-800);
  --color-skeleton-shine: var(--ink-700);

  /* shadows barely read on dark — elevation comes from surface + border */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.45);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 20px 40px -16px rgb(0 0 0 / 0.65);
}

/* ==========================================================================
   3. SCALES — scheme-independent
   ========================================================================== */

:root {
  --font-sans:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-display: 2.75rem;

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

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

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --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;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --nav-height: 56px; /* phone bottom nav */
  --header-height: 56px;
  --sidebar-width: 240px; /* desktop rail; Kulupulu has no equivalent */

  --z-nav: 100;
  --z-fab: 200;
  --z-overlay: 300;
  --z-sheet: 310;
  --z-toast: 400;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}