/* ==========================================================================
   tokens.css — AI Governance Radar
   CSS custom properties: colors, typography, spacing, and all @font-face
   declarations. All values sourced from CLAUDE.md Section 3 (Brand Identity).
   No values may be changed without explicit instruction from Eddie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — League Gothic
   Display titles, section headers, domain names. Always all-caps.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'League Gothic';
  src: url('../assets/fonts/LeagueGothic-Regular.woff2') format('woff2'),
       url('../assets/fonts/LeagueGothic-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* --------------------------------------------------------------------------
   @font-face — Montserrat Light (300)
   All body content, labels, descriptions, callout box text.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Light.woff2') format('woff2'),
       url('../assets/fonts/Montserrat-Light.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-LightItalic.woff2') format('woff2'),
       url('../assets/fonts/Montserrat-LightItalic.woff')  format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: block;
}

/* --------------------------------------------------------------------------
   @font-face — Montserrat Regular (400)
   Bold moments in body copy, table headers, badge labels.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Regular.woff2') format('woff2'),
       url('../assets/fonts/Montserrat-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* --------------------------------------------------------------------------
   Color tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette */
  --color-primary:     #006699; /* Interactive elements, links, buttons, active states, section title text */
  --color-secondary:   #003366; /* Page/section headers, nav band, diagonal geometric accent, report cover */
  --color-accent:      #C9A84C; /* Score callouts, priority badges, Expert Tip boxes, key CTAs */
  --color-bg-tint:     #E8F4F8; /* Card backgrounds, section dividers */
  --color-warning:     #F5C518; /* Warning callout boxes (amber) */
  --color-white:       #FFFFFF; /* Page background, content areas */
  --color-text-body:   #1A1A1A; /* Primary body copy */
  --color-text-muted:  #666666; /* Secondary labels, metadata */

  /* Gap severity colors */
  --color-severity-critical:    #CC0000; /* Critical gap — red */
  --color-severity-significant: #E05C00; /* Significant gap — orange */
  --color-severity-moderate:    #C9A84C; /* Moderate gap — amber (same as accent) */

  /* Semantic aliases */
  --color-link:        var(--color-primary);
  --color-border:      #D0DDE6;
  --color-border-light: #E8F0F5;

/* --------------------------------------------------------------------------
   Typography tokens
   -------------------------------------------------------------------------- */

  --font-display: 'League Gothic', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --font-weight-light:   300;
  --font-weight-regular: 400;

  /* Type scale — display (League Gothic, all-caps) */
  --text-display-xl:  3.5rem;   /* 56px — cover page titles */
  --text-display-lg:  2.75rem;  /* 44px — section cover headers */
  --text-display-md:  2rem;     /* 32px — section headers, domain names */
  --text-display-sm:  1.5rem;   /* 24px — card headers, subsection titles */

  /* Type scale — body (Montserrat) */
  --text-body-xl:   1.25rem;  /* 20px */
  --text-body-lg:   1.125rem; /* 18px */
  --text-body-md:   1rem;     /* 16px — base body */
  --text-body-sm:   0.875rem; /* 14px — labels, metadata */
  --text-body-xs:   0.75rem;  /* 12px — fine print, captions */

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  --letter-spacing-display: 0.04em; /* League Gothic all-caps tracking */
  --letter-spacing-caps:    0.08em; /* Montserrat all-caps labels */

/* --------------------------------------------------------------------------
   Spacing tokens (4px base grid)
   -------------------------------------------------------------------------- */

  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */

/* --------------------------------------------------------------------------
   Layout tokens
   -------------------------------------------------------------------------- */

  --max-width-app:     960px;  /* Assessment UI max content width */
  --max-width-report: 1040px;  /* Report view max content width */
  --max-width-narrow:  640px;  /* Form, narrow content */

  --border-radius-sm:  4px;
  --border-radius-md:  8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-pill: 9999px;

/* --------------------------------------------------------------------------
   Shadow tokens
   -------------------------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(0, 51, 102, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 51, 102, 0.12);
  --shadow-lg:  0 8px 24px rgba(0, 51, 102, 0.16);

/* --------------------------------------------------------------------------
   Transition tokens
   -------------------------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

/* --------------------------------------------------------------------------
   Z-index scale
   -------------------------------------------------------------------------- */

  --z-base:    0;
  --z-above:   10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}