/**
 * Tech Sutro — Design Tokens & Theme Variables
 * "Bold Tech / Glass" system.
 * Light theme = Aurora Glass (default).
 * Dark theme  = Obsidian Glass.
 * Pure CSS custom properties — no frameworks.
 */

/* ==================================================================
   PRIMITIVES — typography, layout, spacing, radii, motion, z-index
   ================================================================== */

:root {

  /* ----------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------- */

  --font-sans:
    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;

  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --text-base-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --text-scale-ratio: 1.2;

  --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-md: var(--text-base-size);
  --text-lg: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.45vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 0.6vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 2rem + 0.8vw, 3rem);
  --text-5xl: clamp(2.75rem, 2.4rem + 1vw, 3.75rem);
  --text-6xl: clamp(3rem, 2.4rem + 2.4vw, 4.75rem);

  --leading-tight: 1.1;
  --leading-base: 1.6;
  --leading-loose: 1.85;

  --tracking-tight: -0.02em;
  --tracking-base: 0;
  --tracking-wide: 0.02em;

  /* ----------------------------------------------------------------
     LAYOUT & SPACING
     ---------------------------------------------------------------- */

  --container-max: 1240px;
  --container-narrow: 980px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ----------------------------------------------------------------
     RADII
     ---------------------------------------------------------------- */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --card-radius: var(--radius-xl);

  /* ----------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------- */

  --transition-fast: 140ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-base: 240ms cubic-bezier(0.2, 0, 0.2, 1);
  --transition-slow: 420ms cubic-bezier(0.2, 0, 0.2, 1);

  /* ----------------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------------- */

  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
}


/* ==================================================================
   LIGHT THEME — Aurora Glass (default)
   A cool, high-key canvas lit by aurora gradients, with frosted
   glass surfaces and an electric sapphire → violet → cyan accent.
   ================================================================== */

