/* Genesis Digital Solutions design-system tokens (from the design package, colors_and_type.css). */
/* =============================================================
   Genesis Digital Solutions — Design Tokens
   Source: Figma "Genesis - Design System.fig"
   ============================================================= */

/* Inter — self-hosted variable font (weight axis 100–900) */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'), url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND PRIMITIVES ---------- */
  --gds-navy:        #111F3D;   /* Primary brand — text, surfaces, slides */
  --gds-navy-deep:   #0F2C70;   /* Deeper navy used in slide gradients */
  --gds-yellow:      #F2C300;   /* Brand accent — buttons, dividers, marks */
  --gds-yellow-50:   #FFFCDB;   /* Yellow tint — light surfaces */
  --gds-blue:        #1A49AF;   /* Accent blue — links, highlight callouts */
  --gds-blue-50:     #EFF6FF;   /* Blue tint — info card backgrounds */
  --gds-blue-100:    #E8EEFC;
  --gds-blue-200:    #BDCFF8;
  --gds-blue-300:    #98A5C4;
  --gds-white:       #FFFFFF;
  --gds-black:       #000000;

  /* ---------- NEUTRAL SCALE (slate) ---------- */
  --gds-slate-50:    #F8F8F8;
  --gds-slate-75:    #F6F7F9;   /* App background, doc tint */
  --gds-slate-100:   #E6E8EC;
  --gds-slate-200:   #CFD3DA;
  --gds-slate-300:   #B2B8C2;
  --gds-slate-400:   #98A5C4;
  --gds-slate-500:   #848C9C;   /* Secondary text */
  --gds-slate-600:   #646D80;   /* Tertiary text */
  --gds-slate-700:   #505867;   /* Body alt */
  --gds-slate-800:   #2A2F3A;
  --gds-slate-900:   #111F3D;

  /* ---------- FEEDBACK ---------- */
  --gds-success:     #16A34A;
  --gds-success-bg:  #DCFCE7;
  --gds-warning:     #F59E0B;
  --gds-warning-bg:  #FFFBEB;
  --gds-error:       #DC2626;
  --gds-error-bg:    #FEE2E2;
  --gds-info:        #1A49AF;
  --gds-info-bg:     #EFF6FF;

  /* ---------- SEMANTIC: SURFACES ---------- */
  --bg-canvas:       var(--gds-slate-75);
  --bg-surface:      var(--gds-white);
  --bg-surface-alt:  var(--gds-slate-50);
  --bg-inverse:      var(--gds-navy);

  /* ---------- SEMANTIC: TEXT ---------- */
  --fg-primary:      var(--gds-navy);
  --fg-secondary:    var(--gds-slate-700);
  --fg-tertiary:     var(--gds-slate-500);
  --fg-muted:        var(--gds-slate-400);
  --fg-on-dark:      var(--gds-white);
  --fg-on-yellow:    var(--gds-navy);
  --fg-link:         var(--gds-blue);
  --fg-accent:       var(--gds-yellow);

  /* ---------- SEMANTIC: BORDERS ---------- */
  --border-subtle:   var(--gds-slate-100);
  --border-default:  var(--gds-slate-200);
  --border-strong:   var(--gds-slate-500);
  --border-focus:    var(--gds-blue);

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- ELEVATION (from Figma shadow tokens) ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-card: 0 0 4px rgba(0,0,0,0.25); /* per Figma cover */

  /* ---------- SPACING (8pt scale, mirrors Figma 317 set) ---------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif;
  --font-slide: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* PowerPoint-compatible */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Base scale (Web/App spec from Figma) */
  --fs-display-lg: 40px;
  --fs-display-md: 32px;
  --fs-h1: 28px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-body-lg: 16px;
  --fs-body-md: 14px;
  --fs-body-sm: 12px;
  --fs-label-lg: 14px;
  --fs-label-md: 12px;
  --fs-caption: 11px;
  --fs-overline: 11px;
  --fs-mono: 13px;

  /* Slide scale (Presentations spec) */
  --fs-slide-stat:       72px;
  --fs-slide-heading:    44px;
  --fs-slide-subtitle:   36px;
  --fs-slide-quote:      32px;
  --fs-slide-subheading: 28px;
  --fs-slide-body:       24px;
  --fs-slide-body-sm:    20px;
  --fs-slide-label:      18px;
  --fs-slide-caption:    16px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line-heights */
  --lh-tight: 1.0;
  --lh-snug: 1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.5;

  /* Letter-spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-overline: 0.08em;
}

/* =============================================================
   Type recipes — apply these classes for consistent type
   ============================================================= */
