/* =========================================================
   ROJIUM — Colors & Type
   Inspired by Tesla / Apple / Unitree.
   Mostly monochrome with one signal accent and one caution accent.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- COLOR TOKENS ---------- */

  /* Surfaces (Tesla-style monochrome) */
  --ink:        #0B0C0E;   /* near-black, primary dark surface */
  --carbon:    #15171A;   /* elevated dark surface */
  --graphite:  #25282D;   /* card on dark */
  --steel:     #6B7075;   /* secondary text on light, primary text on dark */
  --aluminum:  #A8ACB1;   /* tertiary text, dividers on dark */
  --mist:      #E4E4E2;   /* divider on light */
  --bone:      #F5F5F2;   /* primary light surface (warm white, not pure) */
  --paper:     #FFFFFF;   /* card surface on light */

  /* Brand accents — used sparingly */
  --signal:    #FF4A1C;   /* primary CTA / brand accent (warm robotics red-orange) */
  --signal-hi: #FF6A3D;
  --signal-lo: #D63A12;
  --caution:   #F0B90B;   /* status, hazard stripes, badges */
  --plasma:    #00C2D1;   /* autonomous / AI / live status */
  --live:      #2BD96B;   /* in-stock, online, success */

  /* Semantic — light theme */
  --bg:         var(--bone);
  --bg-elev:    var(--paper);
  --bg-sunken:  #ECECE9;
  --fg:         var(--ink);
  --fg-1:       var(--ink);
  --fg-2:       #4A4D52;     /* secondary */
  --fg-3:       var(--steel);/* tertiary */
  --border:     #DCDCD9;
  --border-strong: #C5C5C2;
  --hairline:   rgba(11,12,14,0.08);

  /* Inverse / dark surfaces (Tesla hero panels) */
  --bg-inv:        var(--ink);
  --bg-inv-elev:   var(--carbon);
  --bg-inv-sunken: #050608;
  --fg-inv:        #F2F2EE;
  --fg-inv-2:      #BFC2C7;
  --fg-inv-3:      var(--steel);
  --border-inv:    #2A2D33;

  /* ---------- TYPE TOKENS ---------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — Apple-ish big hero, generous step */
  --t-mega:    clamp(56px, 9vw, 128px);  /* hero */
  --t-display: clamp(40px, 5.5vw, 72px); /* page heading */
  --t-h1:      40px;
  --t-h2:      32px;
  --t-h3:      24px;
  --t-h4:      20px;
  --t-lead:    18px;
  --t-body:    15px;
  --t-small:   13px;
  --t-micro:   11px;

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* Letter-spacing — Tesla uppercase eyebrows are wide */
  --ls-eyebrow: 0.14em;
  --ls-tight:  -0.02em;
  --ls-mega:   -0.04em;

  /* ---------- SHAPE / SPACING ---------- */
  /* Apple-ish soft radii, but never bubbly. Cards usually 12-16, buttons 8-10. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(11,12,14,0.06);
  --shadow-2: 0 4px 14px rgba(11,12,14,0.06), 0 1px 2px rgba(11,12,14,0.04);
  --shadow-3: 0 18px 40px -16px rgba(11,12,14,0.18), 0 2px 6px rgba(11,12,14,0.06);
  --shadow-cta: 0 8px 24px -8px rgba(255,74,28,0.45);
  --shadow-inset: inset 0 0 0 1px var(--hairline);

  /* Motion — Apple-like, snappy but soft */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* hero entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press:  cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-hero:    700ms;
}

/* ---------- SEMANTIC TYPE CLASSES ---------- */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
}

.t-mega {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-mega);
  color: var(--fg-1);
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: var(--lh-snug); }
.t-h4 { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 600; line-height: var(--lh-snug); }

.t-lead { font-family: var(--font-body); font-size: var(--t-lead); line-height: var(--lh-normal); color: var(--fg-2); }
.t-body { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--fg-1); }
.t-small { font-family: var(--font-body); font-size: var(--t-small); line-height: var(--lh-normal); color: var(--fg-2); }
.t-micro { font-family: var(--font-body); font-size: var(--t-micro); line-height: var(--lh-normal); color: var(--fg-3); }

.t-mono { font-family: var(--font-mono); font-size: var(--t-small); letter-spacing: 0.01em; }
.t-spec { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }

/* Useful base reset for design surfaces */
.rm-surface {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rm-surface-dark {
  font-family: var(--font-body);
  color: var(--fg-inv);
  background: var(--bg-inv);
  -webkit-font-smoothing: antialiased;
}