/* Disker Design System — Color & Type Tokens
 * Source of truth: Brand Guidelines V1.0 (Figma "Brand" page).
 * All tokens prefixed `--disker-` to avoid collisions.
 */

/* Local brand fonts — uploaded by the user */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: "Ronzino"; src: url("fonts/Ronzino-Regular.otf") format("opentype"), url("fonts/Ronzino-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("fonts/Ronzino-Oblique.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("fonts/Ronzino-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("fonts/Ronzino-MediumOblique.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("fonts/Ronzino-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("fonts/Ronzino-BoldOblique.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---------------------------------------------------------------- */
/* PRIMARY PALETTE — the 5 named brand colors                       */
/* ---------------------------------------------------------------- */
:root {
  /* Event Horizon — primary dark, near-black */
  --disker-event-horizon: #191919;
  /* Blank Orbit — paper white, primary light bg */
  --disker-blank-orbit: #f6f6f6;
  /* Signal Pulse — primary accent, warm orange */
  --disker-signal-pulse: #ff774d;
  /* Cold Light — deep royal blue */
  --disker-cold-light: #3761f3;
  /* Synthetic Halo — electric purple */
  --disker-synthetic-halo: #b063ff;

  /* ---------- Event Horizon neutrals scale (950 → 50) ---------- */
  --disker-neutral-950: #191919; /* Event Horizon */
  --disker-neutral-900: #3d3d3d;
  --disker-neutral-800: #454545;
  --disker-neutral-700: #4f4f4f;
  --disker-neutral-600: #5d5d5d;
  --disker-neutral-500: #6d6d6d;
  --disker-neutral-400: #888888;
  --disker-neutral-300: #b0b0b0;
  --disker-neutral-200: #d1d1d1;
  --disker-neutral-100: #e7e7e7;
  --disker-neutral-50: #f6f6f6; /* Blank Orbit */

  /* ---------- Signal Pulse (orange) scale ---------- */
  --disker-orange-950: #440606;
  --disker-orange-900: #7e1410;
  --disker-orange-800: #9d150f;
  --disker-orange-700: #c61608;
  --disker-orange-600: #ef2507;
  --disker-orange-500: #fe3f11;
  --disker-orange-400: #ff774d; /* Signal Pulse */
  --disker-orange-200: #ffc4a8;
  --disker-orange-100: #ffe4d4;
  --disker-orange-50:  #fff3ed;

  /* ---------- Cold Light (blue) scale ---------- */
  --disker-blue-950: #181c53;
  --disker-blue-900: #202b88;
  --disker-blue-800: #202bad;
  --disker-blue-700: #2033d5;
  --disker-blue-600: #2846e8;
  --disker-blue-500: #3761f3; /* Cold Light */
  --disker-blue-300: #94b5fc;
  --disker-blue-200: #c0d1fd;
  --disker-blue-100: #dbe5fe;
  --disker-blue-50:  #eff3ff;

  /* ---------- Synthetic Halo (purple) scale ---------- */
  --disker-purple-950: #3a0269;
  --disker-purple-900: #57178c;
  --disker-purple-800: #691aaf; /* featured on dark */
  --disker-purple-700: #7b1ad6;
  --disker-purple-600: #8f2af3;
  --disker-purple-500: #b063ff; /* Synthetic Halo */
  --disker-purple-300: #d7b0ff;
  --disker-purple-200: #e8d3ff;
  --disker-purple-100: #f3e7ff;

  /* ---------- Semantic surface / text ---------- */
  --disker-bg: var(--disker-blank-orbit);
  --disker-bg-elevated: #ffffff;
  --disker-bg-dark: var(--disker-event-horizon);
  --disker-surface-muted: #e7e7e7;
  --disker-surface-cool: #f8f8f8;

  --disker-fg: var(--disker-event-horizon);
  --disker-fg-muted: #5d5d5d;
  --disker-fg-subtle: #888888;
  --disker-fg-inverse: var(--disker-blank-orbit);
  --disker-fg-on-dark: var(--disker-blank-orbit);
  --disker-fg-on-accent: var(--disker-event-horizon);

  --disker-border: #e7e7e7;
  --disker-border-strong: #191919;
  --disker-border-muted: #d1d1d1;

  /* ---------- Semantic state ---------- */
  --disker-accent: var(--disker-signal-pulse);
  --disker-accent-fg: var(--disker-event-horizon); /* on orange */
  --disker-link: var(--disker-cold-light);
  --disker-success: #1b7e53;      /* seen in product UI */
  --disker-success-bg: #eafaf3;
  --disker-warning: var(--disker-signal-pulse);
  --disker-danger: #ef2507;
  --disker-info: var(--disker-cold-light);

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

  /* ---------- Shadows ---------- */
  --disker-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --disker-shadow-sm: 0 2px 6px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05);
  --disker-shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --disker-shadow-lg: 0 24px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --disker-shadow-inner: inset 0 1px 0 rgba(255,255,255,0.15);
  --disker-shadow-glow-pulse: 0 0 60px rgba(255,119,77,0.35);
  --disker-shadow-glow-halo:  0 0 80px rgba(176,99,255,0.45);

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

  /* ---------- Typography — font stacks ---------- */
  /* Display — Ronzino Bold (Pangram Pangram). Set tight. */
  --disker-font-display: "Ronzino", "Geist", "Inter", system-ui, sans-serif;
  /* Body / UI — Geist (Vercel) */
  --disker-font-sans: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Editorial fallback (rarely used) */
  --disker-font-serif: "Times New Roman", serif;
  /* Mono for code & numerics */
  --disker-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type sizing (fluid) ---------- */
  --disker-text-xs:  12px;
  --disker-text-sm:  14px;
  --disker-text-md:  16px;
  --disker-text-lg:  20px;
  --disker-text-xl:  24px;
  --disker-text-2xl: 32px;
  --disker-text-3xl: 48px;
  --disker-text-4xl: 72px;
  --disker-text-5xl: 104px;

  /* ---------- Line heights ---------- */
  --disker-leading-tight: 0.9;
  --disker-leading-snug: 1.1;
  --disker-leading-body: 1.3;
  --disker-leading-relaxed: 1.5;

  /* ---------- Tracking ---------- */
  --disker-tracking-display: -0.02em; /* -2px @ 104 */
  --disker-tracking-tight:   -0.01em;
  --disker-tracking-normal:  0;
  --disker-tracking-wide:    0.08em;

  /* ---------- Motion ---------- */
  --disker-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --disker-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --disker-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --disker-dur-fast: 120ms;
  --disker-dur-base: 200ms;
  --disker-dur-slow: 420ms;
}

/* ---------------------------------------------------------------- */
/* SEMANTIC TYPE STYLES                                             */
/* ---------------------------------------------------------------- */

.disker-display {
  font-family: var(--disker-font-display);
  font-weight: 700;
  font-size: var(--disker-text-5xl);
  line-height: var(--disker-leading-tight);
  letter-spacing: var(--disker-tracking-display);
  color: var(--disker-fg);
}

.disker-h1 {
  font-family: var(--disker-font-display);
  font-weight: 700;
  font-size: var(--disker-text-4xl);
  line-height: 0.9;
  letter-spacing: -0.019em;
  color: var(--disker-fg);
}

.disker-h2 {
  font-family: var(--disker-font-display);
  font-weight: 700;
  font-size: var(--disker-text-3xl);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--disker-fg);
}

.disker-h3 {
  font-family: var(--disker-font-display);
  font-weight: 700;
  font-size: var(--disker-text-2xl);
  line-height: 1.05;
  letter-spacing: -0.008em;
  color: var(--disker-fg);
}

.disker-h4 {
  font-family: var(--disker-font-sans);
  font-weight: 500;
  font-size: var(--disker-text-xl);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--disker-fg);
}

