/* ============================================================================
   tokens.css — Watermelon Todo design system, ported from WMDesignSystem.swift
   The single source of truth for color, type, spacing, radius and motion.
   Light is default; dark overrides under [data-theme="dark"] and the OS media
   query. Every value below has a 1:1 origin in the app's Swift tokens.
   ========================================================================== */

:root {
  /* ---- Color: neutrals (light) ---------------------------------------- */
  --paper:   #FAFAF7;   /* background canvas */
  --pulp:    #F5F3EE;   /* nested inset surface */
  --mist:    #F2F1EE;   /* elevated surface (cards, sheets) */
  --whisper: #E8E6E1;   /* hairlines, dividers */
  --ink:     #1A1A1F;   /* primary text */
  --pith:    #9B968E;   /* secondary / muted text */

  /* ---- Color: watermelon accents (light) ------------------------------ */
  --flesh:    #E84B5C;  /* watermelon red */
  --rind:     #5BB85A;  /* refined green */
  --amber:    #C79A2B;  /* muted amber (blocked) */
  --rind-cool:#4FAE8D;  /* Apple Intelligence */
  --rind-warm:#9DBE4B;  /* on-device transcription */
  --gold:     #D4A24A;  /* premium / DeepSeek */
  --byok:     #6C7BD6;  /* cool indigo — bring-your-own-key (Pro) */

  /* derived tints (used for soft fills, halos) */
  --flesh-08: rgba(232, 75, 92, 0.08);
  --flesh-15: rgba(232, 75, 92, 0.15);
  --flesh-35: rgba(232, 75, 92, 0.35);
  --rind-15:  rgba(91, 184, 90, 0.15);
  --gold-30:  rgba(212, 162, 74, 0.30);

  /* ---- Shadows -------------------------------------------------------- */
  --shadow:        rgba(0, 0, 0, 0.08);
  --shadow-lifted: rgba(0, 0, 0, 0.18);
  --elev-rest:     0 1px 2px rgba(0, 0, 0, 0.04);
  --elev-card:     0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --elev-lifted:   0 28px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ---- Typography ----------------------------------------------------- */
  /* Display + headings: New York (Apple editorial serif). Body: SF Pro.
     Numerals: monospaced digits, mirroring WMFont. */
  --font-display: "New York", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Code", monospace;

  /* fluid type scale (min .. max via clamp) */
  --t-hero:    clamp(2.75rem, 1.6rem + 5.2vw, 5rem);
  --t-display: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --t-title:   clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  --t-section: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  --t-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-small:   0.9375rem;
  --t-label:   0.6875rem;  /* 11pt mono uppercase */

  /* ---- Spacing (WMSpacing) ------------------------------------------- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-xxl: 40px;
  --sp-section: clamp(4.5rem, 3rem + 7vw, 9rem); /* vertical rhythm between sections */
  --screen-h: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --maxw: 1140px;

  /* ---- Radius (WMRadius) --------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Motion (WMSpring approximations) ------------------------------ */
  /* Springs become cubic-beziers: standard/whimsical keep a touch of
     overshoot; snap is tight. Durations track the Swift responses. */
  --ease-standard: cubic-bezier(0.33, 1.0, 0.36, 1);   /* response .42 d .78 */
  --ease-spring:   cubic-bezier(0.34, 1.32, 0.5, 1);   /* whimsical, overshoot */
  --ease-snap:     cubic-bezier(0.3, 0.0, 0.18, 1);    /* tight + fast */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-snap: 0.28s;
  --dur-standard: 0.42s;
  --dur-whimsical: 0.5s;

  color-scheme: light;
}

/* ---- Dark mode: explicit toggle wins; else follow OS ------------------ */
[data-theme="dark"] {
  --paper:   #0F0F12;
  --pulp:    #15151A;
  --mist:    #1A1A1E;
  --whisper: #26252A;
  --ink:     #F4F1EA;
  --pith:    #7A7670;

  --flesh:    #D64255;
  --rind:     #4FA34F;
  --amber:    #D9B14A;
  --rind-cool:#3F8F75;
  --rind-warm:#82A23E;
  --gold:     #C18F3D;

  --flesh-08: rgba(214, 66, 85, 0.10);
  --flesh-15: rgba(214, 66, 85, 0.18);
  --flesh-35: rgba(214, 66, 85, 0.38);
  --rind-15:  rgba(79, 163, 79, 0.18);
  --gold-30:  rgba(193, 143, 61, 0.32);

  --shadow:        rgba(0, 0, 0, 0.40);
  --shadow-lifted: rgba(0, 0, 0, 0.55);
  --elev-rest:     0 1px 2px rgba(0, 0, 0, 0.30);
  --elev-card:     0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --elev-lifted:   0 28px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0F0F12;
    --pulp:    #15151A;
    --mist:    #1A1A1E;
    --whisper: #26252A;
    --ink:     #F4F1EA;
    --pith:    #7A7670;

    --flesh:    #D64255;
    --rind:     #4FA34F;
    --amber:    #D9B14A;
    --rind-cool:#3F8F75;
    --rind-warm:#82A23E;
    --gold:     #C18F3D;

    --flesh-08: rgba(214, 66, 85, 0.10);
    --flesh-15: rgba(214, 66, 85, 0.18);
    --flesh-35: rgba(214, 66, 85, 0.38);
    --rind-15:  rgba(79, 163, 79, 0.18);
    --gold-30:  rgba(193, 143, 61, 0.32);

    --shadow:        rgba(0, 0, 0, 0.40);
    --shadow-lifted: rgba(0, 0, 0, 0.55);
    --elev-rest:     0 1px 2px rgba(0, 0, 0, 0.30);
    --elev-card:     0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --elev-lifted:   0 28px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);

    color-scheme: dark;
  }
}