/* ============================================================
   GUARDIAN DESIGN SYSTEM — Colors & Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@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;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Base Color Tokens ──────────────────────────────────────── */
:root {
  /* Gold Palette */
  --gold-50:  #FDF8EC;
  --gold-100: #F9EAC0;
  --gold-200: #F5D98A;
  --gold-300: #F0C040;
  --gold-400: #D9A832;
  --gold-500: #C9952A;   /* Brand primary */
  --gold-600: #A87720;
  --gold-700: #8B6010;
  --gold-800: #6B4A0C;
  --gold-900: #3D2A06;

  /* Black / Dark Surfaces (warm-tinted to sit closer to the gold accent) */
  --black-950: #0C0A08;  /* Deepest bg */
  --black-900: #16130F;  /* App background */
  --black-800: #201D19;  /* Card surface */
  --black-700: #2D2924;  /* Elevated card */
  --black-600: #413C35;  /* Divider */
  --black-500: #5A544B;  /* Muted element */

  /* Gray Scale (warm-tinted to match the black/gold family, not neutral) */
  --gray-400: #8C867B;   /* Tertiary text */
  --gray-300: #AEA89C;   /* Secondary text */
  --gray-200: #BFB9AD;   /* Caption */
  --gray-100: #E3DED4;   /* Subdued body */
  --gray-50:  #F7F4EE;   /* Rarely used light */

  /* White */
  --white: #FFFFFF;

  /* Semantic Colors */
  --color-critical:  #EF4444;
  --color-critical-bg: rgba(239,68,68,0.12);
  --color-warning:   #EAB308;
  --color-warning-bg: rgba(234,179,8,0.12);
  --color-safe:      #22C55E;
  --color-safe-bg:   rgba(34,197,94,0.12);
  --color-info:      #3B82F6;
  --color-info-bg:   rgba(59,130,246,0.12);

  /* ── Semantic UI Tokens ─────────────────────────────────── */
  --bg-base:      var(--black-900);
  --bg-surface:   var(--black-800);
  --bg-elevated:  var(--black-700);
  --bg-overlay:   rgba(10,10,10,0.8);

  --border-subtle:  var(--black-600);
  --border-default: var(--black-500);
  --border-accent:  var(--gold-500);
  --border-danger:  var(--color-critical);

  --fg-primary:   var(--white);
  --fg-secondary: var(--gray-200);
  --fg-muted:     var(--gray-400);
  --fg-accent:    var(--gold-300);
  --fg-disabled:  var(--black-500);

  /* ── Gold Gradient ───────────────────────────────────────── */
  --gradient-gold: linear-gradient(135deg, #F0C040 0%, #C9952A 50%, #8B6010 100%);
  --gradient-gold-h: linear-gradient(90deg, #F0C040 0%, #C9952A 60%, #8B6010 100%);
  --gradient-dark: linear-gradient(180deg, #1E1E1E 0%, #0A0A0A 100%);
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,149,42,0.18) 0%, transparent 70%), var(--black-950);

  /* ── Shadows (warm-tinted toward the brand black, not pure #000) ── */
  --shadow-1: 0 1px 4px rgba(18,12,4,0.5);
  --shadow-2: 0 4px 16px rgba(18,12,4,0.7);
  --shadow-3: 0 16px 48px rgba(18,12,4,0.85);
  --shadow-gold: 0 0 24px rgba(201,149,42,0.35);
  --shadow-gold-sm: 0 0 10px rgba(201,149,42,0.25);

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:  2px;   /* badges, tags */
  --radius-md:  4px;   /* buttons, inputs */
  --radius-lg:  6px;   /* cards */
  --radius-xl:  8px;   /* modals, panels */

  /* ── Spacing (8px base) ──────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ── Typography Tokens ───────────────────────────────────── */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-heading: 'Rajdhani', 'Arial', sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;

  /* Sizes */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  96px;

  /* Line Heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-widest:0.12em;

  /* ── Animation ───────────────────────────────────────────── */
  --ease-guardian: cubic-bezier(0.2, 0, 0.1, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
}

/* ── Semantic Type Styles ────────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-primary);
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-primary);
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-primary);
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--gold-300);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.gold-text {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}