/* ============================================================
   RY3T Design System — Colors & Type
   Palette: black, red, grey, white. Industrial / engineered.
   ============================================================ */

/* Web fonts loaded via <link rel="stylesheet"> in index.html for parallel fetch
   (browsers serialize @import inside CSS — link tags don't). */

/* Brand display typeface — Michroma (user-provided) */
@font-face {
  font-family: 'Michroma';
  src: url('/fonts/Michroma-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Neutrals — the machined-aluminum spine of the brand */
  --ink: #0A0A0A;           /* primary black, near-absolute */
  --ink-2: #141414;         /* elevated surface on black */
  --ink-3: #1C1C1C;         /* card on black */
  --ink-4: #242424;         /* hairline on black */
  --graphite: #3A3A3A;      /* dark text on white */
  --steel-900: #555555;     /* secondary text */
  --steel-700: #7A7A7A;     /* tertiary / muted */
  --steel-500: #A3A3A3;     /* disabled, subtle borders */
  --steel-300: #CBCBCB;     /* dividers */
  --steel-200: #DEDEDE;     /* subtle surface on white */
  --steel-100: #EDEDED;     /* page-level raised surface */
  --steel-50:  #F5F5F5;     /* off-white canvas */
  --paper: #FFFFFF;         /* absolute white */

  /* Signature red — the underglow */
  --red: #E3001B;           /* brand red (RY3T red) */
  --red-hot: #FF1F35;       /* glow / press highlight */
  --red-deep: #B20015;      /* pressed / hover-dark */
  --red-ember: #8A0010;     /* used in deep shadowy glow */

  /* Semantic */
  --fg-1: var(--ink);
  --fg-2: var(--graphite);
  --fg-3: var(--steel-700);
  --fg-inv-1: var(--paper);
  --fg-inv-2: var(--steel-300);

  --bg-1: var(--paper);
  --bg-2: var(--steel-50);
  --bg-3: var(--steel-100);
  --bg-inv-1: var(--ink);
  --bg-inv-2: var(--ink-2);
  --bg-inv-3: var(--ink-3);

  --accent: var(--red);
  --accent-hover: var(--red-deep);
  --accent-press: var(--red-ember);

  --line-1: var(--steel-200);
  --line-2: var(--steel-300);
  --line-inv-1: var(--ink-4);
  --line-inv-2: #2E2E2E;

  --success: #0E9F6E;
  --warning: #F59E0B;
  --danger:  var(--red);

  /* ---------- TYPE ---------- */
  /* Display — Michroma. Wide, geometric, all-uppercase. The real RY3T wordmark typeface. */
  --font-display: 'Michroma', 'Chakra Petch', 'Eurostile', sans-serif;
  /* Body — neo-grotesque, technical but humanist */
  --font-body: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Mono — for specs, numbers, codes */
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Base scale (1rem = 16px) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tracking (Michroma is wide already — display uses tight/zero tracking, labels use wider) */
  --tracking-tight: -0.04em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.18em;

  /* Line heights */
  --lh-tight: 1.0;
  --lh-snug: 1.15;
  --lh-normal: 1.4;
  --lh-loose: 1.6;

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

  /* ---------- RADII ---------- */
  /* RY3T is ENGINEERED — mostly squared. Radius is used sparingly. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Shadows are subtle, crisp — industrial, not fluffy */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 0 rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-3: 0 4px 24px rgba(0,0,0,0.12);
  --shadow-4: 0 24px 60px rgba(0,0,0,0.18);

  /* Signature underglow — derived from the product's red base light */
  --glow-red-sm: 0 0 16px rgba(227,0,27,0.45);
  --glow-red-md: 0 0 40px rgba(227,0,27,0.50), 0 8px 32px rgba(227,0,27,0.20);
  --glow-red-lg: 0 12px 80px rgba(227,0,27,0.55), 0 0 120px rgba(227,0,27,0.18);

  /* Hairlines */
  --border-hairline: 1px solid var(--line-1);
  --border-hairline-inv: 1px solid var(--line-inv-1);
  --border-accent: 1px solid var(--red);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-mech: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.ry-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-3);
}

.ry-display-xl {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, var(--fs-128));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.ry-display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--fs-96));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.ry-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-56);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.ry-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: uppercase;
}

.ry-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ry-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.ry-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.ry-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.ry-label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-2);
}

.ry-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0;
  color: var(--fg-2);
}

.ry-spec-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* Inverse variants (black surface) */
.ry-inv .ry-eyebrow,
.ry-inv .ry-body-sm { color: var(--fg-inv-2); }
.ry-inv .ry-body,
.ry-inv .ry-body-lg { color: var(--steel-300); }
.ry-inv .ry-h1,
.ry-inv .ry-h2,
.ry-inv .ry-h3,
.ry-inv .ry-display,
.ry-inv .ry-display-xl { color: var(--paper); }