/* Lightpeak — Design Tokens (Colors, Dark Mode, Typography, Spacing, Radii, Motion) */

/* Lightpeak theme styles.
   This file contains the core design system: tokens, typography, layout, components.
   Users should NOT edit this file — use css/custom.css for overrides.

   Token source of truth: /workspace/Lightpeak/lightpeak-web-plan/04-design/design-system.md
   Visual direction:      /workspace/Lightpeak/lightpeak-web-plan/04-design/visual-direction.md

   CSS strategy: mobile-first.
   Base styles target 360px, then progressively enhance via min-width media queries:
     768px  (tablet)
     1024px (desktop)
     1440px (wide)
   Never write desktop-first and scale down. */

/* ─────────────────────────────────────────────────────────────
   §0–14  DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */

:root {
  /* §1  Colour — Brand */
  --color-brand-blue: #0EC1F6;
  --color-brand-purple: #663CE4;
  --color-brand-gradient: linear-gradient(135deg, #0EC1F6 0%, #259EF1 48%, #663CE4 100%);

  /* §1  Colour — Dark navy surfaces (used across dark sections) */
  --color-navy: #131829;
  --color-navy-card: #1e2548;
  --color-navy-card-hover: #26305a;
  --color-navy-border: #5969A8;
  --color-navy-gradient: linear-gradient(135deg, #1e2548 0%, #2f2858 100%);
  --color-navy-footer-gradient: linear-gradient(135deg, #131829 60%, #2a2238 100%);
  --color-navy-rgb: 19, 24, 41;

  /* §1  Colour — Video overlay gradients (mobile-first vertical, desktop horizontal)
     Mobile: text spans full width → vertical gradient protects headline at top.
     Desktop (≥768px): text in left 55% → horizontal gradient, right side lets video breathe. */
  --overlay-video-mobile: linear-gradient(180deg,
    rgba(var(--color-navy-rgb), 0.85) 0%,
    rgba(var(--color-navy-rgb), 0.6) 100%);
  --overlay-video-desktop: linear-gradient(100deg,
    rgba(var(--color-navy-rgb), 0.95) 0%,
    rgba(var(--color-navy-rgb), 0.5) 40%,
    rgba(var(--color-navy-rgb), 0) 100%);

  /* §1  Colour — Neutrals (physical) */
  --color-neutral-lightGrey: #D9D9D9;
  --color-neutral-grey: #424242;

  /* §1  Colour — Dark mode surfaces */

  /* §1  Colour — Light derived */

  /* §1  Colour — Ink (secondary text) */
  --color-ink-secondary-light: #666666;
  --color-ink-secondary-dark: #D9D9D9;

  /* §0A  Semantic colour names (preferred for new components) */
  --color-brand-primary: #0EC1F6;
  --color-brand-secondary: #663CE4;
  --color-surface-primary: #FFFFFF;
  --color-surface-secondary: #F5F5F5;
  --color-surface-tertiary: #D9D9D9;
  --color-surface-dark: var(--color-navy-footer-gradient);
  --color-surface-elevated: #333333;
  --color-surface-recess: #1A1A1A;
  --color-surface-warmth: #2A2520;
  --color-surface-card: #FFFFFF;
  --color-card-border: #D9D9D9;
  --color-text-primary: #424242;
  --color-text-secondary: #666666;
  --color-text-link: var(--color-brand-purple);
  --color-text-accent: #006B87;
  --color-text-success: #076E3B;
  --color-control-border: #767676;
  --color-action-gradient: linear-gradient(135deg, #08718F 0%, #365AC6 48%, #663CE4 100%);
  --color-action-hover: #5229C2;
  --color-text-secondary-inverse: #D9D9D9;
  --color-text-on-dark: #FFFFFF;

  /* §1  Semantic — feedback */
  --color-semantic-success: #0BAA5C;
  --color-semantic-warning: #FFB800;
  --color-semantic-error: #E0422C;
  --color-semantic-info: #663CE4;

  /* §1  Warmth accent (Austrian, used as spice) */
  --color-warmth-accent: #F04E2C;

  /* §1  Card / panel / inset surfaces (light mode defaults) */
  --color-surface-panel: #F5F5F5;
  --color-surface-inset: #ECECEC;

  /* §1  Borders */
  --color-border-light: #D9D9D9;
  --color-border-dark: #424242;

  /* §2  Typography — Font families */
  --font-family-display: 'Volte', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-body: 'Volte', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-semibold: 'Volte', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* §2  Typography — Font weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* §2  Typography — Type scale (mobile-first base values) */
  --font-size-caption: 13px;
  --font-size-small: 14px;
  --font-size-body: 16px;
  --font-size-heading-h3: 20px;
  --font-size-heading-h2: 22px;       /* h2.mobile: 22px on mobile, 28px on desktop */
  --font-size-heading-h1: 36px;
  --font-size-display: 48px;          /* display scales: 48px mobile, 56px desktop */
  --font-size-display-xl: 48px;       /* display.xl scales: 48px mobile, 80px desktop */
  --font-size-eyebrow: 13px;

  /* §2  Typography — Line heights */
  --line-height-caption: 1.4;
  --line-height-small: 1.5;
  --line-height-body: 1.7;
  --line-height-heading-h3: 1.4;
  --line-height-heading-h2: 1.3;
  --line-height-heading-h1: 1.2;
  --line-height-display: 1.1;
  --line-height-display-xl: 1.05;     /* 1.0 risk umlaut collision; 1.05 safe default */

  /* §2  Typography — Letter spacing (tracking) */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --tracking-wide: 0.02em;

  /* §3  Spacing scale */
  --space-scale-0: 0;
  --space-scale-1: 4px;
  --space-scale-2: 8px;
  --space-scale-3: 12px;
  --space-scale-4: 16px;
  --space-scale-5: 20px;
  --space-scale-6: 24px;
  --space-scale-7: 28px;
  --space-scale-8: 32px;
  --space-scale-10: 40px;
  --space-scale-12: 48px;
  --space-scale-16: 64px;
  --space-scale-24: 96px;
  --space-scale-32: 128px;

  --space-section-vertical: 64px;
  --space-container-side: 24px;

  /* §4  Radii */
  --radius-scale-none: 0px;
  --radius-scale-sm: 4px;
  --radius-scale-md: 8px;
  --radius-scale-lg: 12px;
  --radius-scale-xl: 16px;
  --radius-scale-2xl: 20px;
  --radius-scale-full: 999px;
  --radius-scale-pill: 999px;
  --faq-max-width: 860px;
  --faq-gap: 12px;
  --faq-card-padding: 16px 24px;
  --faq-card-padding-mobile: 14px 18px;
  --faq-font-size-q: var(--font-size-body);
  --faq-font-size-a: var(--font-size-body);
  --faq-radius: var(--radius-scale-lg);

  /* §5  Elevation (shadows — minimal, borders preferred) */
  --shadow-level-none: none;
  --shadow-level-dropdown: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-level-modal: 0 8px 32px rgba(0, 0, 0, 0.20);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 14px 32px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
  --shadow-card-dark: 0 4px 18px -2px rgba(0, 0, 0, 0.35), 0 2px 6px -1px rgba(0, 0, 0, 0.2);
  --shadow-card-dark-hover: 0 16px 36px -4px rgba(0, 0, 0, 0.55), 0 6px 14px -2px rgba(0, 0, 0, 0.3);
  --shadow-elevation-card: var(--shadow-card);
  --shadow-elevation-card-hover: var(--shadow-card-hover);

  /* §6  Motion — durations */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 300ms;
  --motion-duration-slow: 500ms;
  --motion-duration-instant: 0ms;
  --motion-duration-stagger: 50ms;
  --motion-duration-enter: 400ms;
  --motion-duration-marquee: 35s;
  --motion-distance-enter: 12px;
  --motion-duration-spinner: 600ms;
  --motion-duration-hover-delay: 200ms;

  /* §6  Motion — easing (snappy, no bounce) */
  --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* §9  Z-index scale */
  --z-index-base: 0;
  --z-index-sticky: 100;
  --z-index-dropdown: 200;
  --z-index-offcanvas: 300;
  --z-index-modal: 400;
  --z-index-toast: 500;

  /* §10  Opacity */
  --opacity-level-disabled: 0.5;
  --opacity-level-hover: 0.8;
  --opacity-level-overlay: 0.5;
  --opacity-level-placeholder: 0.6;

  /* §11  Borders */
  --border-width-hairline: 1px;
  --border-width-standard: 2px;
  --border-focus-default: 2px solid var(--focus-ring-color);

  /* §12  Focus ring */
  --focus-ring-color: var(--color-brand-purple);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --focus-ring-outer: rgba(102, 60, 228, 0.18);

  /* §13  Font weight tokens (aliases) */
  /* (already defined above as --font-weight-*) */

  /* §14  Layout tokens */
  --layout-container-max: 1280px;
  --layout-prose-max: 65ch;
  --layout-headline-max: 840px;
  --layout-subhead-max: 720px;
  --layout-breakpoint-mobile: 360px;
  --layout-breakpoint-tablet: 768px;
  --layout-breakpoint-desktop: 1024px;
  --layout-breakpoint-wide: 1440px;

  /* §6.5  Component tokens — Card */
  --card-padding: 32px;
  --card-padding-compact: 24px;
  --card-title-to-body-gap: 12px;
  --card-gap: 24px;

  /* §6.5  Component tokens — Form field */
  --formfield-label-to-input-gap: 8px;
  --formfield-stack-gap: 24px;

  /* Compatibility aliases for base typography and unmodified buttons. */
  --lp-accent: var(--color-brand-purple);
  --lp-accent-contrast: #ffffff;
  --lp-link: var(--color-text-link);
  --lp-focus-ring: var(--focus-ring-outer);
  --lp-bg: var(--color-surface-primary);
  --lp-fg: var(--color-text-primary);
  --lp-muted: var(--color-text-secondary);
  --lp-border: var(--color-border-light);
  --lp-radius: var(--radius-scale-md);
  --lp-max-width: var(--layout-container-max);
  --lp-font-body: var(--font-family-body);
  --lp-font-heading: var(--font-family-semibold);
}

/* ─────────────────────────────────────────────────────────────
   DARK MODE TOKENS
   Light is default (ADR-0036). Dark activates via [data-theme='dark'].
   Dark surfaces use lightness variation for depth instead of shadows.
   §1 + theme-variants.md
   ───────────────────────────────────────────────────────────── */

:root[data-theme='dark'] {
  --color-surface-primary: var(--color-navy);
  --color-surface-secondary: #1a1f3a;
  --color-surface-tertiary: var(--color-navy-card-hover);
  --color-surface-card: var(--color-navy-card);
  --color-card-border: var(--color-navy-border);
  --color-surface-panel: #0f1322;
  --color-surface-inset: #0b0f1a;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #D9D9D9;
  --color-text-link: var(--color-brand-blue);
  --color-text-accent: var(--color-brand-blue);
  --color-text-success: #5CE0A3;
  --color-control-border: #8494D0;
  --focus-ring-color: var(--color-brand-blue);

  --color-border-light: var(--color-navy-border);
  --color-border-dark: var(--color-navy-border);

  --lp-bg: var(--color-surface-primary);
  --lp-fg: var(--color-text-primary);
  --lp-muted: var(--color-text-secondary);
  --lp-border: var(--color-border-light);

  --shadow-elevation-card: var(--shadow-card-dark);
  --shadow-elevation-card-hover: var(--shadow-card-dark-hover);

  /* The solid focus line supplies contrast; the outer halo is decorative. */
  --focus-ring-outer: rgba(14, 193, 246, 0.35);
}

/* Dark mode section-specific overrides — ensure contrast between section types.
   In dark mode: page bg = navy #131829 (ADR-0045), section--dark = gradient (#131829 → #2a2238).
   The gradient is darker than the page, creating inverted depth. */
:root[data-theme='dark'] .section--light {
  background: var(--color-surface-primary);
}





:root[data-theme='dark'] .module-anchor + .module-anchor .section--light {
  border-top-color: var(--color-border-light);
}

:root[data-theme='dark'] .clients {
  border-block-color: var(--color-border-light);
}

:root[data-theme='dark'] .pulse__browser {
  border-color: var(--color-border-light);
  box-shadow: none;
}

:root[data-theme='dark'] .nav-dropdown {
  background: var(--color-surface-secondary);
  border-color: var(--color-border-light);
}

:root[data-theme='dark'] .nav-dropdown .nav-entry:hover,
:root[data-theme='dark'] .nav-dropdown .nav-entry:focus-visible,
:root[data-theme='dark'] .nav-dropdown .nav-entry[aria-current='page'] {
  background: var(--color-surface-tertiary);
}

:root[data-theme='dark'] .proof__faq-item {
  border-bottom-color: var(--color-border-light);
}

:root[data-theme='dark'] .proof__faq-question {
  color: var(--color-text-primary);
}

:root[data-theme='dark'] .proof__faq-answer {
  color: var(--color-text-secondary);
}

:root[data-theme='dark'] #header {
  border-bottom-color: var(--color-border-light);
}

:root[data-theme='dark'] .header__scroll-indicator {
  background: var(--color-border-light);
}
:root[data-theme='dark'] .section--dark {
  background: var(--color-navy);
}

:root[data-theme='dark'] #footer {
  background: var(--color-navy-footer-gradient);
}

:root[data-theme='dark'] .objections__question,
:root[data-theme='dark'] .objections__headline,
:root[data-theme='dark'] .industries__headline {
  color: var(--color-text-primary);
}

:root[data-theme='dark'] .objections__answer,
:root[data-theme='dark'] .industries__card-clients,
:root[data-theme='dark'] .industries__card-value {
  color: var(--color-text-secondary);
}

:root[data-theme='dark'] .objections__eyebrow,
:root[data-theme='dark'] .industries__eyebrow {
  color: var(--color-text-accent);
}

:root[data-theme='dark'] .objections,
:root[data-theme='dark'] .industries {
  border-top-color: var(--color-border-light);
}

:root[data-theme='dark'] .objections__proof-link,
:root[data-theme='dark'] .industries__card-link {
  color: var(--color-text-accent);
}

:root[data-theme='dark'] .objections__check {
  color: var(--color-text-accent);
}

:root[data-theme='dark'] .gallery-nav__btn {
  background: var(--color-surface-card);
  border-color: var(--color-border-light);
  color: var(--color-text-secondary);
}

:root[data-theme='dark'] .pulse__faq-heading,
:root[data-theme='dark'] .pulse__faq-question {
  color: var(--color-text-primary);
}

:root[data-theme='dark'] .pulse__faq-answer,
:root[data-theme='dark'] .pulse__faq-chevron {
  color: var(--color-text-secondary);
}

:root[data-theme='dark'] .pulse__faq-item,
:root[data-theme='dark'] .pulse__faq {
  border-color: var(--color-border-light);
}

:root[data-theme='dark'] .proof__icon {
  color: var(--color-text-accent);
}

:root[data-theme='dark'] .clients__logo img {
  filter: grayscale(100%) brightness(1.8);
  opacity: 0.6;
}

:root[data-theme='dark'] .clients__logo:hover img {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   §0  TOKEN NAMING CONVENTION
   category.group.property.variant → --category-group-property-variant
   Both physical and semantic names are valid (per §0A).
   ───────────────────────────────────────────────────────────── */