/*
  SECURE PRIDE DESIGN SYSTEM
  colors_and_type.css — CSS custom properties
  Derived from design-system-v2.jsx (T object) + editorial.css
  Dark-first. Google Fonts: Orbitron, Rajdhani, Source Sans 3, JetBrains Mono
*/

/* ─── LOCAL BRAND FONTS ──────────────────────────────────────── */

/* Orbitron — Display / Hero titles */
@font-face {
  font-family: 'Orbitron';
  src: url('fonts/orbitron-latin.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* Rajdhani — Headings / UI labels */
@font-face {
  font-family: 'Rajdhani';
  src: url('fonts/rajdhani-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('fonts/rajdhani-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('fonts/rajdhani-700-latin-ext.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rajdhani';
  src: url('fonts/rajdhani-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — Body / Prose (replaces Source Sans 3) */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-cyrillic-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-greek-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-greek.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-vietnamese.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — Code / Data (CDN fallback; no local file provided) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── BASE COLOR TOKENS ──────────────────────────────────────── */
:root {
  /* Surfaces (dark-first) */
  --sp-void:         #05050f;
  --sp-bg:           #0a0a1a;
  --sp-surface:      #111128;
  --sp-elevated:     #1a1a35;
  --sp-border:       #2a2a50;
  --sp-border-glow:  #3a3a6a;

  /* Light mode surfaces (print / docs only) */
  --sp-light-bg:      #faf8f5;
  --sp-light-surface: #ffffff;
  --sp-light-elevated:#f0ede8;
  --sp-light-border:  #d4cfc7;

  /* Brand core — gem tones on brass/indigo duet */
  --sp-teal:         #0a7e74;
  --sp-deep-purple:  #2a1f54;
  --sp-indigo:       #0f1028;
  --sp-indigo-slate: #1a1f3e;
  --sp-indigo-hero:  #2a1f54;
  --sp-cyan:         #0fb5c9;
  --sp-hot-pink:     #c81e6c;
  --sp-violet:       #8b2ecc;

  /* Brass / kintsugi palette — from shield mark */
  --sp-brass-highlight: #f5d07a;
  --sp-brass-light:     #e2b25b;
  --sp-brass:           #b48438;
  --sp-brass-mid:       #8a5f1e;
  --sp-brass-dark:      #4a341a;
  --sp-brass-shadow:    #2a1c08;

  /* Fire opal — kintsugi voice */
  --sp-opal-cream:   #ffe8b8;
  --sp-opal-ember:   #ffa94d;
  --sp-opal:         #ff5f1f;
  --sp-opal-core:    #d63030;
  --sp-opal-deep:    #7a1f2e;

  /* Gem tones (was: neon spectrum — now jeweled) */
  --sp-gem-citrine:    #e8a500;
  --sp-gem-emerald:    #10c96a;
  --sp-gem-sapphire:   #0fb5c9;
  --sp-gem-amethyst:   #8b2ecc;
  --sp-gem-tourmaline: #c81e6c;

  /* Legacy neon aliases (kept for back-compat, remapped to gems) */
  --sp-neon-red:     #c8321e;
  --sp-neon-orange:  #e8871a;
  --sp-neon-yellow:  #e8a500;
  --sp-neon-green:   #10c96a;
  --sp-neon-blue:    #3a6ad9;
  --sp-neon-violet:  #8b2ecc;
  --sp-neon-pink:    #c81e6c;
  --sp-neon-magenta: #b23aa8;
  --sp-neon-purple:  #6a3dcc;
  --sp-neon-cyan:    #0fb5c9;
  --sp-neon-teal:    #0a7e74;

  /* Status / semantic */
  --sp-status-protected: #10c96a;
  --sp-status-warning:   #e8a500;
  --sp-status-blocked:   #c81e6c;
  --sp-status-info:      #0fb5c9;

  /* Text */
  --sp-text-primary:   #eeeef6;
  --sp-text-secondary: #9898b8;
  --sp-text-muted:     #5a5a78;
  --sp-text-inverse:   #0a0a1a;

  /* ─── SEMANTIC COLOR VARS ────────────────────────────────── */
  --color-bg:              var(--sp-bg);
  --color-surface:         var(--sp-surface);
  --color-elevated:        var(--sp-elevated);
  --color-border:          var(--sp-border);
  --color-border-hover:    var(--sp-border-glow);
  --color-primary:         var(--sp-cyan);
  --color-primary-dark:    var(--sp-teal);
  --color-accent:          var(--sp-violet);
  --color-danger:          var(--sp-hot-pink);
  --color-success:         var(--sp-status-protected);
  --color-warning:         var(--sp-status-warning);
  --color-info:            var(--sp-status-info);
  --color-fg:              var(--sp-text-primary);
  --color-fg2:             var(--sp-text-secondary);
  --color-fg3:             var(--sp-text-muted);

  /* ─── GRADIENTS ──────────────────────────────────────────── */
  --grad-rainbow:  linear-gradient(135deg, #c8321e, #e8871a, #e8a500, #10c96a, #3a6ad9, #8b2ecc, #c81e6c);
  --grad-neon:     linear-gradient(135deg, #0fb5c9, #8b2ecc, #c81e6c);
  --grad-gems:     linear-gradient(135deg, #e8a500, #10c96a 30%, #0fb5c9 55%, #8b2ecc 80%, #c81e6c);
  --grad-brand:    linear-gradient(135deg, #0fb5c9, #0a7e74);
  --grad-void:     linear-gradient(180deg, #05050f, #0a0a1a);
  --grad-indigo:   linear-gradient(135deg, #3a2e6e, #2a1f54 55%, #1a1740);
  --grad-brass:    linear-gradient(135deg, #f5d07a, #b48438 45%, #6a4a1c);
  --grad-opal:     radial-gradient(circle at 35% 35%, #ffe8b8 0%, #ff9100 40%, #ff5f1f 75%, #d63030 100%);
  --grad-kintsugi: linear-gradient(90deg, #c8321e, #ff5f1f 14%, #e8871a 28%, #e8a500 42%, #10c96a 56%, #0fb5c9 70%, #8b2ecc 84%, #c81e6c);

  /* ─── GLOW EFFECTS ───────────────────────────────────────── */
  --glow-cyan:   0 0 10px rgba(15,181,201,0.22), 0 0 30px rgba(15,181,201,0.08);
  --glow-pink:   0 0 10px rgba(200,30,108,0.22), 0 0 30px rgba(200,30,108,0.08);
  --glow-violet: 0 0 10px rgba(139,46,204,0.22), 0 0 30px rgba(139,46,204,0.08);
  --glow-brass:  0 0 12px rgba(180,132,56,0.3), 0 0 28px rgba(180,132,56,0.12);
  --glow-opal:   0 0 14px rgba(255,95,31,0.35), 0 0 36px rgba(255,95,31,0.15);
  --glow-rainbow:0 0 20px rgba(200,30,108,0.28), 0 0 40px rgba(139,46,204,0.18), 0 0 60px rgba(15,181,201,0.12);

  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --font-heading: 'Rajdhani', 'Inter', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

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

  /* Type scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.5rem;    /* 56px */

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

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

  /* ─── SPACING ─────────────────────────────────────────────── */
  --sp-1:  0.25rem;  /* 4px  */
  --sp-2:  0.5rem;   /* 8px  */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */

  /* ─── BORDER RADIUS ──────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ─── MOTION ─────────────────────────────────────────────── */
  --motion-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow:  500ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-glow:  1.5s ease-in-out infinite alternate;
}


/* ─── SEMANTIC TYPE STYLES ───────────────────────────────────── */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-fg);
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  color: var(--color-fg);
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-fg);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-fg2);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-fg2);
}

.caption, .label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-fg3);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  color: var(--sp-cyan);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  overflow-x: auto;
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
}

/* Neon display text */
.display-neon {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--sp-cyan);
  text-shadow: 0 0 10px rgba(6,214,224,0.4), 0 0 30px rgba(6,214,224,0.15);
}

/* Section label bar */
.section-bar {
  display: inline-block;
  width: 4px;
  height: 1em;
  border-radius: 2px;
  background: var(--grad-neon);
  box-shadow: var(--glow-cyan);
  margin-right: var(--sp-3);
  vertical-align: middle;
}

/* ─── BASE RESETS (optional) ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a {
  color: var(--sp-cyan);
  text-underline-offset: 3px;
  transition: color var(--motion-fast);
}
a:hover { color: #fff; }

:focus-visible {
  outline: 2px solid var(--sp-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}