/*
 * RadioCheck — Brand Design System
 * Single source of truth for all design tokens.
 * Import this file in every frontend page:
 *   <link rel="stylesheet" href="/brand.css">              (website)
 *   <link rel="stylesheet" href="../frontend/brand.css">   (HUD/settings)
 *   <link rel="stylesheet" href="brand.css">               (same-dir)
 *
 * Last updated: 2026-03-18 (Session 56)
 * Full brand spec: docs/BRANDING.md
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=JetBrains+Mono:wght@400;700;800&family=DM+Mono:wght@300;400;500&display=swap');

/* ── Brand tokens (rc- prefixed = canonical) ───────────────────────────────── */
:root {
  /* Accent */
  --rc-accent:        #f8133e;
  --rc-accent-glow:   rgba(248, 19, 62, 0.28);
  --rc-accent-lo:     #2a0510;
  --rc-accent-hi:     #ff3a62;

  /* Backgrounds */
  --rc-bg:            #0a0a0c;
  --rc-surface:       #111116;
  --rc-surface-hi:    #18181f;
  --rc-surface-glass: rgba(17, 17, 22, 0.6);

  /* Borders */
  --rc-border:        #1e1e28;
  --rc-border-hi:     #2e2e3a;
  --rc-border-glass:  rgba(255, 255, 255, 0.06);

  /* Text */
  --rc-text:          #d8d8e0;
  --rc-muted:         #585868;
  --rc-white:         #ffffff;

  /* Semantic */
  --rc-green:         #26d97f;
  --rc-green-lo:      #07311e;
  --rc-amber:         #f0a830;
  --rc-amber-lo:      #302008;
  --rc-cyan:          #00c8ff;
  --rc-purple:        #a855f7;
  --rc-gold:          #efbc4f;

  /* Typography */
  --rc-font-head:     'Barlow Condensed', sans-serif;
  --rc-font-mono:     'JetBrains Mono', monospace;
  --rc-font-body:     'DM Mono', monospace;

  /* Spacing */
  --rc-space-xs:      0.25rem;
  --rc-space-sm:      0.5rem;
  --rc-space-md:      1rem;
  --rc-space-lg:      2rem;
  --rc-space-xl:      4rem;

  /* Radius */
  --rc-radius-sm:     3px;
  --rc-radius-md:     6px;

  /* Transitions */
  --rc-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --rc-transition:    0.4s var(--rc-ease);
  --rc-transition-fast: 0.2s ease;

  /* ── Backward-compatible aliases ──────────────────────────────────────────
   * Pages using --accent, --bg, --surface etc. work without any CSS changes.
   * Pages only need to remove their own :root colour blocks after importing.
   * ───────────────────────────────────────────────────────────────────────── */
  --accent:           var(--rc-accent);
  --accent-glow:      var(--rc-accent-glow);
  --accent-lo:        var(--rc-accent-lo);
  --accent-hi:        var(--rc-accent-hi);

  --bg:               var(--rc-bg);
  --surface:          var(--rc-surface);
  --surface-hi:       var(--rc-surface-hi);

  --border:           var(--rc-border);
  --border-hi:        var(--rc-border-hi);

  --text:             var(--rc-text);
  --muted:            var(--rc-muted);

  --green:            var(--rc-green);
  --green-lo:         var(--rc-green-lo);
  --amber:            var(--rc-amber);
  --amber-lo:         var(--rc-amber-lo);
  --cyan:             var(--rc-cyan);
  --gold:             var(--rc-gold);

  --head:             var(--rc-font-head);
  --mono:             var(--rc-font-body);
  --jb:               var(--rc-font-mono);

  /* Aliases for pages using different naming conventions */
  --red:              var(--rc-accent);   /* tuning: --red = accent */
  --ink:              var(--rc-text);     /* tuning: --ink = text */
  --dim:              var(--rc-muted);    /* tuning: --dim = muted */
  --lime:             var(--rc-green);    /* tuning: --lime = green */
  --bg-lo:            #08080a;            /* settings: darker nested bg */
  --radius:           4px;
  --tr:               180ms ease;
}

/* ── Carbon fibre texture ───────────────────────────────────────────────────── */
.rc-carbon, .carbon-bg {
  background-color: var(--rc-bg);
  background-image:
    radial-gradient(black 15%, transparent 16%),
    radial-gradient(black 15%, transparent 16%),
    radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 20%),
    radial-gradient(rgba(255, 255, 255, 0.05) 15%, transparent 20%);
  background-position: 0 0, 8px 8px, 0 1px, 8px 9px;
  background-size: 16px 16px;
  background-attachment: fixed;
}

/* ── Glass presets ──────────────────────────────────────────────────────────── */
.rc-glass-nav {
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rc-border-glass);
}

.rc-glass-panel {
  background: var(--rc-surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--rc-border-glass);
}

.rc-glass-subtle {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rc-border-glass);
}

/* ── Scan lines ─────────────────────────────────────────────────────────────── */
.rc-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(255, 255, 255, 0.012) 2px, rgba(255, 255, 255, 0.012) 4px
  );
  z-index: 0;
}

/* ── Glow pulse ─────────────────────────────────────────────────────────────── */
@keyframes rc-glow-pulse {
  0%   { opacity: 0.5;  transform: scale(1);    }
  100% { opacity: 1.0;  transform: scale(1.15); }
}

/* ── Fade-up scroll animation ───────────────────────────────────────────────── */
.rc-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rc-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}