/* ==========================================================================
   Web Mastro — Design Tokens
   Centralized system. Do not introduce new colors/fonts/radii outside this file.
   ========================================================================== */

:root {
  /* Mastro Flow gradient stops */
  --mastro-blue: #0A82F3;
  --mastro-purple: #5224D6;
  --mastro-magenta: #B11BAB;
  --mastro-pink: #F13063;
  --mastro-orange: #F4AA0A;
  --mastro-green: #80BE10;

  --mastro-flow: linear-gradient(
    90deg,
    var(--mastro-blue) 0%,
    var(--mastro-purple) 25%,
    var(--mastro-magenta) 45%,
    var(--mastro-pink) 60%,
    var(--mastro-orange) 80%,
    var(--mastro-green) 100%
  );

  /* Neutrals */
  --mastro-navy: #071225;
  --mastro-black: #050B17;
  --white: #FFFFFF;
  --off-white: #F7F8FA;

  /* Theme-aware light-section background. Kept separate from --white
     (which stays pure white always — used for permanently-dark-section
     accents like .btn--primary and the custom cursor) so only the actual
     "page surface" flips when dark mode is active. */
  --surface: #FFFFFF;

  /* Alternate flippable surface — for a section sitting directly next to
     another flippable section, so the two don't read as the same slab of
     color. Distinct from --surface/--off-white in both themes. */
  --surface-alt: #EDF0F5;

  --text-primary: #071225;
  --text-secondary: #5F6E85;
  --text-muted: #6B7280;

  --text-primary-inverse: #FFFFFF;
  --text-secondary-inverse: rgba(247, 248, 250, 0.68);
  --text-muted-inverse: rgba(247, 248, 250, 0.5);

  --border-light: #E5E7EB;
  --border-dark: rgba(255, 255, 255, 0.10);

  /* Liquid Glass material. Two tiers, mirroring the --surface/--mastro-black
     split: the theme-flippable tier (--glass-*) is used inside sections that
     re-theme with light/dark mode; the constant tier (--glass-*-on-dark) is
     used inside the permanently-dark sections (hero, nav, footer, etc.) and
     never changes with theme, same as --text-*-inverse. */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 32px rgba(7, 18, 37, 0.10), 0 1px 1px rgba(7, 18, 37, 0.05);

  --glass-bg-on-dark: rgba(18, 26, 43, 0.5);
  --glass-bg-on-dark-strong: rgba(18, 26, 43, 0.7);
  --glass-border-on-dark: rgba(255, 255, 255, 0.14);
  --glass-highlight-on-dark: rgba(255, 255, 255, 0.09);
  --glass-shadow-on-dark: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3);

  /* Always-bright glass — for buttons that must stay light/white regardless
     of theme (same reasoning as --white staying constant). */
  --glass-bg-bright: rgba(255, 255, 255, 0.78);
  --glass-border-bright: rgba(255, 255, 255, 0.85);
  --glass-shadow-bright: 0 8px 28px rgba(0, 0, 0, 0.22);

  --glass-blur: 20px;
  --glass-blur-strong: 32px;
  --glass-saturate: 1.7;

  /* Darker variants of the brand blue/pink for small text on light
     backgrounds, where the raw brand hex falls short of WCAG AA (4.5:1).
     Not used for large text, gradients, or non-text UI, where the raw
     brand colors already pass. */
  --mastro-blue-text: #0968C4;
  --mastro-pink-text: #C21148;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* Easing */
  --ease-mastro: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mastro-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-mastro-soft: cubic-bezier(0.22, 1, 0.36, 1);

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

  /* Fluid section padding */
  --section-pad-y: clamp(80px, 10vw, 160px);
  --section-pad-x: clamp(24px, 6vw, 96px);

  /* Type — fluid clamps */
  --fs-hero: clamp(22px, 3.8vw, 54px);
  --fs-h1: clamp(40px, 6.4vw, 92px);
  --fs-h2: clamp(22px, 3.1vw, 42px);
  --fs-h3: clamp(22px, 2.4vw, 34px);
  --fs-body-lg: clamp(17px, 1.4vw, 20px);
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-micro: 11px;

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.16em;

  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Motion durations */
  --dur-instant: 120ms;
  --dur-fast: 240ms;
  --dur-base: 480ms;
  --dur-slow: 800ms;
  --dur-slower: 1200ms;

  /* Z-index scale */
  --z-cursor: 9999;
  --z-preloader: 9000;
  --z-nav: 500;
  --z-overlay: 400;
  --z-glow: 50;
  --z-elevated: 10;

  --max-width: 1440px;

  color-scheme: light;
}

/* Dark theme — reuses the existing brand darks (mastro-black / mastro-navy)
   for the two surface tiers rather than inventing new colors, and only
   redefines the tokens that represent the CURRENTLY-LIGHT sections. The
   permanently-dark sections (hero, footer, etc.) already use
   --mastro-black/--mastro-navy directly and the "-inverse" text tokens, so
   they render identically in both themes by design. */
:root[data-theme="dark"] {
  --surface: #050B17;
  --off-white: #071225;
  --surface-alt: #0B1730;

  --text-primary: #F5F7FA;
  --text-secondary: #A6B0C3;
  --text-muted: #8891A3;

  --border-light: rgba(255, 255, 255, 0.12);

  --mastro-blue-text: #4FA8FF;
  --mastro-pink-text: #FF6B93;

  --glass-bg: rgba(18, 26, 43, 0.5);
  --glass-bg-strong: rgba(18, 26, 43, 0.7);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.09);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3);

  color-scheme: dark;
}

/* Reduced motion: shorten/neutralize durations globally, JS also branches on this */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
}