/* ─────────────────────────────────────────────────────────────────────────────
   Taallamy — design tokens
   Every colour, size, radius, shadow and motion value lives here; components
   and sections read these variables and never hard-code their own.

   Colour — the platform's brand pink (#F43F75, from the current platform's
   tokens) and one pink-tinted neutral family. Contrast (WCAG 2.2), computed:
     ink / bg 15.21 · ink-2 / bg-deep 5.66
     pink-strong text / bg 4.98 · on bg-deep 4.62 · on pink-soft 4.76
     white text / pink-strong 5.25 · white / pink-deeper 5.95
     pink / bg 3.43 → brand pink carries large display text (≥ 24px),
     icons, fills and focus rings only; small text uses pink-strong.
   ───────────────────────────────────────────────────────────────────────────── */

/* Cascade order for every stylesheet of the site. Later layers win. */
@layer tokens, base, components, layout, blocks, page;

@layer tokens {
  :root {
    color-scheme: light;

    /* Colour */
    --bg:          #FCF8F9;
    --bg-deep:     #F8EEF2;
    --ink:         #2A1E25;
    --ink-2:       #6B5A63;
    --white:       #FFFFFF;

    --pink:        #F43F75;  /* brand */
    --pink-strong: #CC2759;  /* small pink text, filled buttons */
    --pink-deeper: #BE2152;  /* pressed / hover on filled buttons */
    --pink-soft:   #FFF0F5;  /* platform soft background */
    --pink-border: #FFC4D3;  /* platform soft border */
    --pink-mist:   #FFF7FA;

    /* State colours — for status only, never decoration. Ink on soft ≥ 4.5. */
    --ok:            #15803D;
    --ok-ink:        #14532D;
    --ok-soft:       #F0FAF3;
    --ok-border:     #BFE5CB;
    --warn:          #B45309;
    --warn-ink:      #78350F;
    --warn-soft:     #FFF8EB;
    --warn-border:   #F7D9A6;
    --danger:        #D92D20;
    --danger-ink:    #912018;
    --danger-soft:   #FEF3F2;
    --danger-border: #FBCBC6;
    --info:          #2563EB;
    --info-ink:      #1E3A8A;
    --info-soft:     #EFF5FF;
    --info-border:   #C7D9FB;

    --line:        rgb(42 30 37 / 0.08);
    --line-strong: rgb(42 30 37 / 0.14);

    /* Glass — used only where there is something behind it to refract. */
    --glass:        linear-gradient(140deg, rgb(255 255 255 / 0.74), rgb(255 255 255 / 0.46));
    --glass-solid:  rgb(255 255 255 / 0.72);
    --glass-border: rgb(255 255 255 / 0.72);
    --glass-blur:   saturate(150%) blur(18px);

    /* The floating glass bar every interface wears at its top — the site's
       header, the admin's and the portals' bars — and its current place. */
    --bar-surface:        rgb(255 255 255 / 0.46);
    --bar-surface-raised: rgb(255 255 255 / 0.72);  /* once the page has moved */
    --bar-edge:           rgb(255 255 255 / 0.75);
    --bar-shadow:         var(--shadow-inset), 0 12px 30px -20px rgb(120 36 70 / 0.3);
    --bar-shadow-raised:  var(--shadow-inset), var(--shadow-md);
    --bar-current:        var(--pink-soft);
    --bar-current-ring:   inset 0 0 0 1px rgb(255 196 211 / 0.7);

    /* Ambient light behind glass — the brand pink, faint, and its soft tint. */
    --glow-pink:  rgb(244 63 117 / 0.13);
    --glow-blush: rgb(255 196 211 / 0.42);

    /* Type */
    --font-display: "El Messiri", "El Messiri Fallback Win", "El Messiri Fallback Android", serif;
    --font-body:    "Readex Pro", "Readex Pro Fallback Win", "Readex Pro Fallback Android", system-ui, sans-serif;

    --fs-display: clamp(2.55rem, 1.45rem + 4.4vw, 5.1rem);
    --fs-h2:      clamp(1.95rem, 1.4rem + 2.1vw, 3.15rem);
    --fs-h3:      clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
    --fs-lead:    clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
    --fs-body:    1.0625rem;
    --fs-small:   0.9375rem;
    --fs-caption: 0.8125rem;

    --lh-tight: 1.22;
    --lh-heading: 1.3;
    --lh-body: 1.9;

    /* Space — 4px rhythm */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
    --s-12: 3rem;    --s-16: 4rem;
    --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

    /* Layout */
    --container: 1200px;
    --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
    --header-h: 76px;
    --hero-foot: clamp(4.5rem, 3rem + 3vw, 6rem); /* hero bottom space the facts band rises into */

    /* Radius — varied on purpose, not one value everywhere */
    --r-xs: 10px;
    --r-sm: 14px;
    --r-md: 22px;
    --r-lg: 30px;
    --r-xl: 44px;
    --r-pill: 999px;

    /* Shadow — tinted toward the palette so elevation never looks grey */
    --shadow-sm: 0 1px 2px rgb(42 30 37 / 0.05), 0 4px 14px -6px rgb(120 36 70 / 0.12);
    --shadow-md: 0 2px 4px rgb(42 30 37 / 0.04), 0 18px 40px -22px rgb(120 36 70 / 0.26);
    --shadow-lg: 0 3px 8px rgb(42 30 37 / 0.05), 0 36px 80px -36px rgb(120 36 70 / 0.36);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.85);
    --shadow-pink:       0 10px 24px -12px rgb(204 39 89 / 0.55);
    --shadow-pink-hover: 0 16px 32px -14px rgb(190 33 82 / 0.6);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 180ms;
    --dur-base: 420ms;
    --dur-slow: 900ms;
  }
}