/* ============================================================
   DCMS marketing site: design tokens
   Amber on steel. Light = airy steel, dark = deep slate.
   Derived from the Customer Portal token set, extended for
   marketing surfaces (heroes, glows, mockups).
   Brand rules:
   - Raw amber is never body text on light backgrounds.
   - Ink on amber fills is near-black (--on-accent), never white.
   - No flat colored hairline borders on cards; depth comes from
     shadow, layered surfaces and soft amber auras.
   ============================================================ */

@layer tokens {

:root {
  /* Type */
  --font-display: 'Space Grotesk Variable', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --fs-hero: clamp(2.5rem, 1.4rem + 5.2vw, 4.75rem);
  --fs-lead: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);

  /* Spacing / radii / motion */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --sp-16: 64px; --sp-24: 96px;
  --radius-sm: 8px;
  --radius-input: 10px;
  --radius-card: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --dur-fast: 140ms;
  --dur-med: 280ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wrap: 1160px;

  /* Brand constants (theme-independent) */
  --accent-from: #FFC44D;
  --accent-to: #F08A12;
  --on-accent: #1A1206;
  --success: #10B981;
  --danger: #E11D48;
  --info: #0EA5E9;

  /* Fixed-dark code/terminal surfaces (same in both themes) */
  --code-bg: #10151C;
  --code-border: #26313E;
  --code-text: #D7E1EC;
  --code-accent: #FFC44D;
  --code-green: #34D399;
  --code-dim: #7A8CA0;
}

[data-theme='light'] {
  color-scheme: light;
  --bg: #F3F5F8;
  --bg-raised: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EAEEF3;
  --surface-3: #DFE5EC;
  --border: #DFE5EC;
  --border-strong: #C4CEDA;
  --text: #1C2733;
  --text-muted: #5B6B7C;
  --text-faint: #8A99A9;
  --accent: #F49D1D;
  --accent-ink: #8C5A00;
  --accent-soft: rgba(240, 138, 18, 0.12);
  --accent-aura: rgba(240, 138, 18, 0.16);
  --accent-ring: rgba(240, 138, 18, 0.22);
  --success-ink: #0B7A50;
  --danger-ink: #BE123C;
  --info-ink: #0369A1;
  --selection: rgba(240, 138, 18, 0.24);
  --shadow-card: 0 1px 2px rgba(28, 39, 51, 0.05), 0 10px 30px -12px rgba(28, 39, 51, 0.18);
  --shadow-pop: 0 24px 70px -24px rgba(28, 39, 51, 0.35);
  --head-bg: rgba(243, 245, 248, 0.82);
  --hero-glow: rgba(240, 138, 18, 0.14);
  --chevron-ink: rgba(28, 39, 51, 0.05);
  --steel-hi: #FBFCFE;
  --steel-lo: #E4E9F0;
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0F1318;
  --bg-raised: #161C24;
  --surface: #161C24;
  --surface-2: #1D2530;
  --surface-3: #26303D;
  --border: #242E3A;
  --border-strong: #3B4856;
  --text: #E4EAF1;
  --text-muted: #9DACBE;
  --text-faint: #6E7E90;
  --accent: #F5A623;
  --accent-ink: #FFC44D;
  --accent-soft: rgba(245, 166, 35, 0.14);
  --accent-aura: rgba(245, 166, 35, 0.15);
  --accent-ring: rgba(245, 166, 35, 0.26);
  --success-ink: #34D399;
  --danger-ink: #FB7185;
  --info-ink: #38BDF8;
  --selection: rgba(245, 166, 35, 0.3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 34px -14px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 26px 80px -26px rgba(0, 0, 0, 0.75);
  --head-bg: rgba(15, 19, 24, 0.82);
  --hero-glow: rgba(245, 166, 35, 0.13);
  --chevron-ink: rgba(228, 234, 241, 0.045);
  --steel-hi: #1D2530;
  --steel-lo: #12171E;
}

}