/* =================================================================
   onTrent Design System — Colors + Type
   Source of truth: C:/Projects/onTrent Design System/colors_and_type.css
   Fonts: loaded locally via fonts.css (Inter + Syne WOFF2).
   ================================================================= */

:root {
  /* ── PRIMITIVE COLORS ─────────────────────────────────────────── */

  /* Backgrounds — deep midnight navy stack */
  --ot-bg:                   #060b18;
  --ot-bg-2:                 #08101f;
  --ot-surface:              #0d1627;
  --ot-surface-2:            #14203a;

  /* Borders */
  --ot-border:               rgba(255,255,255,0.07);
  --ot-border-strong:        rgba(255,255,255,0.18);
  --ot-border-gold:          rgba(240,165,0,0.28);

  /* Brand — Trent Gold */
  --ot-gold:                 #f0a500;
  --ot-gold-light:           #ffc93c;
  --ot-gold-dim:             rgba(240,165,0,0.10);
  --ot-gold-glow:            rgba(240,165,0,0.25);

  /* Accent — used sparingly (hero glow only) */
  --ot-blue-glow:            rgba(79,142,247,0.06);

  /* Semantic — extension for dashboard / app surfaces (not used on marketing).
     Use sparingly: status pills, alert banners, chart deltas. Never as fills. */
  --ot-success:              #4ade80;
  --ot-success-dim:          rgba(74,222,128,0.10);
  --ot-success-border:       rgba(74,222,128,0.28);

  --ot-warning:              #fbbf24;
  --ot-warning-dim:          rgba(251,191,36,0.10);
  --ot-warning-border:       rgba(251,191,36,0.28);

  --ot-danger:               #f87171;
  --ot-danger-dim:           rgba(248,113,113,0.10);
  --ot-danger-border:        rgba(248,113,113,0.28);

  --ot-info:                 #60a5fa;
  --ot-info-dim:             rgba(96,165,250,0.10);
  --ot-info-border:          rgba(96,165,250,0.28);

  /* Text */
  --ot-white:                #f2f7ff;
  --ot-text:                 #c8d8f0;
  --ot-gray-light:           #a0b4d0;
  --ot-gray:                 #6a82a8;
  --ot-on-gold:              #030a16;

  /* Semantic aliases */
  --ot-fg-1:                 var(--ot-white);
  --ot-fg-2:                 var(--ot-text);
  --ot-fg-3:                 var(--ot-gray-light);
  --ot-fg-4:                 var(--ot-gray);
  --ot-bg-page:              var(--ot-bg);
  --ot-bg-band:              var(--ot-bg-2);
  --ot-bg-card:              var(--ot-surface);
  --ot-bg-card-hi:           var(--ot-surface-2);
  --ot-accent:               var(--ot-gold);
  --ot-accent-hover:         var(--ot-gold-light);

  /* ── TYPE FAMILIES ────────────────────────────────────────────── */
  --ot-font-display:         'Syne', system-ui, sans-serif;
  --ot-font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ot-font-mono:            ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── TYPE SCALE ───────────────────────────────────────────────── */
  --ot-display-xl:           clamp(2.6rem, 6.5vw, 5.2rem);
  --ot-display-lg:           clamp(2rem, 4vw, 3.2rem);
  --ot-display-md:           clamp(1.9rem, 3.5vw, 2.85rem);
  --ot-display-sm:           1.45rem;

  --ot-text-xl:              1.18rem;
  --ot-text-lg:              1.05rem;
  --ot-text-md:              0.95rem;
  --ot-text-sm:              0.875rem;
  --ot-text-xs:              0.78rem;
  --ot-text-xxs:             0.73rem;

  /* Line heights */
  --ot-lh-display:           1.04;
  --ot-lh-tight:             1.1;
  --ot-lh-body:              1.65;
  --ot-lh-loose:             1.75;

  /* Letter-spacing */
  --ot-ls-tight:             -0.035em;
  --ot-ls-snug:              -0.025em;
  --ot-ls-normal:            -0.01em;
  --ot-ls-wide:              0.1em;
  --ot-ls-wider:             0.14em;
  --ot-ls-widest:            0.16em;

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

  /* ── SPACING / RADIUS / SHADOWS ───────────────────────────────── */
  --ot-radius-sm:            10px;
  --ot-radius:               16px;
  --ot-radius-lg:            24px;
  --ot-radius-pill:          100px;

  --ot-shadow-glow:          0 0 40px var(--ot-gold-glow);
  --ot-shadow-glow-strong:   0 0 60px rgba(240,165,0,0.40);
  --ot-shadow-card:          0 1px 0 rgba(255,255,255,0.02) inset;

  --ot-space-1:              0.25rem;
  --ot-space-2:              0.5rem;
  --ot-space-3:              0.75rem;
  --ot-space-4:              1rem;
  --ot-space-5:              1.5rem;
  --ot-space-6:              2rem;
  --ot-space-7:              2.5rem;
  --ot-space-8:              3rem;
  --ot-space-9:              5rem;
  --ot-space-10:             7rem;

  --ot-ease:                 cubic-bezier(0.4, 0, 0.2, 1);
  --ot-dur-fast:             0.2s;
  --ot-dur:                  0.3s;
  --ot-dur-slow:             0.35s;
}

/* ── SEMANTIC TYPE CLASSES ─────────────────────────────────────── */

.ot-h1, h1.ot {
  font-family: var(--ot-font-display);
  font-size: var(--ot-display-xl);
  font-weight: var(--ot-fw-extrabold);
  line-height: var(--ot-lh-display);
  letter-spacing: var(--ot-ls-tight);
  color: var(--ot-fg-1);
}

.ot-h2, h2.ot {
  font-family: var(--ot-font-display);
  font-size: var(--ot-display-md);
  font-weight: var(--ot-fw-extrabold);
  line-height: var(--ot-lh-tight);
  letter-spacing: var(--ot-ls-snug);
  color: var(--ot-fg-1);
}

.ot-h3, h3.ot {
  font-family: var(--ot-font-display);
  font-size: 1.2rem;
  font-weight: var(--ot-fw-bold);
  letter-spacing: var(--ot-ls-normal);
  color: var(--ot-fg-1);
}

.ot-display-stat {
  font-family: var(--ot-font-display);
  font-size: 2.2rem;
  font-weight: var(--ot-fw-extrabold);
  letter-spacing: -0.03em;
  color: var(--ot-fg-1);
}

.ot-body, p.ot {
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-lg);
  line-height: var(--ot-lh-loose);
  color: var(--ot-fg-3);
}

.ot-body-sm {
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-md);
  line-height: var(--ot-lh-loose);
  color: var(--ot-fg-3);
}

.ot-eyebrow {
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-xxs);
  font-weight: var(--ot-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ot-ls-widest);
  color: var(--ot-accent);
}

.ot-label {
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-xs);
  font-weight: var(--ot-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ot-ls-wide);
  color: var(--ot-fg-1);
}

.ot-meta {
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-xs);
  color: var(--ot-fg-4);
}

.ot-mono {
  font-family: var(--ot-font-mono);
  font-size: var(--ot-text-sm);
  color: var(--ot-fg-2);
}

/* Gold inline emphasis used in headlines: <em>autopilot</em> */
.ot-h1 em, .ot-h2 em, h1.ot em, h2.ot em {
  font-style: normal;
  color: var(--ot-accent);
}