/* ---------------------------------------------------------------------------
   Sankartik — design tokens
   Dark Ground dual-ground system. Source: Build Specification Rev 2 §2,
   support values from assets/README.md.

   GOLD #CFA06A IS WITHDRAWN. It carries no role — not text, not a rule, not a
   divider, not a logo detail. Do not reintroduce it.

   Two colours are ground-bound and must never cross:
     #5A564E never on dark   (2.09:1 — fails AA)
     #A8B5AE never on light  (1.99:1 — fails AA)
   Each secondary belongs to one ground only.
--------------------------------------------------------------------------- */

:root {
  /* Grounds */
  --ground-dark:  #0E2A24;   /* hero, emphasis panels, footer */
  --ground-light: #F7F8F6;   /* content, router, forms, articles */
  --panel:        #1E3B32;   /* raised layer on dark; primary text on light */

  /* Text */
  --on-dark:      #F7F8F6;   /* 14.33:1 on ground-dark */
  --on-dark-2:    #A8B5AE;   /* 7.19:1 on ground-dark, 5.72:1 on panel */
  --on-light:     #1E3B32;   /* 11.42:1 on ground-light */
  --on-light-2:   #5A564E;   /* 6.86:1 on ground-light */

  /* Structure */
  --hairline:     #2B4941;   /* non-text panel boundaries only; carries no state */
  --mono-black:   #1A1A1A;   /* one-colour black cut only; not a UI colour */

  /* Support values — from the assets/README.md register. Non-text unless noted. */
  --canvas-light: #E4E6E2;   /* canvas behind light sheets */
  --card-fill:    #FFFFFF;   /* where a card must separate from the light ground */
  --frame-back:   #C9D2CD;   /* photograph-frame backdrop */
  --pill-hover:   #DDE3DF;   /* light-pill CTA hover state */
  --rule-light:   #D5D8D3;   /* specimen tile borders and table rules on light; the
                                /developments/ map's L&T Bypass (owner, 14 Oct 2026) */
  --canvas-dark:  #08201B;   /* canvas behind dark sheets */
  --blur-fallback:#0B231E;   /* solid fallback where backdrop-filter is unsupported */
  --warning:      #8A3226;   /* warning text, 7.69:1 on light */

  /* Type ------------------------------------------------------------------ */
  /* Fallback stacks are chosen for metric proximity, so a swap during loading
     shifts the layout as little as possible. Century Gothic is the closest
     widely installed geometric sans to Jost; Avenir Next covers macOS and iOS,
     where Century Gothic is usually absent.

     JOST HAS NO RUPEE GLYPH. Verified against the original Google Fonts TTF on
     11 September 2026: Jost carries $, € and £ but not ₹ (U+20B9). Source
     Serif 4 does carry it.

     So --font-ui must NEVER be applied to an element containing ₹, or the sign
     falls through to Century Gothic mid-word — a visible mismatch in weight and
     width — or renders as a box where no fallback has it either. All pricing
     copy currently sits in body prose, which is Source Serif 4, and it must
     stay there. If a price ever needs a Jost treatment, use --font-price
     below, which keeps Source Serif 4 for the glyph. */
  --font-ui:    'Jost', 'Century Gothic', 'Avenir Next', sans-serif;
  --font-text:  'Source Serif 4', Georgia, serif;
  --font-price: 'Source Serif 4', Georgia, serif;

  /* Fluid scale. Body floor is 17px — the --step-0 clamp minimum, 1.0625rem.
     No document specifies a minimum type size for site body copy. 17px is this
     file's own choice, not a figure carried from any register.
     The 34px screen type floor (Build Spec §15, assets/README.md:137) governs
     SOCIAL TEMPLATES ONLY — owner decision, 19 September 2026. It does not
     govern the type on this site. No value in this file derives from it. */
  --step--1: clamp(0.875rem, 0.84rem + 0.17vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.7vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.6rem + 1.25vw, 2.65rem);
  --step-4:  clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);

  --leading-tight: 1.12;
  --leading-head:  1.18;
  --leading-body:  1.6;

  --tracking-label: 0.08em;   /* Jost labels and eyebrows */
  --tracking-head: -0.01em;

  /* Space — 4px base */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.75rem;
  --space-m:   1rem;
  --space-l:   1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --measure: 68ch;
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);

  /* Section rhythm — PROTOTYPE, branch layout-prototype, 21 September 2026.
     Additive: --space-3xl above is unchanged and still used elsewhere.

     Previously .section used --space-3xl (6rem) flat, which put 96px above and
     below every section at EVERY width. Measured, that produced a 208px gap
     between one section's last content and the next heading — identical at 390
     and 1920, because rem does not respond to viewport. On a phone that is
     roughly a third of the screen between paragraphs.

     These scale with the viewport instead. The vw coefficient is solved from
     two points, not guessed: 49.5px at 390 and 64.5px at 1440, which are the
     paddings that land the measured gap on the owner's targets (110–120 at
     390, 140–150 at 1440, <=165 at 1920). The max caps at 1920 so it cannot
     keep growing on an ultrawide. */
  --section-pad: clamp(3rem, 2.75rem + 1.43vw, 4.5rem);
  --section-pad-tight: clamp(2rem, 1.83rem + 0.95vw, 3rem);

  /* Borders and radii */
  --radius-pill: 999px;
  --radius-s: 4px;
  --border-w: 1px;

  /* Motion. Confined to navigation and controls — photography does the rest.
     prefers-reduced-motion is handled once, in base.css, as a media query on
     these attributes, so components added later cannot silently miss it. */
  --dur-enter: 220ms;
  --dur-exit:  160ms;
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --lift: -2px;

  /* Header */
  --header-h: 72px;
  --mobilebar-h: 60px;

  /* Hairline width. The one place the non-text boundary width is stated, so
     the outer-height tokens below cannot drift from the borders they add. */
  --hairline-w: 1px;

  /* Focus clearance. The global :focus-visible rule in base.css is a 2px
     outline at a 3px offset, so the indicator paints 5px outside the element's
     border box. Scroll padding that stops at the element's own edge leaves the
     indicator under the bar. The form-field rule (2px at 1px) is smaller, so
     this figure covers both. */
  --focus-clearance: 5px;

  /* Outer heights. --header-h and --mobilebar-h are min-height values on the
     inner boxes; the sticky header adds a bottom border and the mobile bar a
     top border, outside those boxes. These are what the elements actually
     occupy on screen: 73px and 61px, measured. */
  --header-outer-h: calc(var(--header-h) + var(--hairline-w));
  --mobilebar-outer-h: calc(var(--mobilebar-h) + var(--hairline-w));
}