/* ==========================================================================
   DATA ARENA — Foundations
   Colors, typography, spacing, motion, effects.
   Import this single file to get every brand token.
   Font paths are relative to this CSS file (../fonts/).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* --- BRAND DISPLAY: Saira Extra Condensed (italic) --- */
@font-face {
  font-family: "Saira XCond";
  src: url("../fonts/Saira_ExtraCondensed-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saira XCond";
  src: url("../fonts/Saira_ExtraCondensed-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Saira XCond";
  src: url("../fonts/Saira_ExtraCondensed-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Saira XCond";
  src: url("../fonts/Saira_ExtraCondensed-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Saira XCond";
  src: url("../fonts/Saira_ExtraCondensed-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Saira XCond";
  src: url("../fonts/Saira_ExtraCondensed-BlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* --- BRAND BODY: Saira Condensed --- */
@font-face {
  font-family: "Saira Cond";
  src: url("../fonts/Saira_Condensed-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saira Cond";
  src: url("../fonts/Saira_Condensed-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- CORE PALETTE ----------------------------------------------------- */
  --da-red:            #D21F3C;
  --da-red-hot:        #FF2A4A;
  --da-red-deep:       #8E1228;

  --da-yellow:         #F7BB2B;
  --da-yellow-bright:  #FFD451;
  --da-yellow-deep:    #B8861A;

  --da-black:          #131313;
  --da-ink:            #1D1A20;
  --da-ink-2:          #26222B;
  --da-ink-3:          #322D38;

  --da-bone:           #E5E6E8;
  --da-bone-2:         #C9CBD0;
  --da-bone-3:         #8A8C93;

  /* --- SEMANTIC FOREGROUND --------------------------------------------- */
  --fg-1: var(--da-bone);
  --fg-2: var(--da-bone-2);
  --fg-3: var(--da-bone-3);
  --fg-inv: var(--da-ink);
  --fg-accent: var(--da-yellow);
  --fg-live: var(--da-red-hot);

  /* --- SEMANTIC BACKGROUND --------------------------------------------- */
  --bg-stage:   var(--da-black);
  --bg-surface: var(--da-ink);
  --bg-raised:  var(--da-ink-2);
  --bg-overlay: rgba(19, 19, 19, 0.78);

  /* --- BORDERS / DIVIDERS ---------------------------------------------- */
  --border-1: var(--da-ink-3);
  --border-2: rgba(229, 230, 232, 0.12);
  --border-accent: var(--da-yellow);
  --border-live: var(--da-red);

  /* --- DATA / STATUS --------------------------------------------------- */
  --status-live:    var(--da-red-hot);
  --status-warn:    var(--da-yellow);
  --status-good:    #3DDC97;
  --status-cold:    #2A8FFF;
  --status-mute:    var(--da-bone-3);

  /* --- TYPOGRAPHY: families ------------------------------------------- */
  --font-display: "Saira XCond", "Saira Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-tab:     "Saira Cond", "Saira Condensed", "Inter", -apple-system, sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* --- TYPOGRAPHY: scale ----------------------------------------------- */
  --fs-display:  clamp(56px, 8vw, 132px);
  --fs-h1:       clamp(40px, 5vw, 72px);
  --fs-h2:       clamp(32px, 3.5vw, 48px);
  --fs-h3:       24px;
  --fs-h4:       18px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-meta:     11px;

  --lh-tight:    0.92;
  --lh-snug:     1.05;
  --lh-base:     1.45;
  --lh-loose:    1.6;

  --ls-display:  -0.02em;
  --ls-meta:     0.14em;
  --ls-tab:      0.08em;

  /* --- SPACING (4pt) --------------------------------------------------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* --- RADII ----------------------------------------------------------- */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;
  --r-pill: 999px;

  /* --- SHADOWS / GLOWS ------------------------------------------------- */
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-pop:   0 0 0 1px var(--border-1), 0 16px 40px rgba(0,0,0,0.6);
  --glow-live:    0 0 0 2px rgba(255,42,74,0.35), 0 0 24px rgba(255,42,74,0.55);
  --glow-yellow:  0 0 0 2px rgba(247,187,43,0.35), 0 0 24px rgba(247,187,43,0.45);

  /* --- MOTION ---------------------------------------------------------- */
  --ease-broadcast: cubic-bezier(.2,.9,.1,1);
  --ease-snap:      cubic-bezier(.65,0,.35,1);
  --ease-glitch:    steps(3, end);
  --t-fast:   90ms;
  --t-base:   160ms;
  --t-slow:   320ms;

  /* --- EFFECTS --------------------------------------------------------- */
  --skew-tactical: -12deg;
  --skew-soft:     -6deg;
  --scanline-color: rgba(229, 230, 232, 0.04);

  /* --- COMPONENT SURFACE TOKENS (theme-aware) -------------------------- */
  --bg-header:      rgba(19, 19, 19, 0.92);
  --bg-header-drop: rgba(19, 19, 19, 0.97);
  --bg-banner-fade: rgba(19, 19, 19, 0.55);
}

/* ==========================================================================
   LIGHT THEME OVERRIDES
   Applied when: system prefers light AND no explicit override,
   OR data-theme="light" is set explicitly.
   ========================================================================== */

html[data-theme="light"] {
  --fg-1: #1A1714;
  --fg-2: #3D3A35;
  --fg-3: #766F66;
  --fg-inv: var(--da-ink);

  --bg-stage:   #F2F1EF;
  --bg-surface: #E5E2DD;
  --bg-raised:  #DDD9D4;
  --bg-overlay: rgba(242, 241, 239, 0.85);

  --border-1: rgba(26, 23, 20, 0.18);
  --border-2: rgba(26, 23, 20, 0.09);

  --scanline-color: rgba(26, 23, 20, 0.025);

  --bg-header:      rgba(242, 241, 239, 0.92);
  --bg-header-drop: rgba(242, 241, 239, 0.97);
  --bg-banner-fade: rgba(242, 241, 239, 0.55);

  --shadow-card: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 24px rgba(0,0,0,0.08);
  --shadow-pop:  0 0 0 1px var(--border-1), 0 16px 40px rgba(0,0,0,0.12);
}

/* ==========================================================================
   ELEMENT DEFAULTS
   ========================================================================== */

html, body {
  background: var(--bg-stage);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .da-h1, h2, .da-h2, h3, .da-h3, h4, .da-h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
}

.da-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

h1, .da-h1 { font-size: var(--fs-h1); }
h2, .da-h2 { font-size: var(--fs-h2); }
h3, .da-h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-tab); }
h4, .da-h4 { font-size: var(--fs-h4); letter-spacing: var(--ls-tab); }

p, .da-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

small, .da-small {
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.da-meta, .da-overline, .da-kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--fg-3);
}

.da-tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-tab);
}

code, kbd, pre, .da-mono, .da-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.da-num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.da-live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-1);
}
.da-live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--status-live);
  box-shadow: 0 0 12px var(--status-live);
  animation: da-pulse 1.2s ease-in-out infinite;
}
@keyframes da-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

.da-scanlines { position: relative; }
.da-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    var(--scanline-color) 2px,
    var(--scanline-color) 3px
  );
  mix-blend-mode: overlay;
}

.da-skew { transform: skewX(var(--skew-tactical)); }
.da-skew > * { transform: skewX(calc(var(--skew-tactical) * -1)); }

.da-bracket {
  position: relative;
  padding: var(--s-4) var(--s-5);
}
.da-bracket::before, .da-bracket::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--da-yellow);
}
.da-bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.da-bracket::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

::selection { background: var(--da-yellow); color: var(--da-ink); }

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--border-1) var(--bg-stage); }

/* WebKit / Blink */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-stage); }
::-webkit-scrollbar-thumb {
  background: var(--border-1);
  border-radius: var(--r-1);
  border: 2px solid var(--bg-stage);
  transition: background var(--t-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }
::-webkit-scrollbar-corner { background: var(--bg-stage); }