/* ============================================================
   Delusion Index — Design Tokens
   ------------------------------------------------------------
   Single source of truth for color, type, spacing, radius,
   shadow. Edit values here; do NOT scatter ad-hoc colors or
   font-stacks elsewhere in the codebase.

   Aesthetic direction: "High-Gloss Tabloid Oracle"
   Dominant pink + cream, hot accent, gold glow.
   ============================================================ */

/* --- Local display font (header wordmark) --- */
@font-face {
  font-family: "Androgy Demo";
  src: url("../assets/fonts/Androgy_Demo.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color ---------- */
  --bg:        #FFF4EC;  /* warm peach cream — page background */
  --surface:   #FFFFFF;  /* card / modal surface */
  --ink:       #2B1733;  /* deep plum — primary text */
  --ink-soft:  #6E5566;  /* muted plum — secondary text */

  --pink:      #FF4FA3;  /* hot bubblegum — primary brand */
  --pink-deep: #D4267E;  /* pressed / active pink */
  --coral:     #FF8A5B;  /* delulu warmth */
  --gold:      #FFC93C;  /* meter glow / sparkle accent (use sparingly) */
  --slate:     #8A9BB0;  /* "not delulu" cool tone */

  /* Signature gradients */
  --grad-delulu: linear-gradient(135deg, #FF4FA3 0%, #FF8A5B 55%, #FFC93C 100%);
  --grad-aura:   radial-gradient(circle, rgba(255, 201, 60, .55), transparent 70%);

  /* ---------- Typography ---------- */
  --font-header:  "Androgy Demo", "Gloock", Georgia, serif;     /* logo / wordmark */
  --font-display: "Gloock", Georgia, serif;                     /* delusion titles, headlines */
  --font-body:    "Satoshi", "Segoe UI", system-ui, sans-serif; /* body, UI text */
  --font-accent:  "Caveat", cursive;                            /* meter captions, stamps, asides */

  /* Type scale: 13 / 15 / 18 / 24 / 34 / 52 */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 18px;
  --t-lg: 24px;
  --t-xl: 34px;
  --t-xxl: 52px;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-20: 80px;

  /* ---------- Radius ---------- */
  --r-input:  14px;
  --r-card:   20px;
  --r-modal:  24px;
  --r-pill:   999px;

  /* ---------- Shadow (soft, colored — NEVER flat gray) ---------- */
  --shadow-card: 0 12px 32px rgba(255, 79, 163, .18);
  --shadow-pop:  0 18px 50px rgba(212, 38, 126, .28);

  /* ---------- Layout ---------- */
  --maxw: 720px;        /* feed-first, mobile-first */
  --z-header: 40;
  --z-panel:  55;
  --z-modal:  60;
  --z-toast:  80;
}