/* =================================================================
   Pickleheart — Design Tokens
   -----------------------------------------------------------------
   Token ARCHITECTURE adopted from Practical UI; every VALUE is
   Pickleheart's own (unchanged). Two tiers:

     1. PRIMITIVES   raw, descriptive values  (--pkl-pink-200)
     2. SEMANTIC     role-based aliases named:

            --{element}-{tone}-{emphasis}-{state}

        element  : text | background | foreground | border | icon
        tone     : neutral | brand | highlight | positive | inverse
        emphasis : strong | weak | weaker        (default = no suffix)
        state    : hover | press | focus | disabled | selected

   Components must consume SEMANTIC tokens only — never primitives.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: 'Winter Draw';
  src: url('./fonts/Winter_Draw.otf') format('opentype'),
       url('./fonts/Winter_Draw.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =============================================================
     TIER 1 — PRIMITIVES  (Pickleheart raw palette, unchanged)
     ============================================================= */

  /* Pink / coral — the brand identity hue */
  --pkl-pink-100: rgb(251, 220, 223);
  --pkl-pink-200: rgb(240, 198, 202);
  --pkl-coral-300: rgb(235, 141, 138);

  /* Yellow / cream — warmth + the primary-action hue */
  --pkl-cream:     rgb(249, 243, 236);
  --pkl-yellow-100: rgba(253, 242, 181, 0.5);
  --pkl-yellow-200: rgb(241, 229, 197);

  /* Sage — positive / "match" accent */
  --pkl-sage: rgb(164, 183, 145);

  /* Neutrals */
  --pkl-black:    rgb(0, 0, 0);
  --pkl-white:    rgb(255, 255, 255);
  --pkl-grey-100: rgb(217, 217, 217);
  --pkl-grey-200: rgb(153, 161, 170);
  --pkl-grey-300: rgb(153, 153, 153);

  /* Navy — the primary-action colour (high-contrast CTA) */
  --pkl-navy-500: rgb(31, 73, 125);   /* #1F497D — primary button */
  --pkl-navy-600: rgb(26, 62, 107);   /* hover  */
  --pkl-navy-700: rgb(21, 51, 88);    /* press  */

  /* Black alphas (for text emphasis + borders) */
  --pkl-black-90: rgba(0, 0, 0, 0.90);
  --pkl-black-70: rgba(0, 0, 0, 0.70);
  --pkl-black-50: rgba(0, 0, 0, 0.50);
  --pkl-black-12: rgba(0, 0, 0, 0.12);
  --pkl-black-06: rgba(0, 0, 0, 0.06);

  /* =============================================================
     TIER 2 — SEMANTIC TOKENS
     ============================================================= */

  /* ---------- TEXT ---------- (text & icons that sit on surfaces) */
  --text-neutral-strong:   var(--pkl-black);        /* headings, body  */
  --text-neutral-weak:     var(--pkl-black-70);     /* secondary copy  */
  --text-neutral-weaker:   var(--pkl-grey-300);     /* placeholder     */
  --text-brand-strong:     var(--pkl-coral-300);    /* brand accent text */
  --text-positive-strong:  var(--pkl-sage);         /* "95% match"     */
  --text-inverse-strong:   var(--pkl-white);        /* text on dark    */
  --text-on-primary:       var(--pkl-white);        /* text on navy primary */
  --text-on-highlight:     var(--pkl-black);        /* text on yellow CTA */

  /* ---------- BACKGROUND ---------- (solid page / panel surfaces) */
  --background-neutral:        var(--pkl-white);     /* page            */
  --background-neutral-weak:   var(--pkl-cream);     /* panels / strips */
  --background-brand-weak:     var(--pkl-pink-100);  /* soft pink wash  */
  --background-highlight:      var(--pkl-yellow-200);/* footer block    */
  --background-inverse:        var(--pkl-black);     /* dark surfaces   */

  /* ---------- FOREGROUND ---------- (components placed on backgrounds) */
  --foreground-primary:        var(--pkl-navy-500);      /* PRIMARY button (navy) */
  --foreground-primary-hover:  var(--pkl-navy-600);
  --foreground-primary-press:  var(--pkl-navy-700);
  --foreground-highlight:        var(--pkl-yellow-200);  /* highlight / CTA bands */
  --foreground-highlight-hover:  rgb(236, 222, 183);     /* −4% lightness  */
  --foreground-highlight-press:  rgb(230, 214, 168);     /* −8% lightness  */
  --foreground-brand:            var(--pkl-pink-200);    /* secondary fill */
  --foreground-brand-strong:     var(--pkl-coral-300);
  --foreground-neutral-weak:     rgba(217, 217, 217, 0.6);/* tags / chips  */
  --foreground-positive:         var(--pkl-sage);
  --foreground-disabled:         rgba(0, 0, 0, 0.12);

  /* ---------- BORDER ---------- */
  --border-neutral-weak:   var(--pkl-black-06);     /* hairline dividers */
  --border-neutral:        var(--pkl-grey-100);     /* default control   */
  --border-brand:          var(--pkl-coral-300);
  --border-focus:          var(--pkl-coral-300);    /* focus ring color  */
  --border-inverse:        var(--pkl-white);

  /* =============================================================
     SPACING — 4px base scale  (Practical UI logic, PH rhythm)
     ============================================================= */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* =============================================================
     RADII  (Pickleheart's existing radius set)
     ============================================================= */
  --radius-tag:    8px;
  --radius-button: 10px;
  --radius-input:  16px;
  --radius-pill:   20px;
  --radius-card:   30px;
  --radius-full:   9999px;

  /* =============================================================
     ELEVATION — levels (shadow-based, Practical UI logic)
     Pickleheart's signature is the hard 4px card shadow; lower &
     higher levels are derived around it.
     ============================================================= */
  --elevation-0: none;
  --elevation-1: 0px 2px 4px -2px rgba(0,0,0,0.08), 0px 1px 2px -1px rgba(0,0,0,0.08);
  --elevation-2: 0px 4px 4px 0px rgba(0,0,0,0.25);          /* THE PH card/button shadow */
  --elevation-2-soft: 0px 4px 4px 0px rgba(0,0,0,0.18);     /* same drop, lighter — pill buttons */
  --elevation-3: 0px 8px 16px -4px rgba(0,0,0,0.12), 0px 4px 6px -2px rgba(0,0,0,0.08);
  --elevation-4: 0px 20px 32px -8px rgba(0,0,0,0.16), 0px 8px 12px -4px rgba(0,0,0,0.08);
  /* The "lifted input" split-shadow trick is a component recipe, not a level. */
  --elevation-input-cast: rgb(153, 161, 170); /* drawn as an offset rect @ 0.25 */

  /* =============================================================
     TYPOGRAPHY
     Families fixed; size scale = 1.200 (minor third), two modes.
     ============================================================= */
  --font-display: 'Winter Draw', 'Comfortaa', system-ui, sans-serif; /* hand-drawn brand display */
  --font-heading: 'Comfortaa', system-ui, sans-serif;                /* rounded geometric headings */
  --font-body:    'Nunito', system-ui, sans-serif;                   /* body / UI */

  --tracking-body:   0.025em;
  --tracking-button: -0.025em;

  /* --- Desktop mode (default) --- */
  --type-display-size: 56px;  --type-display-line: 64px;
  --type-h1-size:      40px;  --type-h1-line:      48px;
  --type-h2-size:      32px;  --type-h2-line:      40px;
  --type-h3-size:      24px;  --type-h3-line:      32px;
  --type-h4-size:      20px;  --type-h4-line:      28px;
  --type-body-size:    16px;  --type-body-line:    24px;
  --type-small-size:   14px;  --type-small-line:   20px;
  --type-caption-size: 12px;  --type-caption-line: 18px;
}

