/* ============================================================
   R2 DIGITAL — DESIGN TOKENS
   Source of truth for the R2 brand. Import this file first,
   then build components against the CSS custom properties.
   Palette is derived directly from the logomark.
   Fonts: Space Grotesk (display) + Inter (body).
   ============================================================ */

/* Font loading (or self-host and remove this @import) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- BRAND CORE (from the logo) ---------- */
  --r2-ink:            #0B3041;  /* deepest logo edge — primary ink */
  --r2-orange:         #C04F15;  /* signal orange — primary accent  */
  --r2-orange-bright:  #E0703A;  /* accent for dark surfaces        */
  --r2-steel:          #506E7B;
  --r2-mist:           #9EADB4;
  --r2-silver:         #D6DDE0;
  --r2-white:          #FFFFFF;

  /* ---------- NEUTRAL SCALE (cool) ---------- */
  --ink-900: #0B3041;
  --ink-800: #133A4C;
  --ink-700: #1D485B;
  --ink-600: #2C5A6E;
  --ink-500: #506E7B;
  --ink-400: #7A929B;
  --ink-300: #9EADB4;
  --ink-200: #C3CDD3;
  --ink-100: #DCE2E7;
  --ink-050: #EEF0F4;
  --paper:   #F5F7FA;
  --white:   #FFFFFF;

  /* ---------- ACCENT SCALE ---------- */
  --orange-700: #8F380D;
  --orange-600: #A5410F;
  --orange-500: #C04F15;
  --orange-400: #E0703A;
  --orange-300: #EC9268;
  --orange-100: #F6E2D6;  /* tint wash */

  /* ---------- SUPPORT (states) ---------- */
  --success: #1A7F5A;
  --warning: #B8860B;
  --danger:  #B23B2E;
  --info:    #2C5A6E;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;

  /* fluid type scale (min 320px → max 1240px), 1.20 ratio */
  --step--2: clamp(0.6944rem, 0.66rem + 0.17vw, 0.7813rem);
  --step--1: clamp(0.8333rem, 0.79rem + 0.22vw, 0.9375rem);
  --step-0:  clamp(1.0000rem, 0.95rem + 0.27vw, 1.1250rem);
  --step-1:  clamp(1.2000rem, 1.13rem + 0.36vw, 1.3500rem);
  --step-2:  clamp(1.4400rem, 1.34rem + 0.49vw, 1.6200rem);
  --step-3:  clamp(1.7280rem, 1.60rem + 0.66vw, 1.9440rem);
  --step-4:  clamp(2.0736rem, 1.90rem + 0.88vw, 2.3328rem);
  --step-5:  clamp(2.4883rem, 2.25rem + 1.17vw, 2.7994rem);
  --step-6:  clamp(2.9860rem, 2.66rem + 1.55vw, 3.3592rem);
  --display: clamp(2.8rem, 1.9rem + 4.2vw, 4.6rem);   /* hero headline */

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.6;
  --tracking-tight: -0.02em;
  --tracking-caps:  0.18em;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---------- RADIUS ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-badge: 32px;   /* matches the logomark corner */
  --radius-pill: 999px;

  /* ---------- BORDERS & RINGS ---------- */
  --border-width: 1px;
  --focus-ring: 0 0 0 3px rgba(192, 79, 21, 0.35);

  /* ---------- SHADOWS (cool-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 48, 65, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 48, 65, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 48, 65, 0.10);
  --shadow-lg: 0 18px 44px rgba(11, 48, 65, 0.14);
  --shadow-accent: 0 10px 30px rgba(192, 79, 21, 0.20);

  /* ---------- LAYOUT ---------- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* ---------- MOTION ---------- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1);
  --motion-orbit: 16s;    /* logomark satellites */
  --motion-breathe: 7s;   /* logomark glow       */

  /* ---------- SEMANTIC — LIGHT (default) ---------- */
  --bg:            var(--ink-050);
  --bg-elevated:   var(--white);
  --surface:       var(--white);
  --surface-alt:   var(--paper);
  --surface-inset: var(--ink-050);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-invert:   var(--white);
  --border:        #E1E6F0;
  --border-strong: var(--ink-200);
  --accent:            var(--orange-500);
  --accent-hover:      var(--orange-600);
  --accent-pressed:    var(--orange-700);
  --accent-contrast:   var(--white);
  --accent-wash:       var(--orange-100);
  --link:          var(--orange-600);
  --link-hover:    var(--orange-700);
  --overlay:       rgba(11, 48, 65, 0.45);
  color-scheme: light;
}

/* ---------- SEMANTIC — DARK ---------- */
:root[data-theme="dark"],
.theme-dark {
  --bg:            #081E28;
  --bg-elevated:   #0F2A38;
  --surface:       #0F2A38;
  --surface-alt:   #123240;
  --surface-inset: #0A2430;
  --text:          #EAF1F4;
  --text-muted:    #9EADB4;
  --text-subtle:   #6E8791;
  --text-invert:   #0B3041;
  --border:        #1E3D4C;
  --border-strong: #2C5A6E;
  --accent:            var(--orange-400);
  --accent-hover:      var(--orange-300);
  --accent-pressed:    var(--orange-500);
  --accent-contrast:   #0B1A22;
  --accent-wash:       rgba(224, 112, 58, 0.14);
  --link:          var(--orange-400);
  --link-hover:    var(--orange-300);
  --overlay:       rgba(0, 0, 0, 0.6);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.55);
  color-scheme: dark;
}

/* Optional: follow OS preference automatically.
   Remove if you drive theme only via [data-theme].  */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#081E28; --bg-elevated:#0F2A38; --surface:#0F2A38; --surface-alt:#123240;
    --surface-inset:#0A2430; --text:#EAF1F4; --text-muted:#9EADB4; --text-subtle:#6E8791;
    --text-invert:#0B3041; --border:#1E3D4C; --border-strong:#2C5A6E;
    --accent:#E0703A; --accent-hover:#EC9268; --accent-pressed:#C04F15;
    --accent-contrast:#0B1A22; --accent-wash:rgba(224,112,58,0.14);
    --link:#E0703A; --link-hover:#EC9268; --overlay:rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}

/* ============================================================
   BASE / RESET — sensible defaults bound to the tokens
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); color: var(--text); }
h1 { font-size: var(--step-5); font-weight: 700; }
h2 { font-size: var(--step-4); font-weight: 700; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; }
p  { margin: 0 0 var(--space-4); color: var(--text); }
a  { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.eyebrow { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
}