/* ==========================================================================
   Alshaheed Adventures — V7 token layer (stage 0)
   Source: tas-design-app-v7-src/shell.html, <style id="tokens"> (lines 74-119),
   copied verbatim minus the six brand hues, which brand.css:12-19 already owns
   byte-identical. Redeclaring those here would only invite drift.

   WHY THIS IS A SEPARATE FILE, NOT AN APPEND TO brand.css
   test/brand.test.js asserts that NOTHING follows the footer LOGO LOCK rule in
   brand.css — the cascade bug that re-tinted the prototype footer twice. A
   trailing rule fails the suite outright. Splitting the layer out also keeps
   stage 0 revertible as two <link> lines during go-live week.

   WHY IT LOADS *BEFORE* brand.css
   So brand.css wins every conflict. This file only adds names — a scan of all
   53 css/ejs files found zero existing references to any token below, and the
   type scale is namespaced .v7-t-* because twelve bare .t-* names already
   exist in brand.css with different values. Adding this layer therefore
   cannot move a pixel; it is a vocabulary, not a restyle.

   The palette and effect guardrails still apply here: test/brand.test.js
   walks every .css under public/, this file included.
   ========================================================================== */

:root {
  /* ---- navy alpha ramp ------------------------------------------------
     The genuinely new part. The site shipped only two steps of this ladder
     (--c-mute at .5, --c-line-l at .1); V7 resolves ink-on-paper contrast to
     five. Muted text is navy at reduced opacity — never a neutral tone. */
  --a10: rgba(21,0,71,.10);
  --a22: rgba(21,0,71,.22);
  --a45: rgba(21,0,71,.45);
  --a55: rgba(21,0,71,.55);
  --a62: rgba(21,0,71,.62);

  /* ---- elevation ------------------------------------------------------
     These NAME geometry the site already ships rather than introducing a new
     look: --elev-card is byte-identical to the rule at brand.css:1414 (and
     four more places), and --elev-tray's lift layer is brand.css:439.
     They are not yet referenced anywhere — see the note at the foot of this
     file about the one guardrail that governs their use. */
  --elev-card: 0 10px 30px -16px rgba(21,0,71,.18);
  --elev-tray: 0 0 0 1px rgba(21,0,71,.10), 0 14px 36px -20px rgba(21,0,71,.20);
  --elev-modal: 0 40px 90px -30px rgba(21,0,71,.55);

  /* ---- Dynamic Type ----------------------------------------------------
     THE USER'S TEXT SIZE, AS A MULTIPLIER. Measured in the app on 2026-09-23:
     raising the system setting to accessibility-extra-extra-large changed
     2,387 of 1,689,606 pixels — 0.14% — and the diff was the status-bar clock
     and the text caret. Nothing in the product moved. Every native app
     responds to that setting, and someone who turned Larger Text on did it
     because they need it, so this is an accessibility gap first and a
     native-feel tell second.

     1 HERE, ALWAYS. On the web, in a home-screen install and at the default
     iOS text size, every `calc(<px> * var(--type-scale))` in the product
     computes to exactly the px it always did — so the shipped design is
     untouched and every measured-geometry test still passes unchanged.
     www/shim.js in the app repo raises it from
     UIApplication.preferredContentSizeCategory and updates it live when the
     setting changes.

     CLAMPED AT 1.35 by the app, not here. iOS's accessibility sizes run to
     roughly 3.1x the body size, and this design has fixed-height chrome, a
     548px hero and a slot grid whose geometry was measured pixel-for-pixel
     against an approved prototype. 1.35 is what those boxes were measured to
     survive; asking for more would break a layout instead of helping anyone.

     WHERE IT IS APPLIED TODAY, and what is deliberately still to do:
       · APPLIED — legal.css in full (/privacy, /support, /delete-account: the
         longest reading in the product, no fixed-height geometry), and the
         form labels and field text in brand.css (where someone who needs
         Larger Text is typing). Both measured in Chrome at 1.35, EN and AR.
       · NOT YET — the V7 home, the world page and the phone chrome. Their
         geometry is a measured reproduction of an approved prototype (hero
         548px, header 64, tab bar 72, rail items 56, gallery aspect ratios),
         so scaling their type is a design pass that has to be re-approved
         screen by screen, not a CSS change. It is real work and it is named
         here rather than half-done. */
  --type-scale: 1;

  /* ---- spacing --------------------------------------------------------- */
  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;

  /* ---- radii -----------------------------------------------------------
     brand.css --r-md (12px) matches --r12. brand.css --r-lg (22px) has no V7
     counterpart and is marked deprecated in place there; new work picks from
     this set. */
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;
  --r-pill: 999px;

  /* ---- control heights -------------------------------------------------
     The most directly copyable thing in V7: one line that makes every tap
     target, chip and field agree without a component-by-component argument. */
  --h-header: 64px;
  --h-status: 48px;
  --h-cta: 48px;
  --h-control: 48px;
  --h-chip-date: 64px;
  --w-chip-date: 48px;
  --h-chip-time: 48px;
  --h-stepper: 32px;
  --btn-icon: 24px;
  --icon: 16px;
  --hairline: 1px solid var(--a10);

  /* ---- V7.5 layout (stage 2) -------------------------------------------
     The two paddings every prototype screen reserves for the fixed chrome
     (index.html:1647, the <=600 block). The site never renders the prototype's
     48px status mock, so the phone value is the only one that exists here. */
  --app-top: 64px;
  --app-bottom: calc(72px + env(safe-area-inset-bottom));

  /* ---- motion ----------------------------------------------------------
     --ease-out and --ease-spring already exist at brand.css:37-38 with
     byte-identical values, so only the gallery curve is new here.

     --slow and the calc() durations MUST sit on :root. A custom property
     substitutes where it is DECLARED, so setting --slow on a wrapper element
     would never reach these definitions and the 4x slow-motion acceptance
     pass would go silently dead. --slow is 1 by default: the durations are
     exactly the V7 values until someone deliberately changes it. */
  --ease-gallery: cubic-bezier(.22,.7,.24,1);
  --slow: 1;
  --d-state: calc(140ms * var(--slow));
  --d-press: calc(160ms * var(--slow));
  --d-reveal: calc(180ms * var(--slow));
  --d-nav: calc(240ms * var(--slow));
  --d-sheet: calc(280ms * var(--slow));

  /* ---- palette completion ----------------------------------------------
     brand.css names the six hues and --paper but never named plain white,
     which the V7 surfaces use as a distinct role from --paper (#FAFAFA). */
  --white: #FFFFFF;
}