/* --- Mobile mode --- larger sizes reduced for small screens --- */
@media (max-width: 640px) {
  :root {
    --type-display-size: 40px;  --type-display-line: 48px;
    --type-h1-size:      32px;  --type-h1-line:      40px;
    --type-h2-size:      28px;  --type-h2-line:      36px;
    --type-h3-size:      22px;  --type-h3-line:      30px;
    --type-h4-size:      18px;  --type-h4-line:      26px;
  }
}

/* You can also force a mode with [data-type-mode="mobile"] on an ancestor. */
[data-type-mode="mobile"] {
  --type-display-size: 40px;  --type-display-line: 48px;
  --type-h1-size:      32px;  --type-h1-line:      40px;
  --type-h2-size:      28px;  --type-h2-line:      36px;
  --type-h3-size:      22px;  --type-h3-line:      30px;
  --type-h4-size:      18px;  --type-h4-line:      26px;
}

/* =================================================================
   TYPE STYLES  (named, reusable — apply the class)
   ================================================================= */
.type-display { font-family: var(--font-display); font-weight: 700; font-size: var(--type-display-size); line-height: var(--type-display-line); color: var(--text-neutral-strong); }
.type-h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--type-h1-size); line-height: var(--type-h1-line); color: var(--text-neutral-strong); }
.type-h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--type-h2-size); line-height: var(--type-h2-line); color: var(--text-neutral-strong); }
.type-h3 { font-family: var(--font-heading); font-weight: 700; font-size: var(--type-h3-size); line-height: var(--type-h3-line); color: var(--text-neutral-strong); }
.type-h4 { font-family: var(--font-heading); font-weight: 700; font-size: var(--type-h4-size); line-height: var(--type-h4-line); color: var(--text-neutral-strong); }
.type-body { font-family: var(--font-body); font-weight: 400; font-size: var(--type-body-size); line-height: var(--type-body-line); letter-spacing: var(--tracking-body); color: var(--text-neutral-strong); }
.type-small { font-family: var(--font-body); font-weight: 400; font-size: var(--type-small-size); line-height: var(--type-small-line); letter-spacing: var(--tracking-body); color: var(--text-neutral-strong); }
.type-caption { font-family: var(--font-body); font-weight: 400; font-size: var(--type-caption-size); line-height: var(--type-caption-line); letter-spacing: var(--tracking-body); color: var(--text-neutral-weak); }