/* Central Mocha Sapphire theme tokens for TechPathReady. Change values here to update the website colour system. */
:root {
  --bg-mocha-deep: #04060a;
  --bg-mocha-soft: #05080d;
  --bg-sapphire-deep: #060f1c;
  --bg-sapphire-glow: rgba(43, 111, 168, 0.3);
  --bg-copper-glow: rgba(240, 197, 141, 0.14);
  --bg-vignette: rgba(1, 2, 4, 0.97);
  --wave-sapphire: rgba(110, 210, 255, 1);
  --wave-sapphire-bright: rgba(205, 245, 255, 1);
  --wave-sapphire-soft: rgba(60, 170, 230, 0.9);
  --wave-copper: rgba(240, 197, 141, 0.35);
  --wave-copper-bright: rgba(255, 233, 199, 0.45);
  --wave-copper-soft: rgba(198, 138, 82, 0.16);
  --wave-opacity-main: 0.95;
  --wave-opacity-secondary: 0.72;
  --panel-surface: rgba(8, 12, 16, 0.78);
  --panel-surface-2: rgba(30, 17, 9, 0.74);
  --panel-surface-gloss: rgba(255, 225, 179, 0.075);
  --panel-border-copper: rgba(240, 197, 141, 0.42);
  --panel-border-soft: rgba(255, 225, 179, 0.22);
  --panel-glow-sapphire: rgba(45, 140, 200, 0.3);
  --panel-glow-copper: rgba(240, 197, 141, 0.24);
  --panel-shadow: 0 24px 62px rgba(0, 0, 0, 0.44);
  --panel-inner-depth: inset 0 -44px 96px rgba(6, 17, 29, 0.13);
  --panel-inner-depth-soft: inset 0 -36px 78px rgba(6, 17, 29, 0.12);
  --panel-inner-depth-strong: inset 0 -56px 110px rgba(6, 17, 29, 0.14);
  --panel-radius-large: 28px;
  --glass-blur-strong: blur(30px);
  --glass-border-light: rgba(255, 255, 255, 0.18);
  --glass-border-copper-mix: rgba(240, 197, 141, 0.5);
  --glass-border-shadow: 0 0 0 1px var(--glass-border-light);
  --glass-shadow-soft: 0 0 30px rgba(227, 228, 237, 0.22);
  --glass-shadow-strong: 0 0 30px rgba(227, 228, 237, 0.37);
  --glass-panel-bg:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 24%),
    linear-gradient(150deg, rgba(31, 18, 10, 0.82), rgba(7, 12, 17, 0.74) 58%, rgba(6, 17, 29, 0.7));
  --glass-panel-bg-strong:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), transparent 22%),
    linear-gradient(150deg, rgba(25, 15, 9, 0.88), rgba(7, 12, 17, 0.82) 58%, rgba(6, 17, 29, 0.78));
  --glass-panel-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  --nav-panel-surface: linear-gradient(145deg, rgba(24, 14, 8, 0.74), rgba(7, 12, 17, 0.7));
  --nav-panel-surface-hover: linear-gradient(145deg, rgba(38, 23, 13, 0.84), rgba(7, 20, 33, 0.78));
  --nav-panel-border: rgba(240, 197, 141, 0.36);
  --nav-panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 225, 179, 0.09);
  --nav-glass-bg:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 34%),
    linear-gradient(135deg, rgba(24, 14, 8, 0.68), rgba(7, 12, 17, 0.72));
  --nav-glass-bg-hover:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(38, 23, 13, 0.84), rgba(7, 20, 33, 0.82));
  --nav-glass-border: rgba(240, 197, 141, 0.4);
  --nav-glass-border-hover: rgba(255, 225, 179, 0.64);
  --nav-glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 30px rgba(227, 228, 237, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --nav-hover-duration: 0.32s;
  --motion-parallax-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --parallax-strength-soft: 0.008;
  --parallax-strength-medium: 0.014;
  --parallax-strength-wave: 0.024;
  --cta-surface: rgba(24, 14, 8, 0.72);
  --cta-border: rgba(240, 197, 141, 0.42);
  --cta-highlight: rgba(255, 225, 179, 0.18);

  --color-bg: #030711;
  --color-bg-soft: #040814;
  --color-bg-deep: #07101d;
  --color-bg-hero-end: #0a1a2f;

  --color-sapphire-deep: #06111d;
  --color-sapphire-mid: #09233a;
  --color-sapphire: #1f6fa3;
  --color-sapphire-bright: #2d8cc8;
  --color-sapphire-light: #5aa7d6;

  --color-copper: #c68a52;
  --color-champagne: #d9a66f;
  --color-champagne-strong: #f0c58d;
  --color-champagne-light: #ffe1b3;

  --color-surface: var(--panel-surface-2);
  --color-surface-strong: var(--panel-surface);
  --color-surface-solid: rgba(18, 11, 7, 0.94);
  --color-card: var(--panel-surface);
  --color-card-mid: var(--panel-surface-2);
  --color-card-hover: rgba(36, 23, 14, 0.84);
  --color-card-strong: rgba(32, 18, 10, 0.78);
  --color-modal-overlay: rgba(5, 4, 3, 0.82);

  --color-border: var(--panel-border-copper);
  --color-border-strong: rgba(255, 225, 179, 0.58);
  --color-primary-border: rgba(45, 140, 200, 0.34);
  --color-success-border: rgba(138, 203, 159, 0.34);
  --color-warning-border: rgba(240, 197, 141, 0.42);
  --color-accent-border: rgba(198, 138, 82, 0.46);

  --color-text: #f7efe3;
  --color-text-muted: #d8c8b6;
  --color-heading: #ffe8c9;
  --color-subtle: #b89b82;
  --color-button-text-dark: #120b07;

  --color-primary: var(--color-sapphire-bright);
  --color-primary-strong: var(--color-sapphire-light);
  --color-primary-soft: rgba(45, 140, 200, 0.16);
  --color-primary-tint: rgba(45, 140, 200, 0.12);
  --color-primary-softer: rgba(45, 140, 200, 0.08);
  --color-primary-hover: rgba(45, 140, 200, 0.22);
  --color-primary-glow: rgba(45, 140, 200, 0.28);

  --color-accent: var(--color-champagne);
  --color-accent-strong: var(--color-champagne-light);
  --color-accent-soft: rgba(198, 138, 82, 0.16);

  --color-warning: var(--color-champagne-strong);
  --color-warning-soft: rgba(240, 197, 141, 0.14);
  --color-warning-glow: rgba(240, 197, 141, 0.22);
  --color-success: #9fe3c0;
  --color-success-soft: rgba(159, 227, 192, 0.12);

  --gradient-bg:
    radial-gradient(circle at 12% 7%, rgba(45, 140, 200, 0.2), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(198, 138, 82, 0.18), transparent 28%),
    linear-gradient(145deg, var(--color-bg), var(--color-bg-soft) 46%, var(--color-sapphire-deep));
  --gradient-hero:
    radial-gradient(circle at 16% 10%, rgba(45, 140, 200, 0.18), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(240, 197, 141, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(8, 6, 4, 0.74), rgba(18, 11, 7, 0.68) 42%, rgba(6, 17, 29, 0.7));
  --gradient-global-bg:
    radial-gradient(circle at 78% 8%, var(--bg-copper-glow), transparent 16%),
    radial-gradient(circle at 12% 88%, rgba(60, 175, 230, 0.55), transparent 30%),
    radial-gradient(circle at 38% 78%, rgba(80, 195, 255, 0.3), transparent 34%),
    linear-gradient(160deg, var(--bg-mocha-deep) 0%, var(--bg-mocha-soft) 45%, var(--bg-sapphire-deep) 100%);
  --gradient-global-glow:
    radial-gradient(circle at 16% 85%, rgba(80, 200, 255, 0.55), transparent 28%),
    radial-gradient(circle at 45% 70%, rgba(110, 215, 255, 0.2), transparent 32%);
  --gradient-card:
    var(--glass-panel-bg);
  --gradient-panel:
    var(--glass-panel-bg-strong);
  --gradient-button-primary: linear-gradient(135deg, var(--color-champagne-light), var(--color-champagne-strong) 48%, var(--color-copper));
  --gradient-button-secondary: linear-gradient(135deg, rgba(24, 14, 8, 0.62), rgba(7, 12, 17, 0.72));
  --gradient-wave-glow: linear-gradient(90deg, transparent, var(--wave-sapphire-bright), rgba(240, 197, 141, 0.42), transparent);

  --shadow-soft: 0 28px 80px rgba(0, 0, 0, 0.38);
  --shadow-card: var(--panel-shadow);
  --shadow-modal: 0 32px 90px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 30px var(--panel-glow-copper);
  --shadow-sapphire: 0 0 42px var(--panel-glow-sapphire);
  --shadow-copper-ring: 0 0 0 1px var(--panel-border-soft), inset 0 1px 0 rgba(255, 225, 179, 0.12);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --radius-shell: 42px;
  --radius-pill: 999px;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --transition-fast: 0.2s ease;
  --transition-normal: 0.32s ease;
  --transition-slow: 0.78s var(--ease-premium);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-reveal-distance: 26px;
  --motion-reveal-duration: 780ms;
  --motion-stagger-step: 70ms;

  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bg: var(--color-bg);
  --bg-2: var(--color-bg-soft);
  --card: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --accent-2: var(--color-primary);
  --success: var(--color-success);
  --gold: var(--color-warning);
  --shadow: var(--shadow-soft);
}