/* ==========================================================================
   V7 type scale — NAMESPACED .v7-t-*
   Twelve bare .t-* names already exist in brand.css with different values
   (.t-hero is clamp(54px,8.5vw,130px)/900 there, 72px/800 here). Sharing the
   namespace would silently restyle every shipped page, so this ramp is
   parked under its own prefix until a screen is deliberately converted to it.

   Nothing references these classes yet. They are inert reference geometry.

   OPEN DECISION these classes encode, flagged for the agency lead: V7 is
   fixed-px and bans weight 900, the site is fluid clamp() and uses 900 in 53
   declarations. Converting the home hero also means rewriting the two clamp
   assertions in test/brand.test.js. Not settled here.
   ========================================================================== */

.v7-t-hero { font-size: 72px; font-weight: 800; line-height: .9; letter-spacing: -.015em; }
.v7-t-h1 { font-size: 36px; font-weight: 800; line-height: .95; letter-spacing: -.04em; margin: 0; }
.v7-t-plate-name { font-size: 36px; font-weight: 800; line-height: .9; letter-spacing: -.015em; }
.v7-t-story-h { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: 0; }
.v7-t-total { font-size: 21px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.v7-t-day { font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.v7-t-body { font-size: 16px; font-weight: 400; line-height: 1.5; }
.v7-t-lede { font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--a62); margin: 0; }
.v7-t-intro { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--a62); margin: 0; }
.v7-t-qty { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v7-t-cta { font-size: 13.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.v7-t-chip { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v7-t-meta { font-size: 13px; font-weight: 600; }
.v7-t-meta b { font-weight: 800; }
.v7-t-sum { font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--a62); }
.v7-t-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--a45); }
.v7-t-label { font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.v7-t-month { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--a45); }
.v7-t-today { font-size: 11px; font-weight: 800; color: var(--sky); }
.v7-t-form { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--a62); }
.v7-t-total-l { font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--a45); }
.v7-t-weekday { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--a62); }

/* Arabic display compensation: the 800 display weights step down to 700 and
   the tight display leading opens to 1.15. brand.css:1115 already performs the
   universal [dir=rtl] family swap and brand.css:1123 already kills tracking
   site-wide with the byte-identical rule V7 ships, so neither is repeated. */
[dir=rtl] .v7-t-hero,
[dir=rtl] .v7-t-h1,
[dir=rtl] .v7-t-plate-name,
[dir=rtl] .v7-t-story-h,
[dir=rtl] .v7-t-total,
[dir=rtl] .v7-t-day,
[dir=rtl] .v7-t-cta,
[dir=rtl] .v7-t-chip,
[dir=rtl] .v7-t-qty,
[dir=rtl] .v7-t-label,
[dir=rtl] .v7-t-month,
[dir=rtl] .v7-t-today,
[dir=rtl] .v7-t-form,
[dir=rtl] .v7-t-total-l,
[dir=rtl] .v7-t-weekday,
[dir=rtl] .v7-t-meta b { font-weight: 700; }

[dir=rtl] .v7-t-hero,
[dir=rtl] .v7-t-h1,
[dir=rtl] .v7-t-plate-name,
[dir=rtl] .v7-t-story-h { line-height: 1.15; }

/* --------------------------------------------------------------------------
   USING THE ELEVATION TOKENS — read this before referencing one.
   The brand guardrail inspects every line naming an elevation, allows a small
   named set of tokens through, and rejects any other custom property left on
   it — because a colour token in that position is a glow, which the brand
   bans. The three declarations above are fine, since a declaration carries no
   reference. A USE site does, and tripped the rule until it was widened to a
   named allowlist in test/brand.test.js. Any elevation token added later must
   join that allowlist in the same commit, or its first use will fail the
   suite with a message about glows that reads like a false positive.
   -------------------------------------------------------------------------- */