/* =========================================================================
   ORXNGE. Colors & Type
   Dark, luxury, gradient, flowy. Orange + black. Minimal + mysterious.
   ========================================================================= */

@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('fonts/NeueHaasDisplay-Roman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('fonts/NeueHaasDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk';
  src: url('fonts/NeueHaasDisplay-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Font substitutions via Google Fonts. request proper files from the team */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* ─── Core palette ──────────────────────────────────────────────────── */
  /* Obsidian scale. The canvas. Never pure black, always a touch warm. */
  --obsidian-1000: #000000;       /* True black, reserved for gradient tail */
  --obsidian-950:  #0A0705;       /* Page bg */
  --obsidian-900:  #120D08;       /* Elevated surface */
  --obsidian-800:  #1C140D;       /* Card bg */
  --obsidian-700:  #2A1F14;       /* Hover surface */
  --obsidian-600:  #3A2C1D;       /* Border strong */
  --obsidian-500:  #4E3B28;       /* Divider */

  /* Orange. the signal. A warm cadmium/amber tone, not neon. */
  --orxnge-50:   #FFF4EB;
  --orxnge-100:  #FFE3CC;
  --orxnge-200:  #FFC79A;
  --orxnge-300:  #FFA566;
  --orxnge-400:  #FF8533;
  --orxnge-500:  #FF6A0A;         /* Primary brand, the ORXNGE */
  --orxnge-600:  #E85600;
  --orxnge-700:  #B84200;
  --orxnge-800:  #7A2C00;
  --orxnge-900:  #3D1600;

  /* Ember. deep accent, for gradient fall-off */
  --ember-500:   #8A2A00;
  --ember-700:   #4A1500;
  --ember-900:   #1F0800;

  /* Bone. Warm off-white foreground */
  --bone-50:   #FFFAF5;
  --bone-100:  #F5EEE4;
  --bone-200:  #E6DCCC;
  --bone-300:  #BFB3A2;
  --bone-400:  #8A7F70;
  --bone-500:  #5C5246;

  /* ─── Semantic foreground ───────────────────────────────────────────── */
  --fg-1: var(--bone-50);          /* Primary text on dark */
  --fg-2: var(--bone-200);         /* Secondary text */
  --fg-3: var(--bone-300);         /* Tertiary text, captions */
  --fg-4: var(--bone-400);         /* Muted labels */
  --fg-5: var(--bone-500);         /* Disabled */
  --fg-accent: var(--orxnge-500);  /* Brand accent in text */

  /* ─── Semantic background ───────────────────────────────────────────── */
  --bg-canvas: var(--obsidian-950);
  --bg-surface: var(--obsidian-900);
  --bg-card: var(--obsidian-800);
  --bg-hover: var(--obsidian-700);
  --bg-accent: var(--orxnge-500);
  --bg-accent-soft: rgba(255, 106, 10, 0.08);

  /* ─── Borders & dividers ────────────────────────────────────────────── */
  --border-subtle: rgba(245, 238, 228, 0.06);
  --border-default: rgba(245, 238, 228, 0.10);
  --border-strong: rgba(245, 238, 228, 0.18);
  --border-accent: rgba(255, 106, 10, 0.40);

  /* ─── Status ────────────────────────────────────────────────────────── */
  --status-success: #6FBF73;
  --status-warning: var(--orxnge-400);
  --status-danger:  #E5484D;
  --status-info:    #7FA8D1;

  /* ─── Signature gradients ───────────────────────────────────────────── */
  /* Horizon: the hero. ember sunrise bleeding to obsidian */
  --gradient-horizon: radial-gradient(
    120% 80% at 50% 100%,
    var(--orxnge-500) 0%,
    var(--ember-500) 28%,
    var(--ember-900) 55%,
    var(--obsidian-950) 82%
  );
  /* Flare: the directional wash. top-left orange, falling into black */
  --gradient-flare: linear-gradient(
    135deg,
    var(--orxnge-500) 0%,
    var(--ember-700) 38%,
    var(--obsidian-950) 100%
  );
  /* Ember: tight accent gradient for small surfaces (buttons, chips) */
  --gradient-ember: linear-gradient(
    180deg,
    var(--orxnge-400) 0%,
    var(--orxnge-600) 100%
  );
  /* Veil: near-black, barely-there gradient for ambient surfaces */
  --gradient-veil: linear-gradient(
    180deg,
    var(--obsidian-900) 0%,
    var(--obsidian-950) 100%
  );
  /* Brand mesh: the signature flowy wash for large moments */
  --gradient-mesh:
    radial-gradient(60% 40% at 15% 20%, rgba(255, 106, 10, 0.28) 0%, transparent 60%),
    radial-gradient(70% 50% at 85% 0%, rgba(232, 86, 0, 0.22) 0%, transparent 55%),
    radial-gradient(80% 60% at 50% 120%, rgba(138, 42, 0, 0.35) 0%, transparent 70%),
    var(--obsidian-950);

  /* ─── Shadows & elevation ───────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 6px 24px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-xl:  0 40px 120px rgba(0, 0, 0, 0.6), 0 16px 32px rgba(0, 0, 0, 0.4);
  --glow-ember:
    0 0 0 1px rgba(255, 106, 10, 0.55),
    0 0 24px rgba(255, 106, 10, 0.4),
    0 16px 56px rgba(255, 106, 10, 0.5),
    0 32px 96px rgba(255, 106, 10, 0.32);
  --glow-ember-hover:
    0 0 0 1px rgba(255, 106, 10, 0.7),
    0 0 32px rgba(255, 106, 10, 0.55),
    0 24px 72px rgba(255, 106, 10, 0.6),
    0 40px 120px rgba(255, 106, 10, 0.45);

  /* Inner highlight to simulate polished-glass surfaces */
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --inset-accent:    inset 0 1px 0 rgba(255, 175, 100, 0.25);

  /* ─── Radii ─────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

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

  /* ─── Motion ────────────────────────────────────────────────────────── */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-flow: 900ms;

  /* ─── Type families ─────────────────────────────────────────────────── */
  /* Display: geometric grotesque. clean, confident, corporate-luxury */
  --font-display: 'Neue Haas Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  /* Body: same family. Single voice across UI. */
  --font-body: 'Neue Haas Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  /* Editorial: italic serif for pull quotes, big-claim moments */
  --font-editorial: 'Instrument Serif', 'Times New Roman', serif;
  /* Data / technical voice: IBM Plex Sans with tabular numerals.
     Replaces the cliché mono used in "AI startup" sites. Plex is IBM's
     corporate typeface. enterprise-familiar, warm, humanist. */
  --font-data: 'IBM Plex Sans', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  /* Legacy alias; still points at the data voice for anything referencing mono. */
  --font-mono: var(--font-data);

  /* ─── Type scale ────────────────────────────────────────────────────── */
  /* Display. huge statements. Very tight tracking, low leading. */
  --display-1-size: clamp(64px, 9vw, 144px);
  --display-1-line: 0.92;
  --display-1-track: -0.04em;
  --display-1-weight: 400;

  --display-2-size: clamp(48px, 6.4vw, 96px);
  --display-2-line: 0.95;
  --display-2-track: -0.035em;
  --display-2-weight: 400;

  /* Headings */
  --h1-size: 56px;
  --h1-line: 1.05;
  --h1-track: -0.03em;
  --h1-weight: 500;

  --h2-size: 40px;
  --h2-line: 1.1;
  --h2-track: -0.025em;
  --h2-weight: 500;

  --h3-size: 28px;
  --h3-line: 1.2;
  --h3-track: -0.02em;
  --h3-weight: 500;

  --h4-size: 20px;
  --h4-line: 1.3;
  --h4-track: -0.01em;
  --h4-weight: 500;

  /* Body */
  --body-lg-size: 20px;
  --body-lg-line: 1.5;
  --body-md-size: 16px;
  --body-md-line: 1.55;
  --body-sm-size: 14px;
  --body-sm-line: 1.5;
  --caption-size: 12px;
  --caption-line: 1.4;

  /* Eyebrow / overline. uppercase, wide-tracked */
  --eyebrow-size: 12px;
  --eyebrow-track: 0.18em;
  --eyebrow-weight: 500;
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-track);
  font-weight: var(--h1-weight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
  font-weight: var(--h2-weight);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-track);
  font-weight: var(--h3-weight);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  letter-spacing: var(--h4-track);
  font-weight: var(--h4-weight);
  color: var(--fg-1);
  margin: 0;
}

.display-1 {
  font-family: var(--font-display);
  font-size: var(--display-1-size);
  line-height: var(--display-1-line);
  letter-spacing: var(--display-1-track);
  font-weight: var(--display-1-weight);
  color: var(--fg-1);
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--display-2-size);
  line-height: var(--display-2-line);
  letter-spacing: var(--display-2-track);
  font-weight: var(--display-2-weight);
  color: var(--fg-1);
}

.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

p, .body {
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}
.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); color: var(--fg-2); }
.body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--fg-3); }
.caption { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--fg-4); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--fg-accent);
}

code, .mono, .data {
  font-family: var(--font-data);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

/* Signature: brand name in gradient */
.brand-wordmark {
  background: linear-gradient(180deg, var(--bone-50) 0%, var(--orxnge-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Signature: ember text. for quiet-but-glowing moments */
.text-ember {
  background: linear-gradient(180deg, var(--orxnge-300) 0%, var(--orxnge-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Selection. branded */
::selection { background: var(--orxnge-500); color: var(--obsidian-950); }