/* =========================================================
   CYBSEC · Sovereign Cyber Governance Identity
   Colors + Typography tokens
   v1.0 — 2026
   Fonty (Inter / Inter Tight / IBM Plex Mono) sa načítavajú
   samostatne cez wp_register_style('cs-google-fonts', ...) v
   register.php — tento súbor na ne len nadväzuje ako dependency,
   žiadny @import (rýchlejšie, neblokujúce načítanie).
   ========================================================= */

:root {
  /* ---------- Primary palette (sovereign) ---------- */
  --cs-midnight:        #122347;   /* Oxford Blue — primary, dominant */
  --cs-oxford:          #122347;   /* Canonical alias */
  --cs-navy-mid:        #0A3568;   /* Secondary background, UI surfaces */
  --cs-navy-light:      #1A4A82;   /* Hover states, subtle accents */
  --cs-gold:            #D4A017;   /* Primary accent, logo gold */
  --cs-gold-light:      #E8C254;   /* Secondary accent, highlights */
  --cs-cream:           #FAF8F2;   /* Light institutional background */
  --cs-white:           #FFFFFF;   /* Pure document background */
  --cs-slate-dark:      #2D3748;   /* Body text on light surfaces */

  /* ---------- Extended neutrals (derived, sovereign) ---------- */
  --cs-ink:             #001028;   /* Deepest Oxford — embossed seal, print */
  --cs-navy-700:        #042A55;   /* Card surface on Oxford */
  --cs-navy-600:        var(--cs-navy-mid);
  --cs-rule:            #1A3D6B;   /* Hairline rule on dark */
  --cs-rule-light:      #E6E1D2;   /* Hairline rule on cream */
  --cs-slate-mid:       #4A5568;
  --cs-slate-light:     #718096;
  --cs-mute:            #A0AEC0;

  /* ---------- Sovereign gold scale ---------- */
  --cs-gold-50:         #FBF6E3;
  --cs-gold-100:        #F2E5B0;
  --cs-gold-300:        var(--cs-gold-light);
  --cs-gold-500:        var(--cs-gold);
  --cs-gold-700:        #9F8438;
  --cs-gold-900:        #6B5824;

  /* ---------- Semantic — SOC severity ---------- */
  --cs-critical:        #C8453C;   /* Critical — restrained crimson */
  --cs-high:            #E07A2B;   /* High — institutional amber */
  --cs-medium:          var(--cs-gold);   /* Medium — gold (caution) */
  --cs-low:             #4E8E7C;   /* Low — slate-jade */
  --cs-info:            #5B7BB3;   /* Informational — slate-blue */

  /* ---------- Semantic — foreground / background ---------- */
  --cs-bg:              var(--cs-midnight);
  --cs-bg-elevated:     var(--cs-navy-mid);
  --cs-bg-hover:        var(--cs-navy-light);
  --cs-fg:              var(--cs-cream);
  --cs-fg-mute:         #B6C0D9;
  --cs-fg-faint:        #7F8DB1;
  --cs-accent:          var(--cs-gold);
  --cs-accent-hover:    var(--cs-gold-light);

  /* Light surface tokens (for cream institutional docs) */
  --cs-bg-light:        var(--cs-cream);
  --cs-bg-light-elev:   var(--cs-white);
  --cs-fg-light:        var(--cs-slate-dark);
  --cs-fg-light-mute:   var(--cs-slate-mid);

  /* ---------- Type families ---------- */
  --cs-font-ui:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cs-font-display:    'Inter Tight', 'Neue Haas Grotesk Display', 'Helvetica Now Display', 'Helvetica Neue', sans-serif;
  --cs-font-mono:       'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ---------- Type scale (px) ---------- */
  --cs-fs-display-xl:   56px;
  --cs-fs-h1:           40px;
  --cs-fs-h2:           32px;
  --cs-fs-h3:           24px;
  --cs-fs-h4:           20px;
  --cs-fs-body-l:       18px;
  --cs-fs-body:         16px;
  --cs-fs-body-s:       14px;
  --cs-fs-caption:      12px;
  --cs-fs-tech:         13px;
  --cs-fs-eyebrow:      11px;

  /* ---------- Line heights ---------- */
  --cs-lh-tight:        1.05;
  --cs-lh-snug:         1.2;
  --cs-lh-normal:       1.45;
  --cs-lh-relaxed:      1.6;

  /* ---------- Letter spacing (sovereign discipline) ---------- */
  --cs-tracking-wordmark: 0.42em;
  --cs-tracking-eyebrow:  0.22em;
  --cs-tracking-caps:     0.14em;
  --cs-tracking-tight:    -0.02em;
  --cs-tracking-normal:   0;

  /* ---------- Spacing — 4px base grid ---------- */
  --cs-space-0:   0;
  --cs-space-1:   4px;
  --cs-space-2:   8px;
  --cs-space-3:   12px;
  --cs-space-4:   16px;
  --cs-space-5:   24px;
  --cs-space-6:   32px;
  --cs-space-7:   48px;
  --cs-space-8:   64px;
  --cs-space-9:   96px;
  --cs-space-10: 128px;

  /* ---------- Radii (restrained — institutional) ---------- */
  --cs-radius-0:   0;
  --cs-radius-1:   2px;
  --cs-radius-2:   4px;
  --cs-radius-3:   6px;
  --cs-radius-pill: 999px;

  /* ---------- Borders / hairlines ---------- */
  --cs-border:          1px solid var(--cs-rule);
  --cs-border-light:    1px solid var(--cs-rule-light);
  --cs-border-gold:     1px solid var(--cs-gold);

  /* ---------- Shadows — institutional, low-drama ---------- */
  --cs-shadow-1: 0 1px 2px rgba(0,16,40,0.30);
  --cs-shadow-2: 0 4px 16px rgba(0,16,40,0.35);
  --cs-shadow-3: 0 12px 40px rgba(0,16,40,0.45);
  --cs-shadow-gold: 0 0 0 1px rgba(212,160,23,0.35), 0 8px 24px rgba(212,160,23,0.10);

  /* ---------- Grids / layout ---------- */
  --cs-grid-gutter: 24px;
  --cs-content-max: 1280px;
  --cs-doc-max:     768px;
}

