/* ============================================================
   RAIDO ELECTRONICS — DESIGN TOKENS
   Direction: full black by default, Hot Orange as the main accent.
   Persian Green moves to a supporting role (not dominant).

   Every color pair marked ✓ is verified against
   WCAG 2.1. The noted ratio is against --rd-bg (#000000).
   ============================================================ */

:root {
  /* ---------- 1. NEUTRALS ----------
     Ramp anchored to the hue of JET (#343533): a neutral with a hint
     of green (G > R > B). Keeps the brand's coolness without drifting
     to blue the way a pure gray would. */

  --rd-black:        #000000;  /* canvas — the default */
  --rd-surface-1:    #0B0C0B;  /* cards, panels on black */
  --rd-surface-2:    #131412;  /* mid elevation, inputs */
  --rd-surface-3:    #1C1D1A;  /* surface hover */
  --rd-border:       #262825;  /* decorative borders (1px hairline) */
  --rd-border-loud:  #3A3C38;  /* focus/state borders */
  --rd-jet:          #343533;  /* official brand neutral */
  --rd-jet-light:    #4A4B48;  /* disabled, strong separators */
  --rd-muted:        #9A9D97;  /* secondary text — 7.6:1 ✓ AAA */
  --rd-white:        #FFFFFF;  /* primary text — 21:1 ✓ */

  /* ---------- 2. MAIN ACCENT — ORANGE ----------
     Two oranges with distinct, non-interchangeable roles:
     HOT is the identity (the logo dot, surfaces, graphics).
     ORANGE is the text-safe one: 7.0:1 vs HOT's 5.3:1. */

  --rd-accent:        #E74717;  /* HOT ORANGE — 5.3:1 ✓ AA */
  --rd-accent-strong: #F45A2A;  /* hover for --rd-accent */
  --rd-accent-text:   #ED721B;  /* ORANGE — links and small text, 7.0:1 ✓ AAA */
  --rd-accent-dim:    rgba(231, 71, 23, 0.14);  /* badge/tag backgrounds */
  --rd-on-accent:     #000000;  /* ALWAYS black on orange.
                                   White on HOT ORANGE gives 4.0:1 → fails AA. */

  /* ---------- 3. SUPPORT — TEAL ----------
     Demoted to a technical role: spec labels, OK states, data-viz,
     the cool counterweight. Never competes with orange for attention. */

  --rd-teal:       #66A8A6;  /* PERSIAN GREEN — 7.7:1 ✓ AAA */
  --rd-teal-light: #89CBC5;  /* TIFFANY BLUE — 11.4:1 ✓ */
  --rd-teal-dim:   rgba(102, 168, 166, 0.12);

  /* ---------- 4. SEMANTIC ----------
     ALWAYS use these in product code, not the raw values above. */

  --rd-bg:            var(--rd-black);
  --rd-bg-elevated:   var(--rd-surface-1);
  --rd-text:          var(--rd-white);
  --rd-text-secondary: var(--rd-muted);
  --rd-text-accent:   var(--rd-accent-text);
  --rd-link:          var(--rd-accent-text);
  --rd-link-hover:    var(--rd-accent-strong);
  --rd-focus-ring:    var(--rd-accent-text);  /* 7.0:1 — visible on everything */

  /* ---------- 5. TYPOGRAPHY ----------
     There is no web license for Brandon Grotesque or Avenir Next
     (the brandbook's .ttc is a macOS system font, not embeddable).
     Fallbacks from the manual §4.3, self-hostable and variable. */

  --rd-font-display: "Montserrat", "Inter", system-ui, sans-serif;
  --rd-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --rd-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Weights: Thin (100/200) ONLY for display ≥48px.
     Below that it breaks down optically on black. */
  --rd-weight-display: 200;
  --rd-weight-heading: 300;
  --rd-weight-body:    400;
  --rd-weight-strong:  600;

  /* Fluid scale */
  --rd-text-hero: clamp(2.75rem, 1.2rem + 6.2vw, 6rem);
  --rd-text-h1:   clamp(2.25rem, 1.3rem + 3.8vw, 4rem);
  --rd-text-h2:   clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --rd-text-h3:   clamp(1.25rem, 1rem + 1vw, 1.625rem);
  --rd-text-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --rd-text-sm:   0.9375rem;
  --rd-text-label: 0.75rem;

  /* Tracking — the manual's "airy" signature (§4.2) */
  --rd-track-display: 0.14em;  /* large uppercase */
  --rd-track-label:   0.22em;  /* eyebrows, labels, nav */
  --rd-track-body:    0;       /* never force tracking on paragraphs */

  --rd-leading-tight: 1.08;
  --rd-leading-body:  1.65;

  /* ---------- 6. SPACING ----------
     8px base scale. The large jumps exist because generous negative
     space is a brand requirement (§5.1), not decoration. */

  --rd-space-1: 0.25rem;
  --rd-space-2: 0.5rem;
  --rd-space-3: 0.75rem;
  --rd-space-4: 1rem;
  --rd-space-6: 1.5rem;
  --rd-space-8: 2rem;
  --rd-space-12: 3rem;
  --rd-space-16: 4rem;
  --rd-space-24: 6rem;
  --rd-space-32: 8rem;
  --rd-section: clamp(5rem, 10vw, 10rem);  /* breathing room between sections */

  --rd-container: 1200px;
  --rd-measure: 68ch;  /* max paragraph width */

  /* ---------- 7. SHAPE AND MOTION ----------
     Restrained radii: the brand is geometric, not rounded. */

  --rd-radius-sm: 2px;
  --rd-radius:    4px;
  --rd-radius-lg: 8px;

  --rd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rd-duration: 200ms;

  /* ---------- 8. LAYERS ---------- */
  --rd-z-base: 0;
}

