/* =========================================================================
   DESIGN TOKENS — single source of truth for all visual values.

   Three abstraction layers (see also the cascade @layer order below):

     1. PRIMITIVES  (@layer tokens)  — raw, design-agnostic values: hex/OKLCH
        colors, pixel scales, type. COLOR primitives (--c-*) must never be
        referenced outside this file. Scale primitives (--s-*, --r-*, --fs-*,
        --fw-*, --ff-*, --dur-*, --ease-*) MAY be used directly in app.css —
        they are constrained scales, not loose values.

     2. SEMANTICS   (@layer themes)  — meaning-based aliases mapped to
        primitives (brand, text, borders, focus, elevation, layering). A future
        theme would swap by remapping ONLY this layer (e.g. add an
        `html[data-theme="…"]` block); the default lives under
        `:root, html[data-theme="light"]`. Components never touch primitives.

     3. SECTION THEMES (@layer themes) — named color sets for user-selectable
        section colors. Content theming only — NEVER use these for app chrome
        or controls (use --color-primary-* instead).

   COMPONENTS live in app.css under `@layer components` and consume only the
   semantic tokens here. Cascade order (low → high priority for normal rules):
   tokens < themes < components < utilities. Unlayered rules (e.g. third-party
   Coloris) still outrank every layer — see the note at the end of app.css.
   ========================================================================= */

@layer tokens, themes, components, utilities;

/* ---- TIER 1 — PRIMITIVES ------------------------------------------------- */
@layer tokens {
  :root {
    /* Palette — OKLCH; neutrals tinted toward navy (hue 255) so nothing is pure b/w. */
    --c-white: oklch(99.3% 0.004 255);   /* surface — barely-cool off-white */
    --c-white-pure: oklch(100% 0 0);     /* true white: text/icons on filled color, paper */
    --c-ink: oklch(0% 0 0 / 0.8);        /* primary text — true black at 80% tint */
    --c-ink-soft: oklch(60% 0.025 255);  /* secondary text */
    --c-line: oklch(92% 0.008 255);      /* neutral hairline (topbar, controls) */
    --c-canvas: oklch(97% 0.003 255);    /* page background behind the cards */
    --c-danger: oklch(60% 0.21 25);      /* destructive actions (delete) */
    --c-scrim: oklch(40% 0.03 255 / 0.2);/* dimming layer behind panels/modals */

    /* Theme hues (sun / ocean / lavender), matched to the Figma design.
       -500 = the theme color (tints/accents are derived via color-mix).
       Ocean also carries the brand ramp: -200 pale tint, -700 deep accent. */
    --c-sun-500: oklch(85% 0.16 88);     /* #FFD43B */
    --c-ocean-200: oklch(97.5% 0.018 220); --c-ocean-500: oklch(73% 0.115 216); --c-ocean-700: oklch(55% 0.10 220); /* #E6F9FF / #2BBCD4 */
    --c-lav-500: oklch(62% 0.155 300);   /* #9B72D8 */

    /* Spacing scale (4px base) */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px;

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

    /* Type */
    --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.35rem; --fs-xl: 1.85rem;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
    --ff-base: "Quicksand", ui-rounded, system-ui, -apple-system, sans-serif;       /* body */
    --ff-display: "National Park", "Quicksand", ui-rounded, system-ui, sans-serif;  /* headers */

    /* Motion primitives */
    --dur-fast: 150ms; --dur-base: 220ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    /* Elevation */
    --shadow-2: 0 8px 30px rgba(43, 58, 74, 0.18);
  }
}

/* ---- TIER 2 — SEMANTICS  +  TIER 3 — SECTION THEMES --------------------- */
@layer themes {
  /* DEFAULT (light). The bare :root keeps these active when no data-theme is
     set; html[data-theme="light"] lets you opt in explicitly. To theme the app,
     remap these aliases — never the primitives, and never the components. */
  :root,
  html[data-theme="light"] {
    /* Brand. The product's interactive identity is ocean blue. EVERY control
       accent — primary buttons, focus rings, checked states, selected states,
       links, the loader — uses these three. Section themes never bleed into
       app chrome. */
    --color-primary: var(--c-ocean-500);
    --color-primary-strong: var(--c-ocean-700);  /* pressed shadow, accent text on light */
    --color-primary-soft: var(--c-ocean-200);    /* pale tint fills */

    /* Neutrals + status */
    --color-surface: var(--c-white);
    --color-text: var(--c-ink);
    --color-text-soft: var(--c-ink-soft);
    --color-border: var(--c-line);
    --color-canvas: var(--c-canvas);
    --color-danger: var(--c-danger);
    --color-danger-strong: color-mix(in oklab, var(--c-danger) 70%, black);
    --color-scrim: var(--c-scrim);

    /* Text/icons sitting on a saturated fill (primary button, section header bar). */
    --color-on-emphasis: var(--c-white-pure);
    /* True paper white for the printable sheet (not the tinted app surface). */
    --color-paper: var(--c-white-pure);

    /* Focus ring — one color everywhere so keyboard users learn it once. */
    --color-focus: var(--color-primary);

    /* Borders: every control draws the same 2px line. */
    --border-width: 2px;

    /* Shape. Cards nest: the inner radius is the design value; the outer adds
       the border width so curves stay concentric. */
    --radius-control: var(--r-md);
    --radius-card: var(--r-lg);
    --radius-card-outer: calc(var(--radius-card) + var(--border-width));
    --radius-surface: var(--r-xl);               /* panels, modals */

    /* Layout rhythm */
    --space-section-gap: var(--s-6);                   /* between section cards (Figma 1:275) */
    --space-card-gap: var(--s-4);                      /* card <-> its add-task buttons */

    /* Type roles */
    --font-family: var(--ff-base);
    --font-family-display: var(--ff-display);
    --font-size-body: var(--fs-md);
    --font-size-title: var(--fs-xl);

    /* Elevation roles */
    --panel-shadow: var(--shadow-2);

    /* Motion roles */
    --motion-fast: var(--dur-fast);
    --motion-base: var(--dur-base);
    --motion-ease: var(--ease-out);

    /* Layering — keep ALL z-indexes on this scale. */
    --z-sticky: 10;    /* sticky mobile toolbar */
    --z-overlay: 20;   /* panel + modal backdrops */
    --z-preview: 30;   /* print preview above other overlays */
    --z-loader: 100;   /* boot loader above everything */

    /* Section themes (TIER 3). A theme is ONE token: its tint and accent are
       DERIVED in app.css (--sec-tint / --sec-accent via color-mix), exactly as
       they are for custom picker colors. To add a section color: add one line
       here, map it in app.css [data-theme], list it in editor.js THEME_NAMES. */
    --theme-sunshine-bg: var(--c-sun-500);
    --theme-ocean-bg: var(--c-ocean-500);
    --theme-lavender-bg: var(--c-lav-500);
  }
}