/* ==========================================================================
   Efa Iwara — Production Colour and Type System Design Tokens
   ========================================================================== */

:root {
  /* 1. Foundation Palette */
  --plum-950: #1B0826;
  --charcoal-900: #2A2A2A;
  --charcoal-800: #353131;
  --paper-50: #FAFAFA;
  --cloud-200: #E5E5E5;
  --slate-500: #9098A0;
  --slate-400: #9DA4AC;
  --orange-500: #FF8D28;
  --violet-500: #A932FF;
  --coral-500: #FF5A13;
  --violet-action-700: #7A1EB3;
  --rust-action-700: #C53F00;

  /* 2. Semantic Colour Roles */
  --bg-page-dark: var(--plum-950);
  --bg-surface-dark: var(--charcoal-800);
  --bg-footer: var(--charcoal-900);
  --bg-page-light: var(--paper-50);

  --text-primary-on-dark: var(--paper-50);
  --text-secondary-on-plum: var(--cloud-200);
  --text-muted-on-dark: var(--slate-400);
  --text-primary-on-light: var(--charcoal-900);
  --text-muted-on-light: var(--slate-500);

  --border-subtle: rgba(194, 194, 194, 0.25);
  --border-card: rgba(255, 255, 255, 0.08);
  --border-interactive: rgba(169, 50, 255, 0.4);
  --accent-eyebrow: var(--orange-500);
  --focus-ring: #EB96FF;

  /* 3. Actions and Gradients */
  --gradient-action-primary: linear-gradient(90deg, #7A1EB3 0%, #C53F00 100%);
  --gradient-action-hover: linear-gradient(90deg, #8B25CA 0%, #DB4700 100%);
  --gradient-brand-decorative: linear-gradient(90deg, #A932FF 0%, #FF5A13 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(27, 8, 38, 0.2) 0%, rgba(27, 8, 38, 0.95) 100%);
  --gradient-card-overlay: linear-gradient(180deg, rgba(27, 8, 38, 0) 30%, rgba(27, 8, 38, 0.9) 100%);

  /* 4. Typography Scale & Families */
  --font-display: 'Cinzel Decorative', Georgia, 'Times New Roman', serif;
  --font-heading: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-main: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-utility: 'Roboto Mono', 'SF Mono', Consolas, monospace, sans-serif;

  /* Type Scale Tokens */
  --font-size-display-desktop: 64px;
  --font-size-display-mobile: 44px;
  --line-height-display: 1.375;
  --letter-spacing-display: -0.056em;

  --font-size-heading-xl-desktop: 52px;
  --font-size-heading-xl-mobile: 36px;
  --line-height-heading-xl: 1.12;
  --letter-spacing-heading-xl: -0.023em;

  --font-size-heading-lg-desktop: 36px;
  --font-size-heading-lg-mobile: 28px;
  --line-height-heading-lg: 1.12;
  --letter-spacing-heading-lg: -0.033em;

  --font-size-heading-md-desktop: 28px;
  --font-size-heading-md-mobile: 22px;
  --line-height-heading-md: 1.15;
  --letter-spacing-heading-md: -0.043em;

  --font-size-body-lg-desktop: 22px;
  --font-size-body-lg-mobile: 18px;
  --line-height-body-lg: 1.45;
  --letter-spacing-body-lg: -0.014em;

  --font-size-body-base-desktop: 20px;
  --font-size-body-base-mobile: 17px;
  --line-height-body-base: 1.4;
  --letter-spacing-body-base: -0.020em;

  --font-size-label-desktop: 18px;
  --font-size-label-mobile: 14px;
  --line-height-label: 1.38;
  --letter-spacing-label: -0.020em;

  --font-size-nav-button: 16px;
  --line-height-nav-button: 1.5;
  --letter-spacing-nav-button: -0.012em;

  --font-size-footer-small: 12px;
  --line-height-footer-small: 1.5;

  /* 5. Layout & Radii Rules */
  --max-content-width: 1225px;
  --radius-card: 8px;
  --radius-button: 12px;
  --radius-hero-glass: 20px;
  --radius-pill: 9999px;
  --radius-modal: 16px;

  --min-touch-target: 44px;
  --transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}