/* ==========================================================================
   Biriai design tokens
   Single source for colour, type, spacing, radius, shadow and motion.
   The Brand Kit page (brand.html) documents these same values — keep
   assets/js/brand-data.js in sync when a token changes.
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand palette */
  --c-blue: #0668E1;          /* Biriai Blue — primary */
  --c-blue-strong: #0553B5;   /* hover / pressed */
  --c-blue-tint: #E7F0FC;     /* badges, highlights on light */
  --c-sky: #6EA8F5;           /* accent on dark surfaces */
  --c-navy: #071A2B;          /* Midnight Navy — secondary, dark canvas */
  --c-oxford: #0B2545;        /* Oxford Blue — raised dark surface */
  --c-charcoal: #111827;      /* primary text */
  --c-slate: #475569;         /* secondary text */
  --c-platinum: #CBD5E1;      /* borders, muted text on dark */
  --c-offwhite: #F5F7FA;      /* page background */
  --c-white: #FFFFFF;         /* cards, surfaces */

  /* Semantic roles */
  --bg: var(--c-offwhite);
  --surface: var(--c-white);
  --text: var(--c-charcoal);
  --text-muted: var(--c-slate);
  --line: var(--c-platinum);
  --line-soft: #E3E8EF;
  --accent: var(--c-blue);

  --dark-bg: var(--c-navy);
  --dark-surface: var(--c-oxford);
  --dark-text: var(--c-offwhite);
  --dark-muted: var(--c-platinum);
  --dark-line: rgba(203, 213, 225, 0.14);

  /* Typography */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.5rem, 1.55rem + 4.3vw, 5rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-label: 0.875rem;
  --fs-caption: 0.8125rem;

  --lh-tight: 1.04;
  --lh-heading: 1.14;
  --lh-body: 1.6;

  --tr-display: -0.035em;
  --tr-heading: -0.02em;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation — used sparingly; most surfaces rely on a 1px line */
  --shadow-1: 0 1px 2px rgba(7, 26, 43, 0.06), 0 1px 1px rgba(7, 26, 43, 0.04);
  --shadow-2: 0 12px 32px -14px rgba(7, 26, 43, 0.20);
  --shadow-3: 0 32px 64px -28px rgba(7, 26, 43, 0.34);
  --focus-ring: 0 0 0 3px rgba(6, 104, 225, 0.32);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
}