/* ---------------------------------------------------------------------------
   Omarzay — design tokens

   Values come from the Figma file (node 17:7681), measured at the 1920 design
   width. Anything not yet defined in Figma is marked PROVISIONAL: it is carried
   over from the approved review site and should be confirmed before it is used
   in a section the client will see.
   --------------------------------------------------------------------------- */

:root{
  /* ---- colour: confirmed, these are Figma variables ---- */
  --navy-deep:#12203B;          /* color/Navy Deep */
  --brass:#C0A167;              /* color/Brass     */
  --white:#FFFFFF;              /* color/White     */

  /* Scrim is near-black rather than navy-tinted — taken from the hero overlay. */
  --scrim:#16181D;

  /* ---- colour: PROVISIONAL, not yet in Figma ---- */
  --navy:#1B2E52;
  --paper:#F5F4F1;
  --ink:#1A1D22;
  --ink-2:#5B6274;

  /* ---- type families ---- */
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-script:"Dynalight",cursive;
  /* A second script face appears on the story section in Figma. Flagged —
     two scripts in one identity is usually a mistake, not a decision. */
  --f-numeral:"Sacramento",cursive;
  --f-body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* ---- type scale ----
     Each size is fluid between a mobile floor and the Figma value at 1920.
     The vw figure is the design value / 1920. Nothing that carries running
     text is allowed below 16px. */
  --t-display-xl:clamp(40px,4.583vw,88px);   /* 88  — hero headline      */
  --t-display-l:clamp(34px,3.44vw,66px);     /* PROVISIONAL              */
  --t-script:clamp(30px,2.396vw,46px);       /* 46  — script accent      */
  --t-section-label:clamp(18px,1.146vw,22px);/* 22  — "Our Vision"       */
  --t-body-l:clamp(17px,1.042vw,20px);       /* 20  — lead paragraph     */
  --t-numeral:clamp(64px,7.083vw,136px);     /* 136 — the founding year  */
  --t-title:clamp(48px,5vw,96px);            /* 96  — script chapter title */
  --t-h2:clamp(30px,2.344vw,45px);           /* 45  — section heading, Archivo */
  --t-body:16px;                             /* 16  — body              */
  --t-label:16px;                            /* 16  — nav, eyebrows      */

  --lh-display:0.886;   /* 78 / 88 */
  --lh-script:1.11;     /* 51 / 46 */
  --lh-body-l:1.8;      /* 36 / 20 — the Body/L style             */
  --lh-body:1.7;        /* 27 / 16                                */

  --ls-display:0.015em; /* +1.32px at 88 */
  --ls-label:0.12em;    /* +1.92px at 16 */
  --ls-button:0.06em;   /* +0.96px at 16 */

  /* ---- layout ----
     Page margin is 177px at 1920 and symmetric (per your note on point 5). */
  --pad:clamp(24px,9.219vw,177px);
  --content:1566px;                          /* 1920 - 2 x 177 */
  --gutter:clamp(40px,5.469vw,105px);        /* 105 between hero columns */
  --measure-lead:497px;                      /* lead paragraph width */
  --measure-display:592px;                   /* headline width */

  /* nav */
  --nav-logo-h:clamp(52px,5vw,96px);
  /* Stacked mark exists only in navy on transparent; inverted to white for
     the dark nav. Set to `none` once a white stacked asset is supplied. */
  --nav-logo-filter:brightness(0) invert(1);
  --nav-gap-link:clamp(24px,4.479vw,86px);   /* between two links in a group */
  --nav-gap-logo:clamp(30px,7.708vw,148px);  /* between a group and the logo */

  /* ---- motion ---- */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-in:cubic-bezier(.55,0,1,.45);   /* accelerating — used for the exit half */
  --e-soft:cubic-bezier(.33,1,.68,1); /* gentler than --e-out; for slow, quiet moves */
  --t-rule:520ms;                     /* nav underline drawing out and back */

  --t-fast:200ms;
  --t-base:400ms;
  --t-arrow:380ms;          /* arrow cycle on the ring CTA */
  --t-char:420ms;           /* one character out and back — two phases, not one */
  --stagger-char:14ms;      /* delay added per character */
  --char-travel:60%;        /* how far each character travels out before returning */

  /* magnetic pull — read by site.js */
  --magnet-radius:110;      /* px from the ring centre where the pull begins */
  --magnet-strength:0.32;   /* fraction of the cursor offset followed */
  --magnet-max:16;          /* px cap, so it never detaches from its label */
}