/* ============================================================
   tokens.css — Liza portfolio design tokens (CSS variables)
   Mirrors liza-tokens.json (the source of truth).
   Names map 1:1 to the Figma collection "Liza / Tokens" (slash -> dash).
   Inline flag legend:
     extrapolated = not directly sampled
     proposed     = recurring / inferred
     off-palette  = foreign to warm palette, kept + flagged
   ============================================================ */

:root {
  /* ---- font families ---- */
  --font-display: "Sora", sans-serif;          /* Figma font/family/display */
  --font-sans:    "Outfit", sans-serif;        /* Figma font/family/sans    */
  --font-serif:   "Playfair Display", Georgia, serif;  /* v2 hero headline (Figma 4536:15) */

  /* ---- colour · brand ---- */
  --brand-pomegranate:    #E23912;             /* brand/pomegranate */
  --brand-pomegranate-10: rgba(226,57,18,0.10);/* brand/pomegranate-10 — eyebrow pill bg */
  --brand-pomegranate-20: rgba(226,57,18,0.20);/* brand/pomegranate-20 */
  --brand-cabaret:        #D45469;             /* brand/cabaret */
  --brand-cabaret-10:     rgba(212,84,105,0.10);/* brand/cabaret-10 */

  /* ---- colour · text ---- */
  --text-oil:       #201713;                   /* text/oil — primary text/headings */
  --text-sand-dune: #7E6F67;                   /* text/sand-dune — body/muted */
  --text-soft:      rgba(45,45,45,0.80);       /* text/soft — near-dup of oil, kept (16 nodes) */

  /* ---- colour · surface ---- */
  --surface-spring-wood: #F8F6F2;              /* surface/spring-wood — page bg / cards */
  --surface-pampas:      #EBE8E0;              /* surface/pampas — alt surface */
  --surface-cotton:      #F4F1EC;              /* surface/cotton */
  --surface-off-white:   #FCFBF8;              /* surface/off-white — near-dup of spring-wood */
  --surface-peach:       #F9E9E2;              /* proposed: was undeclared, observed 3x */
  --surface-white:       #FFFFFF;              /* surface/white */
  --surface-white-40:    rgba(255,255,255,0.40);/* surface/white-40 */
  --surface-cararra-50:  rgba(238,236,231,0.50);/* surface/cararra-50 — icon-btn fill */

  /* ---- colour · border ---- */
  --border-moon-mist:    #DAD5C8;              /* border/moon-mist — primary border */
  --border-moon-mist-50: rgba(218,213,200,0.50);/* border/moon-mist-50 */

  /* ---- colour · accent (off-palette, kept + flagged) ---- */
  --accent-green-haze:   #059669;              /* off-palette: home stat chips */
  --accent-magic-mint-50: rgba(167,243,208,0.50);/* off-palette */

  /* ---- semantic aliases (use these in components) ---- */
  --canvas:         #FBF7F4;                   /* page background (body + hero) — user-specified */
  --surface-card:   var(--surface-off-white);
  --surface-alt:    var(--surface-pampas);
  --text-primary:   var(--text-oil);
  --text-secondary: var(--text-sand-dune);
  --accent:         var(--brand-pomegranate);
  --accent-soft:    var(--brand-pomegranate-10);
  --cta-bg:         var(--brand-pomegranate);
  --cta-text:       var(--surface-white);
  --border:         var(--border-moon-mist);

  /* ---- radius ---- */
  --radius-sm:   0.375rem;                           /* radius/6 */
  --radius-card: 1.25rem;                          /* confirmed from design (case/focus cards) */
  --radius-pill: 9999px;                        /* pill (buttons, eyebrow) */

  /* ---- spacing (Figma space/*) ---- */
  --space-4: 0.25rem;  --space-6: 0.375rem;  --space-8: 0.5rem;  --space-12: 0.75rem;
  --space-16: 1rem; --space-24: 1.5rem; --space-32: 2rem; --space-48: 3rem;
  --space-64: 4rem; --space-80: 5rem;

  /* ---- border width (Figma border/width/*) ---- */
  --bw-1: 0.0625rem; --bw-1-5: 0.09375rem; --bw-2: 0.125rem;

  /* ---- button + motion ---- */
  --btn-gap: var(--space-8);
  --btn-pad-y: var(--space-12);     --btn-pad-x: var(--space-24);
  --btn-pad-y-lg: 1.125rem;             --btn-pad-x-lg: var(--space-32);
  --btn-pad-y-mob: 0.6875rem;            --btn-pad-x-mob: var(--space-16);
  --btn-icon-size: 1rem;
  --link-dot-size: 0.28125rem;
  --ease-circle: cubic-bezier(0.625, 0.05, 0, 1);  /* HD directional-fill easing */

  /* ---- layout ---- */
  --container-max:    72rem;                   /* size/width/1152 */
  --container-gutter: 1.5rem;                     /* extrapolated */
  --page-margin:      9rem;                    /* observed on 1440 frame */

  /* ---- type ramp · desktop (font/size·line-height·tracking) ---- */
  --t-h1-size: 4.5rem;  --t-h1-lh: 4.5rem;  --t-h1-ls: -0.1125rem; --t-h1-weight: 700;
  --t-h2-size: 3rem;  --t-h2-lh: 3rem;  --t-h2-ls: -0.075rem; --t-h2-weight: 700;
  --t-h3-size: 1.875rem;  --t-h3-lh: 2.25rem;  --t-h3-ls: -0.05625rem; --t-h3-weight: 700;
  --t-h4-size: 1.25rem;  --t-h4-lh: 1.5rem;  --t-h4-ls: -0.03125rem; --t-h4-weight: 600;
  --t-h5-size: 1rem;  --t-h5-lh: 1.5rem;  --t-h5-ls: -0.025rem; --t-h5-weight: 600;
  --t-stat-size: 2.5rem; --t-stat-lh: 2.75rem; --t-stat-ls: -0.05625rem; --t-stat-weight: 600; /* proposed lh */
  --t-nav-size: 0.875rem; --t-nav-lh: 1.25rem; --t-nav-ls: 0; --t-nav-weight: 400;
  --t-bodylg-size: 1.125rem; --t-bodylg-lh: 1.75rem; --t-bodylg-ls: 0; --t-bodylg-weight: 400;
  --t-body-size: 1rem; --t-body-lh: 1.5rem; --t-body-ls: 0; --t-body-weight: 400;
  --t-bodys-size: 0.9375rem; --t-bodys-lh: 1.25rem; --t-bodys-ls: 0; --t-bodys-weight: 400;
  --t-bold-size: 1rem; --t-bold-lh: 1.5rem; --t-bold-ls: 0; --t-bold-weight: 700;
  --t-eyebrow-size: 0.875rem; --t-eyebrow-lh: 1.25rem; --t-eyebrow-ls: 0.04375rem; --t-eyebrow-weight: 100;
  --t-caption-size: 0.75rem; --t-caption-lh: 1rem; --t-caption-ls: 0; --t-caption-weight: 400;
}

