/*
 * tubizy.ai - Signature Theme
 * All design tokens in one file. Swap this file to re-theme the site.
 *
 * Canonical values mirror the inline :root blocks in /index_waitlist.html
 * and /index_full.html so the refactor is purely additive: every variable
 * that either page consumes today is defined here with the same value.
 *
 * To create a new theme:
 *   1. Copy this file (e.g. to theme-ocean.css).
 *   2. Change only the values - keep every variable name.
 *   3. Swap the <link rel="stylesheet" href="/assets/theme.css?v=1">
 *      reference in the two index_*.html files.
 */

:root {
  /* ===== Brand colors (signature palette) ===== */
  --coral:        #E94560;
  --coral-light:  #f06a80;
  --coral-dark:   #c73550;
  --teal:         #00D4AA;
  --teal-dark:    #00b892;
  --teal-light:   #4ad9c0;  /* additive - for future use */
  --gold:         #FFC107;
  --gold-light:   #ffd25f;  /* additive - for future use */
  --blue:         #4A9EFF;

  /* ===== Surface colors ===== */
  --bg-dark:      #0D0D1A;
  --bg-card:      #16162B;
  --bg-alt:       #111125;
  --bg-active:    #1A1A35;  /* additive - for future use */
  --dark:         #1a1c26;
  --dark-card:    #16162B;
  --dark-lighter: #1e1e38;

  /* ===== Text ===== */
  --text-primary:   #FFFFFF;
  --text-secondary: #EDEFF6;
  --text-light:     #fff;
  --text-muted:     #BCC0CE;

  /* ===== Borders & overlays ===== */
  --border:          rgba(255,255,255,0.1);
  --border-soft:     rgba(255,255,255,0.06);  /* additive */
  --border-card:     rgba(255,255,255,0.08);  /* additive */
  --border-emphasis: rgba(255,255,255,0.1);   /* additive, alias of --border */

  /* ===== Typography ===== */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Open Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ===== Spacing scale ===== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ===== Radius ===== */
  --radius:       16px;
  --radius-sm:    10px;
  --radius-md:    8px;   /* additive */
  --radius-lg:    24px;
  --radius-xl:    16px;  /* additive, alias of --radius */
  --radius-full:  999px; /* additive */

  /* ===== Shadows ===== */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.2);
  --shadow-md:   0 8px 30px rgba(0,0,0,.3);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.4);
  --shadow-glow: 0 0 40px rgba(233,69,96,.25);
  /* additive semantic aliases */
  --shadow-card:         0 4px 20px rgba(0,0,0,0.3);
  --shadow-elevated:     0 12px 40px rgba(0,0,0,0.5);
  --shadow-brand-coral:  0 8px 24px rgba(233,69,96,0.4);
  --shadow-brand-teal:   0 8px 24px rgba(0,212,170,0.4);
  --shadow-brand-gold:   0 4px 20px rgba(255,193,7,0.25);

  /* ===== Transitions ===== */
  --transition:      0.35s cubic-bezier(.25,.46,.45,.94);
  --transition-fast: 0.15s ease;  /* additive */
  --transition-base: 0.2s ease;   /* additive */
  --transition-slow: 0.4s ease;   /* additive */

  /* ===== Gradients ===== */
  --gradient-coral:      linear-gradient(135deg, var(--coral), var(--coral-light));
  --gradient-teal:       linear-gradient(135deg, var(--teal),  var(--teal-light));
  --gradient-gold:       linear-gradient(135deg, var(--gold),  var(--gold-light));
  --gradient-coral-gold: linear-gradient(135deg, var(--coral), var(--gold));
  --gradient-hero:       linear-gradient(135deg, var(--bg-dark), var(--bg-card));
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition:      0s;
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
  }
}