/* RawSRV Design System — Colors & Typography
   Import Google Fonts before this file:
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
*/

/* ─── COLOR TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Brand Blues */
  --brand-navy-deep:   #021038;
  --brand-navy:        #051866;
  --brand-navy-mid:    #0D2A7A;
  --brand-blue:        #1A40B0;
  --brand-accent:      #4A7CFF;
  --brand-accent-soft: #7AA0FF;

  /* Brand Gradient */
  --gradient-brand: linear-gradient(135deg, #051866, #021038 80%);
  --gradient-brand-hover: linear-gradient(135deg, #0D2A7A, #051866 80%);

  /* Neutrals — Dark */
  --neutral-900: #0A0E1A;
  --neutral-800: #0F1525;
  --neutral-700: #1A2035;
  --neutral-600: #283050;
  --neutral-500: #3D4A6B;
  --neutral-400: #5A6A8A;
  --neutral-300: #8B95A8;
  --neutral-200: #C2C9D6;
  --neutral-100: #E8ECF3;
  --neutral-50:  #F4F6FB;
  --neutral-0:   #FFFFFF;

  /* Semantic — Surface */
  --surface-page:       var(--neutral-900);
  --surface-card:       var(--neutral-800);
  --surface-elevated:   var(--neutral-700);
  --surface-overlay:    rgba(255,255,255,0.05);
  --surface-border:     rgba(255,255,255,0.08);
  --surface-border-strong: rgba(255,255,255,0.16);

  /* Semantic — Foreground */
  --fg-primary:   #FFFFFF;
  --fg-secondary: var(--neutral-300);
  --fg-tertiary:  var(--neutral-400);
  --fg-disabled:  var(--neutral-500);
  --fg-inverted:  var(--neutral-900);

  /* Semantic — Interactive */
  --interactive-default:  var(--brand-accent);
  --interactive-hover:    var(--brand-accent-soft);
  --interactive-active:   var(--brand-blue);
  --interactive-focus:    var(--brand-accent);

  /* Semantic — Status */
  --status-success:      #22C55E;
  --status-success-bg:   rgba(34,197,94,0.12);
  --status-error:        #EF4444;
  --status-error-bg:     rgba(239,68,68,0.12);
  --status-warning:      #F59E0B;
  --status-warning-bg:   rgba(245,158,11,0.12);
  --status-info:         var(--brand-accent);
  --status-info-bg:      rgba(74,124,255,0.12);

  /* ─── SPACING ───────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─── BORDER RADIUS ─────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* ─── SHADOWS ───────────────────────────────────────────────────── */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.6);

  /* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   20px;
  --text-lg:   24px;
  --text-xl:   32px;
  --text-2xl:  48px;
  --text-3xl:  64px;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ─── ANIMATION ─────────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-micro:    100ms;
  --duration-standard: 200ms;
  --duration-enter:    300ms;
}

/* ─── SEMANTIC TYPE STYLES ────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

small {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

a {
  color: var(--interactive-default);
  text-decoration: none;
  transition: color var(--duration-standard) var(--ease-out-expo);
}
a:hover { color: var(--interactive-hover); }