/* ---- type ramp · tablet (<=768) — extrapolated ---- */
@media (max-width: 991px) {
  :root {
    --t-h1-size: 3.5rem; --t-h1-lh: 3.625rem; --t-h1-ls: -0.0875rem;
    --t-h2-size: 2.5rem; --t-h2-lh: 2.75rem; --t-h2-ls: -0.0625rem;
    --page-margin: 3rem;
  }
}

/* ---- type ramp · mobile (<=480) — calibrated from polished frame 4447:205 ---- */
@media (max-width: 479px) {
  :root {
    --t-h1-size: 2.5rem; --t-h1-lh: 2.5rem; --t-h1-ls: -0.0625rem;
    --t-h2-size: 1.75rem; --t-h2-lh: 2rem; --t-h2-ls: -0.04375rem;
    --t-h3-size: 1.25rem; --t-h3-lh: 1.625rem; --t-h3-ls: -0.03125rem;
    --t-h4-size: 1.125rem; --t-h4-lh: 1.375rem;
    --t-stat-size: 1.125rem; --t-stat-lh: 1.5rem;
    --t-bodylg-size: 1rem; --t-bodylg-lh: 1.625rem;
    --t-bodys-size: 0.875rem; --t-bodys-lh: 1.25rem;
    --t-eyebrow-size: 0.75rem; --t-eyebrow-lh: 1.25rem;
    --page-margin: 1.25rem;
  }
}