/* ============================================================
   BRISTOW & SUTOR — DESIGN TOKENS
   Brand Guidelines Interim 2019
   ============================================================ */

:root {
  /* ---- Brand Colours ---- */
  --bs-dark-blue:  #002D41;
  --bs-gold:       #BE8C3C;
  --bs-pink:       #D53F77;
  --bs-turquoise:  #25C9D0;
  --bs-white:      #FFFFFF;
  --bs-off-white:  #F4F6F9;
  --bs-light-grey: #E8EDF2;
  --bs-mid-grey:   #8A9BAD;
  --bs-muted:      #6B7A8D;
  --bs-body-text:  #1A2B38;

  /* ---- Tints (10% opacity steps) ---- */
  --bs-dark-blue-10: rgba(0,45,65,0.10);
  --bs-dark-blue-20: rgba(0,45,65,0.20);
  --bs-dark-blue-50: rgba(0,45,65,0.50);
  --bs-gold-10:      rgba(190,140,60,0.10);
  --bs-gold-20:      rgba(190,140,60,0.20);
  --bs-turq-10:      rgba(37,201,208,0.10);
  --bs-turq-20:      rgba(37,201,208,0.20);
  --bs-turq-30:      rgba(37,201,208,0.30);
  --bs-pink-10:      rgba(213,63,119,0.10);
  --bs-pink-20:      rgba(213,63,119,0.20);

  /* ---- Semantic Colour Aliases ---- */
  /* Maps brand palette to UI roles — use these in components, not raw brand vars */
  /* Primary actions   → Dark Blue */
  /* Secondary actions → Gold */
  /* Info / neutral    → Turquoise */
  /* Error / urgent    → Pink (accent-only; use sparingly) */
  --color-success:      #22c55e;
  --color-success-bg:   #f0fdf4;
  --color-success-text: #14532d;
  --color-warning:      #f59e0b;
  --color-warning-bg:   #fffbeb;
  --color-warning-text: #7c4a00;
  --color-danger:       var(--bs-pink);
  --color-danger-bg:    #fff0f5;
  --color-danger-text:  #7a1235;
  --color-info:         var(--bs-turquoise);
  --color-info-bg:      #f0f8ff;
  --color-info-text:    #1a4a60;

  /* ---- Typography ---- */
  --font-primary:   'Montserrat', sans-serif;
  --font-secondary: 'Playfair Display', serif;

  /* ---- Spacing ---- */
  --space-xs:  6.4px;
  --space-sm:  12.8px;
  --space-md:  19.2px;
  --space-lg:  32px;
  --space-xl:  51.2px;

  /* ---- Borders & Radius ---- */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm:    0 2px 6px rgba(0,22,40,0.08);
  --shadow-md:    0 4px 16px rgba(0,22,40,0.10);
  --shadow-lg:    0 8px 32px rgba(0,22,40,0.14);
  --shadow-xl:    0 16px 48px rgba(0,22,40,0.18);
  --shadow-modal: 0 32px 96px rgba(0,0,0,0.25);

  /* ---- Transitions ---- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ---- Z-index ladder ---- */
  --z-dropdown: 800;
  --z-sticky:   900;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    3000;

  /* ---- Breakpoints (documentation reference — use in @media queries) ---- */
  /* --bp-mobile:  640px   (single-column forms, stacked cards)  */
  /* --bp-tablet:  900px   (hide desktop nav, collapse sidebar)  */
  /* --bp-desktop: 1160px  (max content width)                   */

  /* ============================================================
     PHASE 1 — SEMANTIC TYPOGRAPHY + ACCESSIBLE TEXT-COLOUR TOKENS
     Added per analysis/APPLICATION_FONT_SIZE_AND_COLOUR_CONTRAST_AUDIT.md §6/§11.1 Phase 1.
     Not yet consumed by any component — defining these here has no rendered effect until a
     future migration batch (§11.1 Phase 2+) replaces existing declarations with them. Do not
     wire these into components as part of this same change; that is deliberately a separate,
     independently reviewable and testable batch (see §8's "incremental release" principle).
     ============================================================ */

  /* ---- Semantic type scale (target computed sizes; see §6 table) ----
     Trimmed ~1-2px below the audit's §6 recommended minimums at explicit user request
     (2026-08-26) — xs/body/control now read below the WCAG-AA-motivated 12/14/16px floor
     that F02/F03/F10 call Critical priority. Revisit if that compliance question (§1.2 point
     5 / §11.0) gets a firm answer from business/legal. */
  --text-xs:      11px;  /* secondary metadata / badges minimum */
  --text-sm:      12px;  /* form labels / table headers */
  --text-body:    13px;  /* primary body / table cells / buttons / nav */
  --text-control: 15px;  /* form inputs, where space permits */
  --text-section: 17px;  /* card / section headings (lower end) */
  --text-page:    22px;  /* page headings (lower end) */

  /* ---- Paired line heights (§6: ~1.4–1.6 for body text) ---- */
  --line-xs:      1.4;
  --line-sm:      1.4;
  --line-body:    1.5;
  --line-control: 1.5;
  --line-section: 1.3;
  --line-page:    1.2;

  /* ---- Accessible text-colour variants (§7.3 candidates — pass 4.5:1 on white AND off-white) ----
     These are TEXT-ONLY variants of existing brand/semantic colours. The original brand tokens
     above are unchanged and remain correct for borders, backgrounds, icons and accents — do not
     replace those uses. Use these only where the brand colour would otherwise be applied as
     normal-size text on a light surface. --color-success-text/--color-warning-text already pass
     and are intentionally not duplicated here. */
  --bs-muted-text:      #59697A; /* replaces --bs-muted (4.38:1, fails) when used as text: 5.64:1 / 5.21:1 */
  --bs-gold-text:       #8A651F; /* replaces --bs-gold (3.00:1, fails) when used as text: 5.30:1 / 4.90:1 */
  --bs-pink-text:       #A61E52; /* replaces --bs-pink (4.37:1, fails) when used as text: 7.17:1 / 6.62:1 */
  --bs-turquoise-text:  #0E7490; /* replaces --bs-turquoise (2.03:1, fails) when used as text: 5.36:1 / 4.95:1 */
}