/* ============================================================
   QVA AS Design System — Colors & Typography Tokens
   ============================================================ */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ── Brand Color Palette ───────────────────────────────── */

  /* Navy scale */
  --navy-950:  #0a1220;
  --navy-900:  #162336;
  --navy-800:  #1d2d44;
  --navy-700:  #243650;
  --navy-600:  #2e4568;
  --navy-500:  #3a567f;

  /* Teal scale */
  --teal-300:  #7fddd7;
  --teal-400:  #4ecdc4;
  --teal-500:  #3dbdb0;
  --teal-600:  #2fa89c;
  --teal-700:  #228f83;
  --teal-800:  #1a7069;

  /* Blue accent (gradient partner) */
  --blue-400:  #5b9cf6;
  --blue-500:  #3a7bd5;
  --blue-600:  #2d63b0;

  /* Neutral / Gray scale */
  --gray-50:   #f8fafc;
  --gray-100:  #f1f5f9;
  --gray-200:  #e2e8f0;
  --gray-300:  #cbd5e1;
  --gray-400:  #94a3b8;
  --gray-500:  #64748b;
  --gray-600:  #475569;
  --gray-700:  #334155;
  --gray-800:  #1e293b;
  --gray-900:  #0f172a;

  /* Pure */
  --white:     #ffffff;
  --black:     #000000;

  /* Status colors */
  --success:   #22c55e;
  --warning:   #f59e0b;
  --error:     #ef4444;
  --info:      var(--blue-500);

  /* ── Semantic Color Tokens ─────────────────────────────── */

  /* Backgrounds */
  --color-bg:           var(--white);
  --color-bg-subtle:    var(--gray-50);
  --color-bg-muted:     var(--gray-100);
  --color-bg-dark:      var(--navy-900);
  --color-bg-darker:    var(--navy-950);
  --color-bg-dark-mid:  var(--navy-800);

  /* Foreground / Text */
  --color-text:         var(--navy-900);
  --color-text-muted:   var(--gray-500);
  --color-text-subtle:  var(--gray-400);
  --color-text-inverted: var(--white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* Brand / Primary */
  --color-primary:      var(--teal-500);
  --color-primary-hover: var(--teal-400);
  --color-primary-active: var(--teal-600);
  --color-primary-subtle: rgba(61, 189, 176, 0.12);

  /* Accent / Secondary */
  --color-accent:       var(--blue-500);
  --color-accent-hover: var(--blue-400);

  /* Borders */
  --color-border:       var(--gray-200);
  --color-border-dark:  rgba(255, 255, 255, 0.08);
  --color-border-focus: var(--teal-500);

  /* ── Brand Gradients ───────────────────────────────────── */
  --gradient-brand:     linear-gradient(135deg, var(--blue-500) 0%, var(--teal-500) 100%);
  --gradient-brand-arc: linear-gradient(90deg, var(--blue-500) 0%, var(--teal-500) 100%);
  --gradient-dark:      linear-gradient(180deg, var(--navy-950) 0%, var(--navy-800) 100%);
  --gradient-hero:      linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 60%, #1a3550 100%);

  /* ── Typography ────────────────────────────────────────── */

  /* Font families */
  --font-display:  'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Font weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Type scale — fluid (clamp: min, preferred, max) */
  --text-xs:    clamp(0.688rem, 0.65rem + 0.19vw,  0.75rem);    /* 11–12px */
  --text-sm:    clamp(0.813rem, 0.77rem + 0.22vw,  0.875rem);   /* 13–14px */
  --text-base:  clamp(1rem,     0.96rem + 0.2vw,   1.063rem);   /* 16–17px */
  --text-lg:    clamp(1.125rem, 1.05rem + 0.38vw,  1.25rem);    /* 18–20px */
  --text-xl:    clamp(1.25rem,  1.14rem + 0.56vw,  1.5rem);     /* 20–24px */
  --text-2xl:   clamp(1.5rem,   1.33rem + 0.85vw,  2rem);       /* 24–32px */
  --text-3xl:   clamp(1.875rem, 1.6rem + 1.38vw,   2.5rem);     /* 30–40px */
  --text-4xl:   clamp(2.25rem,  1.85rem + 2vw,     3.25rem);    /* 36–52px */
  --text-5xl:   clamp(3rem,     2.4rem + 3vw,      4.5rem);     /* 48–72px */
  --text-6xl:   clamp(3.75rem,  2.9rem + 4.25vw,   6rem);       /* 60–96px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* ── Shadows / Elevation ───────────────────────────────── */
  --shadow-1:  0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-2:  0 4px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-3:  0 8px 16px rgba(0,0,0,0.10), 0 24px 64px rgba(0,0,0,0.16);
  --shadow-teal: 0 4px 20px rgba(61, 189, 176, 0.3);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,0.08);

  /* ── Animation ─────────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  400ms;

  /* ── Z-index ───────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* ── Base Semantic HTML ──────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); font-weight: var(--fw-semibold); }

p  { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text); }
p.lead { font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--lh-relaxed); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out-quart);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

small { font-size: var(--text-sm); color: var(--color-text-muted); }
code  { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-bg-muted); padding: 0.1em 0.4em; border-radius: var(--radius-sm); }
pre   { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--navy-900); color: var(--white); padding: var(--space-6); border-radius: var(--radius-lg); overflow-x: auto; }

label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text); }
caption { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }