/* ============================================================
   Asma Irfan · TOKENS
   ------------------------------------------------------------
   The entire design system lives in this file. A re-skin
   (new palette, new type, new rhythm) should be an edit here
   and nowhere else.

   LAYER ORDER NOTE — `a11y` is declared FIRST on purpose.
   Per the cascade spec, `!important` declarations resolve in
   REVERSE layer order, so the *earliest* layer carries the
   *strongest* !important. The reduced-motion overrides need
   to beat everything, so they live there.
   ============================================================ */
@layer a11y, tokens, base, primitives, shell, page;

@layer tokens{
:root{

  /* ---------- palette ----------------------------------------
     Bands are semantic, not decorative:
     white = clarity/data · sand = editorial · ink = confession
     clay = the single conversion moment · cream = the ground */
  --cream:#FDF8F1;
  --white:#FFFFFF;
  --sand:#F6EEE1;
  --ink:#2E251C;
  --dim:#6F6152;            /* body copy                        */
  --muted:#9C8D7C;          /* labels, de-emphasis              */
  --clay:#B9704B;           /* the accent: italics, rules, CTAs */
  --clay-deep:#9A5732;      /* accent on light, pressed states  */
  --clay-band:#A05A33;      /* the CTA band                     */
  --clay-light:#DFA588;     /* accent on dark                   */
  --on-dark:#F6EFE4;
  --on-dark-dim:#C4B6A5;
  --on-dark-dim-2:#B7A996;
  --on-clay:#FDF3E9;
  --on-clay-dim:#EBCDB6;

  /* ---------- hairlines --------------------------------------
     Previously typed out literally 29 times.                  */
  --hairline:rgba(46,37,28,.10);         /* list rules, light   */
  --hairline-soft:rgba(46,37,28,.08);    /* panel borders       */
  --hairline-strong:rgba(46,37,28,.18);  /* chips, ghost button */
  --hairline-dark:rgba(246,239,228,.14); /* list rules on ink   */
  --rail-idle:#C4BAB0;                   /* section index at rest */

  /* ---------- typefaces --------------------------------------
     Literata SPEAKS. Manrope INFORMS. Caveat ASIDES.
     If a line is a person saying something it is serif; if it
     is the site explaining something it is sans.              */
  --serif:"Literata", Georgia, serif;
  --sans:"Manrope", "Segoe UI", sans-serif;
  --hand:"Caveat", cursive;

  /* ---------- fixed type steps (UI, labels, body) ------------ */
  --fs-3xs:9.5px;
  --fs-2xs:10.5px;
  --fs-xs:12.5px;
  --fs-s:13.5px;
  --fs-m:14.5px;
  --fs-base:15.5px;
  --fs-l:17.5px;
  --fs-xl:21px;
  --fs-2xl:24px;

  /* ---------- fluid display steps ----------------------------
     Replaces 32 one-off clamp() declarations.                 */
  --fd-lead:clamp(15px,1.25vw,17.5px);
  --fd-s:clamp(18.5px,1.6vw,23px);
  --fd-m:clamp(22px,2.3vw,32px);
  --fd-l:clamp(26px,3vw,42px);
  --fd-xl:clamp(28px,3.7vw,52px);
  --fd-2xl:clamp(38px,4.9vw,68px);
  --fd-3xl:clamp(40px,11.5vw,96px);   /* the price - steep, so it is
                                         not pinned at its floor on a phone */
  --fd-4xl:clamp(42px,7.2vw,104px);
  --fd-hand:clamp(20px,1.8vw,25px);

  /* ---------- space · strict 4px grid ------------------------ */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;  --sp-6:24px;  --sp-7:28px;  --sp-8:32px;
  --sp-9:40px;  --sp-10:48px; --sp-11:64px; --sp-12:80px;

  /* ---------- layout -----------------------------------------
     --edge is the signature: full-bleed bands, content that
     self-centres at a 1240px measure.                         */
  --gutter:clamp(24px, 10.4vw, 150px);
  --edge:max(var(--gutter), calc((100vw - 1240px) / 2));
  --section-y:clamp(56px, 7.6vw, 110px);
  --split-gap:var(--sp-12);
  --col-label:430px;      /* the fixed left "label" column     */
  --col-panel:520px;      /* the fixed "panel" column          */
  --measure:620px;        /* body copy line length             */
  --measure-lead:640px;   /* leads and the hero subhead        */
  --measure-wide:900px;

  /* ---------- surfaces --------------------------------------- */
  --btn-pad:16px 30px;
  --radius-panel:16px;
  --radius-pill:999px;
  --shadow-panel:0 14px 34px -6px rgba(46,37,28,.08);
  --shadow-float:0 24px 60px -10px rgba(0,0,0,.18);
  --shadow-lift:0 20px 40px -8px rgba(46,37,28,.10);
  --shadow-cta:0 10px 28px rgba(185,112,75,.30);
  --shadow-cta-hover:0 14px 32px rgba(185,112,75,.36);
  --shadow-nav:0 8px 24px -4px rgba(46,37,28,.06);

  /* ---------- motion -----------------------------------------
     Law: printed content settles first; handwriting arrives
     --hand-delay later. Everything reveals exactly once.      */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.45,.5,1);
  --dur:500ms;
  --dur-fast:200ms;
  --hand-delay:.4s;
  --lift:-3px;            /* panel hover                       */
  --lift-sm:-2px;         /* button hover                      */
}

/* Mobile standard: 16px gutters on every band, rather than the
   10.4vw the fluid gutter would give (about 43px on a 413px phone,
   which eats a sixth of the screen). */
@media (max-width:700px){
  :root{--edge:16px}
}

/* The section rail lives in the right gutter, so at the widths
   where it is shown the gutter has to be wide enough to hold it.
   Without this the rail would sit on top of full-width rows. */
@media (min-width:1240px){
  :root{--edge:max(184px, var(--gutter), calc((100vw - 1240px) / 2))}
}
}