:root,
[data-theme='light'] {

  /* ----------------------------------------------------------------
     BASE COLORS
     ---------------------------------------------------------------- */

  --bg-page: #EDF1F8;
  --bg-surface: #F6F8FC;
  --bg-surface-2: #E6EAF3;
  --bg-surface-3: #D9DFEC;
  --bg-elevated: #FFFFFF;

  /* ----------------------------------------------------------------
     TEXT COLORS
     ---------------------------------------------------------------- */

  --text-primary: #0A0F1E;
  --text-secondary: #838488;
  --text-muted: #66708A;
  --text-tertiary: #8A93A8;
  --text-inverse: #F6F8FC;

  /* ----------------------------------------------------------------
     ACCENT / BRAND
     ---------------------------------------------------------------- */

  --accent-primary: #2E6BFF;
  --accent-secondary: #7C4DFF;
  --accent-3: #12C8D8;

  --accent-glow: rgba(46, 107, 255, 0.24);
  --accent-glow-2: rgba(124, 77, 255, 0.20);

  --accent-gradient: linear-gradient(
    135deg,
    #2E6BFF 0%,
    #7C4DFF 52%,
    #12C8D8 100%
  );

  --accent-gradient-2: linear-gradient(
    135deg,
    #7C4DFF 0%,
    #2E6BFF 100%
  );

  --accent-gradient-soft: linear-gradient(
    135deg,
    rgba(46, 107, 255, 0.16),
    rgba(124, 77, 255, 0.10)
  );

  /* ----------------------------------------------------------------
     AURORA / BACKGROUND LIGHT
     ---------------------------------------------------------------- */

  --aurora-1: rgba(46, 107, 255, 0.30);
  --aurora-2: rgba(124, 77, 255, 0.24);
  --aurora-3: rgba(18, 200, 216, 0.20);
  --grid-line: rgba(10, 15, 30, 0.05);

  /* ----------------------------------------------------------------
     GLASS
     ---------------------------------------------------------------- */

  --glass-bg: rgba(255, 255, 255, 0.60);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-bg-soft: rgba(255, 255, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-highlight: rgba(255, 255, 255, 0.90);
  --glass-blur: 16px;

  /* ----------------------------------------------------------------
     BORDERS & DIVIDERS
     ---------------------------------------------------------------- */

  --border-subtle: rgba(10, 15, 30, 0.07);
  --border-base: rgba(10, 15, 30, 0.11);
  --border-strong: rgba(10, 15, 30, 0.20);
  --border-color: rgba(10, 15, 30, 0.10);

  /* ----------------------------------------------------------------
     SURFACES (component-level)
     ---------------------------------------------------------------- */

  --surface-color: rgba(255, 255, 255, 0.62);
  --surface-primary: rgba(255, 255, 255, 0.62);
  --surface-secondary: rgba(255, 255, 255, 0.42);
  --background-color: #E6EAF3;

  /* ----------------------------------------------------------------
     INTERACTIVE
     ---------------------------------------------------------------- */

  --btn-bg: rgba(255, 255, 255, 0.70);
  --btn-bg-hover: rgba(255, 255, 255, 0.95);
  --btn-border: rgba(10, 15, 30, 0.12);
  --btn-text: #0A0F1E;
  --btn-primary-text: #FFFFFF;

  --link-color: #2E6BFF;
  --link-hover: #1B4FD8;

  /* ----------------------------------------------------------------
     CARDS & SHADOWS
     ---------------------------------------------------------------- */

  --card-bg: rgba(255, 255, 255, 0.60);
  --card-bg-hover: rgba(255, 255, 255, 0.84);
  --card-border: rgba(255, 255, 255, 0.80);

  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 18px 40px -18px rgba(16, 24, 52, 0.28);

  --card-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 30px 64px -22px rgba(16, 24, 52, 0.34);

  --shadow-float:
    0 30px 64px -22px rgba(16, 24, 52, 0.34);

  --shadow-glow:
    0 18px 48px -12px rgba(46, 107, 255, 0.45);

  --shadow-sm:
    0 1px 2px rgba(16, 24, 52, 0.06),
    0 2px 8px rgba(16, 24, 52, 0.05);

  --shadow-md:
    0 6px 18px rgba(16, 24, 52, 0.10),
    0 2px 6px rgba(16, 24, 52, 0.06);

  --shadow-lg:
    0 18px 44px rgba(16, 24, 52, 0.14),
    0 6px 16px rgba(16, 24, 52, 0.08);

  /* ----------------------------------------------------------------
     HERO MEDIA
     ---------------------------------------------------------------- */

  --hero-veil-1: rgba(237, 241, 248, 0.30);
  --hero-veil-2: rgba(237, 241, 248, 0.70);
  --hero-veil-3: #EDF1F8;

  --header-scrim: rgba(237, 241, 248, 0.72);

  /* ----------------------------------------------------------------
     FORMS
     ---------------------------------------------------------------- */

  --input-bg: rgba(255, 255, 255, 0.72);
  --input-border: rgba(10, 15, 30, 0.14);
  --input-focus-border: rgba(46, 107, 255, 0.60);
  --input-text: #0A0F1E;
  --input-placeholder: #96A0B5;

  /* ----------------------------------------------------------------
     UTILITY
     ---------------------------------------------------------------- */

  --overlay-dark: rgba(6, 10, 22, 0.50);
  --overlay-light: rgba(10, 15, 30, 0.05);

  --ring-accent: rgba(46, 107, 255, 0.35);
}


/* ==================================================================
   DARK THEME — Obsidian Glass
   Deep obsidian canvas, frosted glass, luminous sapphire → violet glow.
   Applied when the dark theme is active, and also scoped to `.hero`,
   which sits on a permanently dark background video and must always
   read as dark regardless of the site theme.
   ================================================================== */

[data-theme='dark'],
.hero {

  /* ----------------------------------------------------------------
     BASE COLORS
     ---------------------------------------------------------------- */

  --bg-page: #04060E;
  --bg-surface: #080B16;
  --bg-surface-2: #0C1120;
  --bg-surface-3: #121829;
  --bg-elevated: #0D1322;

  /* ----------------------------------------------------------------
     TEXT COLORS
     ---------------------------------------------------------------- */

  --text-primary: #F2F5FB;
  --text-secondary: #A7B1C6;
  --text-muted: #6C7793;
  --text-tertiary: #67728D;
  --text-inverse: #04060E;

  /* ----------------------------------------------------------------
     ACCENT / BRAND
     ---------------------------------------------------------------- */

  --accent-primary: #5B9BFF;
  --accent-secondary: #9B7BFF;
  --accent-3: #3FE0EA;

  --accent-glow: rgba(91, 155, 255, 0.28);
  --accent-glow-2: rgba(155, 123, 255, 0.24);

  --accent-gradient: linear-gradient(
    135deg,
    #4C8DFF 0%,
    #9B7BFF 52%,
    #3FE0EA 100%
  );

  --accent-gradient-2: linear-gradient(
    135deg,
    #9B7BFF 0%,
    #4C8DFF 100%
  );

  --accent-gradient-soft: linear-gradient(
    135deg,
    rgba(91, 155, 255, 0.20),
    rgba(155, 123, 255, 0.12)
  );

  /* ----------------------------------------------------------------
     AURORA / BACKGROUND LIGHT
     ---------------------------------------------------------------- */

  --aurora-1: rgba(76, 141, 255, 0.30);
  --aurora-2: rgba(155, 123, 255, 0.26);
  --aurora-3: rgba(63, 224, 234, 0.18);
  --grid-line: rgba(148, 163, 184, 0.06);

  /* ----------------------------------------------------------------
     GLASS
     ---------------------------------------------------------------- */

  --glass-bg: rgba(16, 22, 38, 0.55);
  --glass-bg-strong: rgba(16, 22, 38, 0.78);
  --glass-bg-soft: rgba(16, 22, 38, 0.38);
  --glass-border: rgba(148, 163, 184, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.07);
  --glass-blur: 18px;

  /* ----------------------------------------------------------------
     BORDERS & DIVIDERS
     ---------------------------------------------------------------- */

  --border-subtle: rgba(148, 163, 184, 0.08);
  --border-base: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.26);
  --border-color: rgba(148, 163, 184, 0.14);

  /* ----------------------------------------------------------------
     SURFACES (component-level)
     ---------------------------------------------------------------- */

  --surface-color: rgba(16, 22, 38, 0.55);
  --surface-primary: rgba(16, 22, 38, 0.55);
  --surface-secondary: rgba(16, 22, 38, 0.40);
  --background-color: #0C1120;

  /* ----------------------------------------------------------------
     INTERACTIVE
     ---------------------------------------------------------------- */

  --btn-bg: rgba(20, 27, 45, 0.70);
  --btn-bg-hover: rgba(30, 39, 62, 0.90);
  --btn-border: rgba(148, 163, 184, 0.18);
  --btn-text: #F2F5FB;
  --btn-primary-text: #050A14;

  --link-color: #8FB4FF;
  --link-hover: #AFCBFF;

  /* ----------------------------------------------------------------
     CARDS & SHADOWS
     ---------------------------------------------------------------- */

  --card-bg: rgba(16, 22, 38, 0.55);
  --card-bg-hover: rgba(22, 30, 50, 0.80);
  --card-border: rgba(148, 163, 184, 0.16);

  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -24px rgba(0, 0, 0, 0.80);

  --card-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 34px 84px -26px rgba(0, 0, 0, 0.90);

  --shadow-float:
    0 34px 84px -26px rgba(0, 0, 0, 0.90);

  --shadow-glow:
    0 20px 60px -14px rgba(91, 155, 255, 0.50);

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 2px 8px rgba(0, 0, 0, 0.30);

  --shadow-md:
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.35);

  --shadow-lg:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.40);

  /* ----------------------------------------------------------------
     HERO MEDIA
     ---------------------------------------------------------------- */

  --hero-veil-1: rgba(4, 6, 14, 0.40);
  --hero-veil-2: rgba(4, 6, 14, 0.72);
  --hero-veil-3: #04060E;

  --header-scrim: rgba(4, 6, 14, 0.55);

  /* ----------------------------------------------------------------
     FORMS
     ---------------------------------------------------------------- */

  --input-bg: rgba(10, 15, 28, 0.70);
  --input-border: rgba(148, 163, 184, 0.16);
  --input-focus-border: rgba(91, 155, 255, 0.70);
  --input-text: #F2F5FB;
  --input-placeholder: #68738E;

  /* ----------------------------------------------------------------
     UTILITY
     ---------------------------------------------------------------- */

  --overlay-dark: rgba(2, 4, 10, 0.65);
  --overlay-light: rgba(255, 255, 255, 0.06);

  --ring-accent: rgba(91, 155, 255, 0.40);
}


/* ==================================================================
   COLOR UTILITIES
   ================================================================== */

.color-accent-primary {
  color: var(--accent-primary);
}

.color-accent-secondary {
  color: var(--accent-secondary);
}

.bg-accent-primary {
  background-color: var(--accent-primary);
}

.bg-accent-secondary {
  background-color: var(--accent-secondary);
}

.border-accent-primary {
  border-color: var(--accent-primary);
}

.border-accent-secondary {
  border-color: var(--accent-secondary);
}


/* ==================================================================
   PREFERRED COLOR SCHEME
   ================================================================== */

@media (prefers-color-scheme: light) {

  :root:not([data-theme]) {
    color-scheme: light;
  }

}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme]) {
    color-scheme: dark;
  }

}


/* ==================================================================
   REDUCED MOTION
   ================================================================== */

@media (prefers-reduced-motion: reduce) {

  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }

}