/* ==========================================================================
   Al Dorra Group — design token layer
   Single source of truth. Tailwind (tailwind.config.js) reads the *-rgb
   channel tokens so utilities keep working with opacity modifiers.

   Theme: "heritage light" — white and cool-slate surfaces, a deep navy
   masthead/footer, one heritage-gold accent. Cards, not bands, carry content.
   ========================================================================== */

:root {
  /* --- Colour ----------------------------------------------------------- */
  /* Navy family. --ink is both the heading colour on light surfaces and the
     dark surface itself (hero, footer), so it must stay readable either way. */
  --ink:   #0F1D2A;  --ink-rgb:   15 29 42;
  --deep:  #16324B;  --deep-rgb:  22 50 75;

  /* Text on light surfaces. --slate is the strong label/eyebrow weight,
     --steel the running body colour. */
  --slate: #3E4C59;  --slate-rgb: 62 76 89;
  --steel: #5A6B7A;  --steel-rgb: 90 107 122;

  /* Surfaces. --pearl does double duty: the alternating cool band on light
     pages, and near-white type on the navy hero/footer. */
  --pearl: #F3F7FA;  --pearl-rgb: 243 247 250;
  --paper: #FFFFFF;  --paper-rgb: 255 255 255;

  /* Hairlines. */
  --line:        #E4EAF0;  --line-rgb:        228 234 240;
  --line-strong: #D3DDE6;  --line-strong-rgb: 211 221 230;

  /* Heritage gold. --brass-deep is the canonical accent and the only one used
     on light surfaces (5.3:1 on white): stat figures, role labels, the primary
     button fill, icon glyphs. --brass is the same hue lifted for use as text
     on the navy surfaces, where the deep value would fall under 3:1. */
  --brass-deep: #8C6818; --brass-deep-rgb: 140 104 24;
  --brass:      #D6AE5C; --brass-rgb:      214 174 92;
  --brass-press: #755612;
  /* Cream plate behind gold icon glyphs. */
  --gold-soft: #FBF1DC; --gold-soft-rgb: 251 241 220;

  /* --- Type ------------------------------------------------------------- */
  /* One family. Display work is done by weight (700) and negative tracking,
     not by a second face. */
  --font-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Inter Tight", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-utility: 0.75rem;   /* 12 */
  --fs-fine:    0.875rem;  /* 14 */
  --fs-nav:     0.9375rem; /* 15 */
  --fs-body:    1.0625rem; /* 17 */
  --fs-lead:    1.1875rem; /* 19 */
  --fs-title:   1.375rem;  /* 22 */
  --fs-figure:  2.5rem;    /* 40 — stat numerals */
  --fs-section: 2.5rem;    /* 40 */
  --fs-page:    3rem;      /* 48 */
  --fs-hero:    4rem;      /* 64 */

  --lh-body: 1.7;
  --lh-lead: 1.7;
  --lh-display: 1.14;
  --tracking-display: -0.022em;
  --tracking-utility: 0.14em;
  --measure: 68ch;

  /* --- Layout ----------------------------------------------------------- */
  --shell: 1200px;
  --gutter: 20px;
  --gutter-lg: 40px;
  --section-y: 64px;
  --section-y-lg: 104px;
  --header-h: 76px;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --hairline: 1px;

  /* --- Elevation --------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgb(15 29 42 / 0.05);
  --shadow-card: 0 1px 3px rgb(15 29 42 / 0.05), 0 10px 30px -8px rgb(15 29 42 / 0.10);
  --shadow-lift: 0 2px 6px rgb(15 29 42 / 0.07), 0 22px 44px -14px rgb(15 29 42 / 0.18);
  --shadow-head: 0 1px 0 rgb(15 29 42 / 0.06);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover: 200ms;
  --dur-reveal: 560ms;
  --dur-fade: 1000ms;
  --slide-hold: 7000ms;

  /* --- Treatments ------------------------------------------------------- */
  /* The navy hero ground: a diagonal navy base, a warm moss bloom anchored
     top-right, a cooler bloom bottom-left, and a 48px engineering grid. */
  --hero-base: linear-gradient(135deg, #04263D 0%, #08344F 46%, #0A3A5B 100%);
  --hero-bloom-warm: radial-gradient(62% 58% at 92% 0%,
      rgb(104 118 78 / 0.85) 0%, rgb(78 94 72 / 0.42) 38%, transparent 72%);
  --hero-bloom-cool: radial-gradient(54% 62% at 0% 104%,
      rgb(38 100 146 / 0.62) 0%, rgb(28 78 118 / 0.28) 42%, transparent 74%);
  --hero-grid: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
               linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  --hero-grid-size: 48px 48px;


  /* Portraits are normalised to one cool, slightly flattened treatment so a set
     of inconsistently shot photographs reads as a single board. */
  /* The normalising treatment is kept, but light: the portraits are upscaled
     thumbnails, so a heavy veil and strong desaturation cost real clarity.
     Enough saturation is held back to keep the mixed backgrounds cohesive. */
  --portrait-tint: rgb(var(--ink-rgb) / 0.03);
  --portrait-filter: saturate(0.92) contrast(1.06);
  /* Scrim on image cards, so white type clears the photograph beneath. */
  --card-scrim: linear-gradient(180deg,
      transparent 34%, rgb(var(--ink-rgb) / 0.55) 68%, rgb(var(--ink-rgb) / 0.92) 100%);
}

@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: var(--gutter-lg); --section-y: var(--section-y-lg); } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-hover: 1ms; --dur-reveal: 1ms; --dur-fade: 1ms; }
}