/* ============================================================
   Racks University — Design Tokens
   Colors, Type, Radii, Shadows, Spacing
   ============================================================ */

/* ---------- FONTS ----------
   Brand UI/body face is Inter (licensed OTF files shipped in
   /fonts). Display uses Archivo Black as the closest tight,
   heavy grotesk to the Racks wordmark; mono is JetBrains Mono.
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Inter — licensed brand files */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Inter-Light-BETA.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter-SemiBold.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Inter-Bold.otf') format('opentype');
}
@font-face {
  /* No 800 file shipped; map to Black so H3 (800) renders crisp without synthesis. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Inter-Black.otf') format('opentype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Inter-Black.otf') format('opentype');
}

:root {
  /* ===== BRAND COLORS ===== */
  --ru-red:        #C01810;   /* Racks University primary */
  --ru-red-600:    #A81410;
  --ru-red-700:    #8A0F0C;
  --ru-red-400:    #D94438;
  --ru-red-200:    #F3B5B0;
  --ru-red-50:     #FBEFED;

  --ra-orange:     #F89018;   /* Racks Academy primary */
  --ra-orange-600: #E07E0C;
  --ra-orange-700: #B86306;
  --ra-orange-400: #FBA94C;
  --ra-orange-200: #FDD9AE;
  --ra-orange-50:  #FEF4E6;

  /* ===== NEUTRALS ===== */
  --ink:           #101010;   /* near-black body */
  --ink-900:       #181818;
  --ink-800:       #242424;
  --ink-700:       #303030;   /* bezel gray in dark lockups */
  --ink-600:       #4A4A4A;
  --ink-500:       #6B6B6B;
  --ink-400:       #9A9A9A;
  --ink-300:       #C7C7C7;
  --ink-200:       #E3E3E3;
  --ink-100:       #F1F1F1;
  --ink-50:        #F7F7F5;   /* warm off-white paper */
  --paper:         #FBFAF7;   /* warmer page background */
  --white:         #FFFFFF;

  /* ===== SEMANTIC (light theme) ===== */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --bg-subtle:     var(--ink-50);
  --bg-muted:      var(--ink-100);
  --bg-inverse:    var(--ink);

  --fg:            var(--ink);            /* body text */
  --fg-muted:      var(--ink-600);        /* secondary */
  --fg-subtle:     var(--ink-500);        /* tertiary / meta */
  --fg-inverse:    var(--white);
  --fg-brand:      var(--ru-red);
  --fg-accent:     var(--ra-orange);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-inverse: var(--ink-800);

  /* ===== STATUS ===== */
  --success:       #1E8E4A;
  --warning:       #E0A010;
  --danger:        var(--ru-red);
  --info:          #1A5FB4;

  /* ===== TYPOGRAPHY ===== */
  --font-display:  'Archivo Black', 'Helvetica Neue', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:     'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — modular, tuned for education/corporate hybrid */
  --fs-12: 0.75rem;    /* 12px — micro labels */
  --fs-14: 0.875rem;   /* 14px — small body, meta */
  --fs-16: 1rem;       /* 16px — body */
  --fs-18: 1.125rem;   /* 18px — lead body */
  --fs-20: 1.25rem;    /* 20px — h5 */
  --fs-24: 1.5rem;     /* 24px — h4 */
  --fs-30: 1.875rem;   /* 30px — h3 */
  --fs-40: 2.5rem;     /* 40px — h2 */
  --fs-56: 3.5rem;     /* 56px — h1 */
  --fs-80: 5rem;       /* 80px — display */
  --fs-112: 7rem;      /* 112px — hero display */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.025em;
  --tracking-tight:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.08em;   /* eyebrow uppercase */

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

  /* ===== RADII =====
     Following the shield / R motif: generous rounded outer
     corners, but never fully circular for container shapes. */
  --r-0: 0;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;       /* default card */
  --r-xl: 20px;       /* hero cards */
  --r-2xl: 28px;      /* oversized panels */
  --r-shield: 32px 32px 40px 40px / 32px 32px 60px 60px;  /* shield-like */
  --r-pill: 999px;

  /* ===== SHADOWS =====
     Corporate-formal: tight, low-spread, almost-architectural.
     No soft dreamy glows. */
  --shadow-xs:  0 1px 0 rgba(16,16,16,0.04), 0 1px 2px rgba(16,16,16,0.06);
  --shadow-sm:  0 1px 2px rgba(16,16,16,0.06), 0 2px 4px rgba(16,16,16,0.04);
  --shadow-md:  0 4px 8px rgba(16,16,16,0.06), 0 8px 16px rgba(16,16,16,0.05);
  --shadow-lg:  0 10px 20px rgba(16,16,16,0.08), 0 20px 40px rgba(16,16,16,0.06);
  --shadow-xl:  0 24px 48px rgba(16,16,16,0.12), 0 2px 6px rgba(16,16,16,0.04);
  --shadow-ring-red:    0 0 0 4px rgba(192,24,16,0.18);
  --shadow-ring-orange: 0 0 0 4px rgba(248,144,24,0.22);
  --shadow-inset:       inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(16,16,16,0.06);

  /* ===== MOTION ===== */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);       /* crisp, formal */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ===== LAYOUT ===== */
  --content-max: 1200px;
  --wide-max:    1440px;
  --prose-max:   68ch;
}

/* ============================================================
   SEMANTIC TYPE ROLES — apply to real elements
   ============================================================ */

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

/* Display — for hero moments only. Bold, tight, confident. */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-56), 7vw, var(--fs-112));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg);
}

/* H1 — page title */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-40), 4.5vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
  margin: 0 0 var(--sp-4) 0;
}

/* H2 — section title */
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-30), 3vw, var(--fs-56));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
  margin: 0 0 var(--sp-4) 0;
}

/* H3 — subsection */
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-3) 0;
}

/* H4 — card title */
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-2) 0;
}

/* H5 — label-ish */
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-2) 0;
}

/* Body */
p, .p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0 0 var(--sp-4) 0;
  max-width: var(--prose-max);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  font-weight: 400;
}

.small, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.meta {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
}

/* Eyebrow — uppercase label above titles, very corporate-academic */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.eyebrow--academy { color: var(--fg-accent); }
.eyebrow--muted   { color: var(--fg-subtle); }

/* Code */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code {
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}
pre {
  background: var(--ink);
  color: var(--ink-100);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  overflow-x: auto;
}

/* Links — red underline, formal */
a {
  color: var(--fg-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--ru-red-700); }

/* Horizontal rule — thin, low-key */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}