/* ============================================================
   Sally Squad — Design Tokens · SINGLE SOURCE OF TRUTH
   "Your Daily Dose of Glow" — wellness + joyful indulgence

   STATUS: 🔒 LOCKED — v1.0.0 (2026-07-15)
   These values are canonical and frozen. Do NOT edit hex, scale,
   or names without explicit sign-off (bump the version when you do).
   Consume these variables everywhere; never hardcode a hex in the app.
   Referenced by /CLAUDE.md as the design SSOT.
   ============================================================ */

/* App fonts (loaded when hosted; artifact showcase falls back to the stack). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand core (the 5 that carry the identity) ---- */
  --froyo:        #0E5A40;   /* deep froyo green — dominant / primary */
  --coral:        #F15B4C;   /* joyful indulgence accent */
  --glow-from:    #E12C8B;   /* signature gradient start (magenta) */
  --glow-mid:     #C24F9C;   /* signature gradient mid (orchid) */
  --glow-to:      #8FCB5C;   /* signature gradient end (lime) */
  --ink:          #191B14;   /* warm green-black text */

  /* ---- Green scale (primary family) ---- */
  --green-900: #0A3527;
  --green-800: #0B4531;
  --green-700: #0E5A40;
  --green-600: #14714F;
  --green-500: #1C8A61;
  --green-400: #3DA97E;
  --green-300: #7FC9A6;
  --green-200: #B6E1CD;
  --green-100: #DCEFE3;
  --green-050: #EDF7F1;

  /* ---- Coral scale (indulgence) ---- */
  --coral-700: #B83A2F;
  --coral-600: #D64536;
  --coral-500: #F15B4C;
  --coral-400: #FF7A6B;
  --coral-200: #FFC3BB;
  --coral-100: #FFE0DB;

  /* ---- Signature Glow gradient ---- */
  --glow-gradient: linear-gradient(115deg, var(--glow-from) 0%, var(--glow-mid) 48%, var(--glow-to) 100%);
  --glow-gradient-soft: linear-gradient(115deg, #F6D3E7 0%, #EAD7EE 50%, #DCEFC8 100%);

  /* ---- Neutrals (green-biased, chosen not defaulted) ---- */
  --paper:     #EFEBDE;  /* oat canvas */
  --surface:   #F7F4EC;  /* raised card */
  --surface-2: #FBF9F3;  /* highest */
  --line:      #E0DACA;  /* hairline border */
  --muted:     #6C7266;  /* secondary text */
  --faint:     #9AA093;  /* tertiary text / placeholder */

  /* ---- Semantic (distinct from accent hue) ---- */
  --success: #2E9E6B;
  --warning: #E39A2E;
  --danger:  #D6362F;
  --info:    #2E7DB0;

  /* ---- Tier identities ---- */
  --tier-silver-a: #D8DCE0; --tier-silver-b: #A9AFB6;
  --tier-gold-a:   #F0CD6E; --tier-gold-b:   #B8862F;
  --tier-plat-a:   #3A3C38; --tier-plat-b:   #121309;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Palatino", Georgia, serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --text-xs:   0.6875rem; /* 11 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.375rem;  /* 38 */
  --text-3xl:  3.25rem;   /* 52 */

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.55;
  --tracking-label: 0.09em;

  /* ---- Spacing (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;

  /* ---- Radius (iOS-tactile) ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* ---- Elevation (soft, green-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(10,53,39,.06), 0 1px 3px rgba(10,53,39,.05);
  --shadow-md: 0 4px 12px rgba(10,53,39,.08), 0 2px 4px rgba(10,53,39,.05);
  --shadow-lg: 0 16px 40px rgba(10,53,39,.12), 0 6px 12px rgba(10,53,39,.06);
  --glow-coral:   0 8px 28px rgba(241,91,76,.34);
  --glow-magenta: 0 8px 30px rgba(225,44,139,.32);
  --glow-green:   0 8px 26px rgba(14,90,64,.28);

  /* ---- Motion ---- */
  --dur-fast: 150ms; --dur: 250ms; --dur-slow: 420ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- Dark theme (OS preference) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #13150F;
    --surface:   #1B1E15;
    --surface-2: #23271B;
    --line:      #333828;
    --ink:       #ECE9DA;
    --muted:     #A0A594;
    --faint:     #6E7563;
    --froyo:     #3DA97E;
    --green-100: #17301F;
    --green-050: #142619;
    --coral-100: #3A1712;
    --glow-gradient-soft: linear-gradient(115deg, #3A1526 0%, #2C1930 50%, #22301A 100%);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  }
}

/* ---- Explicit theme override (toggle wins over media, both directions) ---- */
:root[data-theme="dark"] {
  --paper: #13150F; --surface: #1B1E15; --surface-2: #23271B; --line: #333828;
  --ink: #ECE9DA; --muted: #A0A594; --faint: #6E7563; --froyo: #3DA97E;
  --green-100: #17301F; --green-050: #142619; --coral-100: #3A1712;
  --glow-gradient-soft: linear-gradient(115deg,#3A1526 0%,#2C1930 50%,#22301A 100%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
}
:root[data-theme="light"] {
  --paper: #EFEBDE; --surface: #F7F4EC; --surface-2: #FBF9F3; --line: #E0DACA;
  --ink: #191B14; --muted: #6C7266; --faint: #9AA093; --froyo: #0E5A40;
  --green-100: #DCEFE3; --green-050: #EDF7F1; --coral-100: #FFE0DB;
  --glow-gradient-soft: linear-gradient(115deg,#F6D3E7 0%,#EAD7EE 50%,#DCEFC8 100%);
}