/* ============================================================
   FORBIDDEN COMBINATIONS — not opinion, these are measured ratios
   ------------------------------------------------------------
   ✗ white on --rd-teal ................ 2.7:1
   ✗ --rd-accent on --rd-teal .......... 1.5:1  (nearly invisible)
   ✗ --rd-accent-text on --rd-teal ..... 1.1:1
   ✗ --rd-accent on --rd-teal-light .... 1.6:1
   ✗ white on --rd-accent .............. 4.0:1  (use --rd-on-accent)

   Root cause: Persian Green (L≈0.336) and Orange (L≈0.301) have
   nearly identical luminance. Teal & orange contrast in HUE, which
   works in film but not in text. Always separate them with black.
   ============================================================ */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rd-bg);
  color: var(--rd-text);
  font-family: var(--rd-font-body);
  font-size: var(--rd-text-body);
  font-weight: var(--rd-weight-body);
  line-height: var(--rd-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--rd-font-display);
  font-weight: var(--rd-weight-heading);
  line-height: var(--rd-leading-tight);
  text-transform: uppercase;
  letter-spacing: var(--rd-track-display);
  margin: 0;
}

h1 { font-size: var(--rd-text-h1); font-weight: var(--rd-weight-display); }
h2 { font-size: var(--rd-text-h2); }
h3 { font-size: var(--rd-text-h3); letter-spacing: 0.08em; }

p { max-width: var(--rd-measure); margin: 0 0 var(--rd-space-4); }

a { color: var(--rd-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rd-link-hover); }

:focus-visible {
  outline: 2px solid var(--rd-focus-ring);
  outline-offset: 3px;
}

/* ---------- Patterns ---------- */

/* Eyebrow / label: uppercase, wide tracking. Teal when it is
   technical, orange when it marks a featured section. */
.rd-label {
  font-size: var(--rd-text-label);
  font-weight: var(--rd-weight-strong);
  text-transform: uppercase;
  letter-spacing: var(--rd-track-label);
  color: var(--rd-teal);
}
.rd-label--accent { color: var(--rd-accent-text); }

/* Primary CTA — the only large orange surface on the page */
.rd-btn {
  display: inline-block;
  padding: var(--rd-space-3) var(--rd-space-8);
  background: var(--rd-accent);
  color: var(--rd-on-accent);
  font-family: var(--rd-font-body);
  font-size: var(--rd-text-sm);
  font-weight: var(--rd-weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border: 1px solid var(--rd-accent);
  border-radius: var(--rd-radius);
  transition: background var(--rd-duration) var(--rd-ease);
}
.rd-btn:hover { background: var(--rd-accent-strong); color: var(--rd-on-accent); }

.rd-btn--ghost {
  background: transparent;
  color: var(--rd-text);
  border-color: var(--rd-border-loud);
}
.rd-btn--ghost:hover { background: var(--rd-surface-2); color: var(--rd-text); border-color: var(--rd-accent); }

.rd-card {
  background: var(--rd-surface-1);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  padding: var(--rd-space-8);
}

/* ---------- Logo ----------
   There are two file families and they are NOT interchangeable:

   raido-logo.svg / raido-r.svg          → letters in currentColor.
       ONLY work inline in the DOM (<svg> pasted into the HTML, or <use>).
       With <img src> or background-image the SVG loads as a separate
       document, inherits nothing from the page, and currentColor falls back to black.

   raido-logo-white.svg / raido-r-white.svg → letters in #FFFFFF.
       Work in any context: <img>, background-image, inline, CSS.
       This is the default for this system (black background).

   The dot is fixed at #E74717 in both: it never inherits, never changes. */

.rd-logo { color: var(--rd-text); display: block; }

/* "R" watermark cropped by the viewport.
   With <img> it cannot be recolored — use the white file and dim it
   with opacity. Inline does accept color: var(--rd-surface-2). */
.rd-watermark {
  position: absolute;
  color: var(--rd-surface-2);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: var(--rd-z-base);
}

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