.t-display-lg { font: var(--fw-bold) var(--fs-display-lg)/1.1 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.t-display-md { font: var(--fw-bold) var(--fs-display-md)/1.15 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.t-h1   { font: var(--fw-semibold) var(--fs-h1)/1.2 var(--font-sans); color: var(--fg-primary); }
.t-h2   { font: var(--fw-semibold) var(--fs-h2)/1.25 var(--font-sans); color: var(--fg-primary); }
.t-h3   { font: var(--fw-semibold) var(--fs-h3)/1.3 var(--font-sans); color: var(--fg-primary); }
.t-h4   { font: var(--fw-semibold) var(--fs-h4)/1.35 var(--font-sans); color: var(--fg-primary); }
.t-body-lg { font: var(--fw-regular) var(--fs-body-lg)/1.5 var(--font-sans); color: var(--fg-secondary); }
.t-body-md { font: var(--fw-regular) var(--fs-body-md)/1.5 var(--font-sans); color: var(--fg-secondary); }
.t-body-sm { font: var(--fw-regular) var(--fs-body-sm)/1.45 var(--font-sans); color: var(--fg-secondary); }
.t-label-lg { font: var(--fw-medium) var(--fs-label-lg)/1.3 var(--font-sans); color: var(--fg-primary); }
.t-label-md { font: var(--fw-medium) var(--fs-label-md)/1.3 var(--font-sans); color: var(--fg-primary); }
.t-caption  { font: var(--fw-regular) var(--fs-caption)/1.4 var(--font-sans); color: var(--fg-tertiary); }
.t-overline { font: var(--fw-semibold) var(--fs-overline)/1.3 var(--font-sans); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--fg-tertiary); }
.t-mono     { font: var(--fw-regular) var(--fs-mono)/1.5 var(--font-mono); color: var(--fg-secondary); }

/* Slide recipes — only valid inside a 1920×1080 slide stage */
.t-slide-stat       { font: var(--fw-bold) var(--fs-slide-stat)/1.0 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--gds-yellow); }
.t-slide-heading    { font: var(--fw-bold) var(--fs-slide-heading)/1.1 var(--font-sans); color: var(--fg-on-dark); }
.t-slide-subtitle   { font: var(--fw-regular) var(--fs-slide-subtitle)/1.2 var(--font-sans); color: var(--fg-on-dark); }
.t-slide-quote      { font: var(--fw-regular) var(--fs-slide-quote)/1.35 var(--font-sans); font-style: italic; color: var(--fg-on-dark); }
.t-slide-subheading { font: var(--fw-semibold) var(--fs-slide-subheading)/1.25 var(--font-sans); color: var(--fg-on-dark); }
.t-slide-body       { font: var(--fw-regular) var(--fs-slide-body)/1.4 var(--font-sans); color: var(--fg-on-dark); }
.t-slide-body-sm    { font: var(--fw-regular) var(--fs-slide-body-sm)/1.45 var(--font-sans); color: var(--fg-on-dark); }
.t-slide-label      { font: var(--fw-semibold) var(--fs-slide-label)/1.3 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gds-yellow); }
.t-slide-caption    { font: var(--fw-regular) var(--fs-slide-caption)/1.4 var(--font-sans); color: rgba(255,255,255,0.72); }