/* =========================================================
   Semantic / element-level styles
   ========================================================= */

.cs-display-xl{
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: var(--cs-fs-display-xl);
  line-height: var(--cs-lh-tight);
  letter-spacing: var(--cs-tracking-tight);
}
.cs-h1{
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: var(--cs-fs-h1);
  line-height: var(--cs-lh-snug);
  letter-spacing: var(--cs-tracking-tight);
}
.cs-h2{
  font-family: var(--cs-font-ui);
  font-weight: 600;
  font-size: var(--cs-fs-h2);
  line-height: var(--cs-lh-snug);
  letter-spacing: -0.01em;
}
.cs-h3{
  font-family: var(--cs-font-ui);
  font-weight: 600;
  font-size: var(--cs-fs-h3);
  line-height: var(--cs-lh-snug);
}
.cs-h4{
  font-family: var(--cs-font-ui);
  font-weight: 600;
  font-size: var(--cs-fs-h4);
  line-height: var(--cs-lh-snug);
}
.cs-body-l{
  font-family: var(--cs-font-ui);
  font-weight: 400;
  font-size: var(--cs-fs-body-l);
  line-height: var(--cs-lh-relaxed);
}
.cs-body{
  font-family: var(--cs-font-ui);
  font-weight: 400;
  font-size: var(--cs-fs-body);
  line-height: var(--cs-lh-normal);
}
.cs-caption{
  font-family: var(--cs-font-ui);
  font-weight: 500;
  font-size: var(--cs-fs-caption);
  line-height: var(--cs-lh-normal);
  letter-spacing: var(--cs-tracking-caps);
  text-transform: uppercase;
}
.cs-eyebrow{
  font-family: var(--cs-font-ui);
  font-weight: 600;
  font-size: var(--cs-fs-eyebrow);
  letter-spacing: var(--cs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cs-gold);
}
.cs-tech{
  font-family: var(--cs-font-mono);
  font-weight: 400;
  font-size: var(--cs-fs-tech);
  line-height: 1.5;
  letter-spacing: 0;
}
.cs-wordmark{
  font-family: var(--cs-font-display);
  font-weight: 600;
  letter-spacing: var(--cs-tracking-wordmark);
  text-transform: uppercase;
}

.cs-surface-dark{ background: var(--cs-midnight); color: var(--cs-cream); }
.cs-surface-mid{  background: var(--cs-navy-mid); color: var(--cs-cream); }
.cs-surface-light{ background: var(--cs-cream); color: var(--cs-slate-dark); }
.cs-rule-gold{ height:1px; background: linear-gradient(90deg, transparent, var(--cs-gold) 20%, var(--cs-gold) 80%, transparent); }