/* Encore Protection - Design System Variables */
/* Brand palette sourced from official Encore brand document */

:root {
  /* ── Encore Official Brand Colors ────────────────────────────────────────── */
  /* Navy Blue Variation 1 -- primary brand navy (headers, CTAs, key UI) */
  --brand-navy-1: #022e54;       /* HEX from brand doc: primary navy */
  /* Navy Blue Variation 2 -- slightly lighter navy (hover states, gradients) */
  --brand-navy-2: #043055;       /* HEX from brand doc: secondary navy */
  /* Dark Navy -- deepest shade (utility bar, footer, darkest backgrounds) */
  --brand-dark-navy: #0a192b;    /* HEX from brand doc: darkest navy */
  /* Grey -- body text and mid-tone UI */
  --brand-grey: #686a6f;         /* HEX from brand doc: grey */
  /* Silver -- borders, subtle accents, secondary text on dark backgrounds */
  --brand-silver: #d8d8d8;       /* HEX from brand doc: silver */

  /* ── Navy Scale (built from official anchors) ────────────────────────────── */
  --navy-950: #040f1c;           /* near-black navy, deepest shadows */
  --navy-900: var(--brand-dark-navy);   /* #0a192b -- utility bar, footer bg */
  --navy-800: #0d2240;           /* between dark-navy and brand-navy-1 */
  --navy-700: var(--brand-navy-1);      /* #022e54 -- PRIMARY brand color */
  --navy-600: var(--brand-navy-2);      /* #043055 -- secondary nav/header bg */
  --navy-500: #0b4a7a;           /* brighter navy for hover gradients */
  --navy-400: #1260a0;           /* mid-navy for interactive states */

  /* ── Blue Accent Scale ───────────────────────────────────────────────────── */
  /* No official bright accent blue in brand doc -- keeping functional blues
     tightly anchored to the navy family with subtle brightness increases */
  --blue-600: #0d3a6e;
  --blue-500: #0f4a8a;
  --blue-400: #1a5fa8;
  --blue-300: #3a7fc4;
  --blue-200: #6aa3d8;
  --blue-100: #c2d9ee;

  /* ── Silver / Neutral Scale (built from official #d8d8d8 silver) ──────────── */
  --silver-600: #8a8c91;         /* darker than official grey for deep contexts */
  --silver-500: var(--brand-grey);      /* #686a6f -- official grey */
  --silver-400: #9a9ca2;         /* between official grey and silver */
  --silver-300: #b8babe;         /* lighter silver */
  --silver-200: var(--brand-silver);    /* #d8d8d8 -- official silver */
  --silver-100: #ebebeb;         /* near-white silver tint */

  /* ── Gray Text / UI Scale ────────────────────────────────────────────────── */
  --gray-900: #1a1d22;
  --gray-800: #28292f;           /* primary body text on light backgrounds */
  --gray-700: #3a3c42;
  --gray-600: var(--brand-grey);        /* #686a6f -- official body grey */
  --gray-500: #888b91;
  --gray-400: #a8aaaf;
  --gray-300: #c4c5c9;
  --gray-200: #dcdde0;
  --gray-100: #efefef;
  --gray-50: #f7f7f8;
  --white: #ffffff;

  /* ── Semantic Color Aliases (used throughout components) ─────────────────── */
  --color-primary: var(--brand-navy-1);     /* #022e54 -- primary CTAs, buttons */
  --color-primary-dark: var(--brand-dark-navy); /* #0a192b -- darkest elements */
  --color-primary-light: var(--brand-navy-2);   /* #043055 -- header bg, hover */
  --color-accent: var(--blue-400);          /* interactive accent blue */
  --color-grey: var(--brand-grey);          /* #686a6f -- text grey */
  --color-silver: var(--brand-silver);      /* #d8d8d8 -- silver accents */

  /* Legacy alias kept for backwards compatibility with existing selectors */
  --accent-blue: var(--blue-400);           /* #1a5fa8 -- links, focus rings */

  /* ── Typography ──────────────────────────────────────────────────────────── */
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.25rem;       /* 20px */
  --text-2xl: 1.5rem;       /* 24px */
  --text-3xl: 1.875rem;     /* 30px */
  --text-4xl: 2.25rem;      /* 36px */
  --text-5xl: 3rem;         /* 48px */
  --text-6xl: 3.75rem;      /* 60px */
  --text-7xl: 4.5rem;       /* 72px */

  /* ── Spacing ─────────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Borders & Radius ────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(2,46,84,0.10), 0 1px 2px rgba(2,46,84,0.08);
  --shadow-md: 0 4px 12px rgba(2,46,84,0.14), 0 2px 6px rgba(2,46,84,0.10);
  --shadow-lg: 0 10px 30px rgba(2,46,84,0.18), 0 4px 12px rgba(2,46,84,0.12);
  --shadow-xl: 0 20px 50px rgba(2,46,84,0.24), 0 8px 20px rgba(2,46,84,0.16);
  --shadow-navy: 0 4px 24px rgba(10,25,43,0.55);
  --shadow-blue: 0 4px 20px rgba(26,95,168,0.30);

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-wide: 1440px;
  --header-height: 72px;
  --utility-bar-height: 40px;
}