.disker-eyebrow {
  font-family: var(--disker-font-sans);
  font-weight: 700;
  font-size: var(--disker-text-xs);
  line-height: 0.9;
  letter-spacing: var(--disker-tracking-wide);
  text-transform: uppercase;
  color: var(--disker-fg);
}

.disker-body {
  font-family: var(--disker-font-sans);
  font-weight: 400;
  font-size: var(--disker-text-md);
  line-height: 1.4;
  color: var(--disker-fg);
}

.disker-body-sm {
  font-family: var(--disker-font-sans);
  font-weight: 400;
  font-size: var(--disker-text-sm);
  line-height: 1.45;
  color: var(--disker-fg-muted);
}

.disker-caption {
  font-family: var(--disker-font-sans);
  font-weight: 500;
  font-size: var(--disker-text-xs);
  line-height: 1.3;
  color: var(--disker-fg-muted);
}

.disker-button-label {
  font-family: var(--disker-font-sans);
  font-weight: 500;
  font-size: var(--disker-text-md);
  line-height: 0.8;
  letter-spacing: -0.005em;
}

.disker-code {
  font-family: var(--disker-font-mono);
  font-size: 0.95em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--disker-neutral-100);
  color: var(--disker-neutral-900);
}

/* Element defaults — opt-in by adding .disker-typography on root */
.disker-typography h1 { font: 700 var(--disker-text-4xl)/0.9 var(--disker-font-display); letter-spacing: -0.019em; }
.disker-typography h2 { font: 700 var(--disker-text-3xl)/1 var(--disker-font-display);  letter-spacing: -0.012em; }
.disker-typography h3 { font: 700 var(--disker-text-2xl)/1.05 var(--disker-font-display); letter-spacing: -0.008em; }
.disker-typography p  { font: 400 var(--disker-text-md)/1.45 var(--disker-font-sans); color: var(--disker-fg); }
.disker-typography a  { color: var(--disker-link); text-decoration: underline; text-underline-offset: 3px; }

/* A base body reset you can opt into */
.disker-base {
  background: var(--disker-bg);
  color: var(--disker-fg);
  font-family: var(--disker-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scroll snap carousels (mobile video gallery in WhatBrandsLookForSection) */
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Universally-available pulse keyframes — used by hero/section mocks across
   all pages to add subtle "alive" indicators (small dots that breathe). The
   originals live inside CockpitPanel (heroes.jsx) which doesn't load on
   solution pages; defining them globally here keeps the same animation
   names working everywhere. */
@keyframes cockpit-pulse-soft {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes cockpit-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}