/* WAVO Apple-inspired design tokens */
:root {
  /* Typography — SF Pro stack with system fallbacks */
  --wavo-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wavo-font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wavo-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --wavo-fs-hero: clamp(40px, 6.5vw, 88px);
  --wavo-fs-h1: clamp(32px, 4.5vw, 56px);
  --wavo-fs-h2: clamp(26px, 3.2vw, 40px);
  --wavo-fs-h3: clamp(20px, 2.2vw, 28px);
  --wavo-fs-h4: 20px;
  --wavo-fs-body-lg: 19px;
  --wavo-fs-body: 17px;
  --wavo-fs-body-sm: 15px;
  --wavo-fs-caption: 13px;
  --wavo-fs-micro: 12px;

  --wavo-lh-tight: 1.05;
  --wavo-lh-snug: 1.2;
  --wavo-lh-normal: 1.47;
  --wavo-lh-loose: 1.65;

  --wavo-tracking-tight: -0.022em;
  --wavo-tracking-snug: -0.015em;
  --wavo-tracking-normal: -0.005em;

  --wavo-weight-regular: 400;
  --wavo-weight-medium: 500;
  --wavo-weight-semibold: 600;
  --wavo-weight-bold: 700;

  /* Color — light-mode primary */
  --wavo-bg: #ffffff;
  --wavo-bg-elevated: #ffffff;
  --wavo-bg-tint: #f4f6fb;
  --wavo-bg-tint-deep: #e7ecf5;
  --wavo-bg-inverse: #17294c;

  --wavo-ink: #17294c;
  --wavo-ink-muted: #5b6478;
  /* WCAG AA: 4.5:1 against white for body text. #8a92a3 was ~3.2:1 (fail);
     #6c7488 is ~5.2:1 (pass). Used on field hints, eyebrow labels, caption
     metadata — all of which need to be legible, not just decorative. */
  --wavo-ink-subtle: #6c7488;
  --wavo-ink-inverse: #ffffff;

  --wavo-link: #5471af;
  --wavo-link-hover: #6480bf;
  --wavo-accent: #5471af;
  --wavo-accent-hover: #6480bf;
  --wavo-accent-active: #475f96;

  --wavo-hairline: rgba(23, 41, 76, 0.10);
  --wavo-hairline-strong: rgba(23, 41, 76, 0.20);

  --wavo-success: #2da44e;
  --wavo-success-bg: rgba(45, 164, 78, 0.10);
  --wavo-danger: #d50000;
  --wavo-danger-bg: rgba(213, 0, 0, 0.08);
  --wavo-warning: #b07c00;
  --wavo-warning-bg: rgba(176, 124, 0, 0.10);

  /* WAVO brand — minor (deep navy), major (medium blue), white */
  --wavo-brand: #17294c;
  --wavo-brand-soft: #2d3f6a;
  --wavo-brand-major: #5471af;

  /* Spacing — 4px base */
  --wavo-s-1: 4px;
  --wavo-s-2: 8px;
  --wavo-s-3: 12px;
  --wavo-s-4: 16px;
  --wavo-s-5: 24px;
  --wavo-s-6: 32px;
  --wavo-s-7: 48px;
  --wavo-s-8: 64px;
  --wavo-s-9: 96px;
  --wavo-s-10: 144px;

  /* Radius */
  --wavo-r-sm: 6px;
  --wavo-r-md: 12px;
  --wavo-r-lg: 18px;
  --wavo-r-xl: 28px;
  --wavo-r-pill: 980px;

  /* Shadow */
  --wavo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --wavo-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --wavo-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --wavo-shadow-hero: 0 24px 64px rgba(0, 0, 0, 0.12);

  /* Motion */
  --wavo-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wavo-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --wavo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wavo-ease-snap: cubic-bezier(0.16, 1, 0.3, 1);     /* Sequoia snap — quick + soft landing */
  --wavo-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);    /* Sequoia ease-out-quart */
  --wavo-dur-fast: 160ms;
  --wavo-dur: 280ms;
  --wavo-dur-slow: 480ms;
  --wavo-dur-xslow: 720ms;

  /* ===== macOS Sequoia tokens ===== */
  /* Materials — translucent surfaces with backdrop-filter blur (vibrancy) */
  --wavo-mat-thin: rgba(255, 255, 255, 0.55);
  --wavo-mat-regular: rgba(255, 255, 255, 0.72);
  --wavo-mat-thick: rgba(255, 255, 255, 0.85);
  --wavo-mat-chrome: rgba(255, 255, 255, 0.92);
  --wavo-mat-blur: saturate(180%) blur(24px);
  --wavo-mat-blur-strong: saturate(180%) blur(36px);

  /* Vibrancy tints — subtle accent washes used on surfaces */
  --wavo-vib-brand: rgba(23, 41, 76, 0.04);
  --wavo-vib-accent: rgba(84, 113, 175, 0.06);
  --wavo-vib-success: rgba(45, 164, 78, 0.08);

  /* Sequoia wallpaper — dramatic multi-stop washes inspired by macOS
     Sequoia desktop pictures. Should feel like the site is sitting on a
     real Mac desktop, not a faintly tinted white page. */
  --wavo-gradient-hero:
    radial-gradient(80vw 75vh at 8% -10%, rgba(127, 153, 211, 0.32), transparent 55%),
    radial-gradient(60vw 55vh at 92% 4%, rgba(178, 156, 211, 0.22), transparent 55%),
    radial-gradient(70vw 65vh at 50% 110%, rgba(122, 168, 197, 0.20), transparent 60%),
    radial-gradient(45vw 45vh at 78% 55%, rgba(214, 184, 222, 0.16), transparent 60%),
    radial-gradient(40vw 40vh at 18% 70%, rgba(140, 188, 215, 0.14), transparent 60%);
  --wavo-gradient-wallpaper:
    radial-gradient(90vw 85vh at 5% -15%, rgba(127, 153, 211, 0.38), transparent 55%),
    radial-gradient(70vw 70vh at 95% 8%, rgba(195, 162, 224, 0.28), transparent 55%),
    radial-gradient(60vw 60vh at 50% 95%, rgba(122, 168, 197, 0.22), transparent 60%),
    radial-gradient(40vw 40vh at 25% 60%, rgba(214, 184, 222, 0.16), transparent 60%);
  --wavo-gradient-tint:
    linear-gradient(180deg, rgba(244, 246, 251, 1) 0%, rgba(255, 255, 255, 1) 100%);
  --wavo-gradient-accent:
    linear-gradient(135deg, var(--wavo-accent) 0%, var(--wavo-brand-soft) 100%);
  --wavo-gradient-glass:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.25) 100%);

  /* Depth scale — Sequoia stacks surfaces in 5 elevation levels */
  --wavo-depth-0: none;
  --wavo-depth-1: 0 1px 2px rgba(23, 41, 76, 0.06), 0 1px 3px rgba(23, 41, 76, 0.04);
  --wavo-depth-2: 0 4px 12px rgba(23, 41, 76, 0.08), 0 1px 2px rgba(23, 41, 76, 0.04);
  --wavo-depth-3: 0 12px 28px rgba(23, 41, 76, 0.10), 0 2px 6px rgba(23, 41, 76, 0.05);
  --wavo-depth-4: 0 24px 56px rgba(23, 41, 76, 0.14), 0 4px 12px rgba(23, 41, 76, 0.06);
  /* The 1px contrast ring carries the WCAG 2.4.7 focus signal — it must
     hit ≥3:1 against adjacent colors, so it stays at full accent opacity.
     The 8px halo is decorative and stays soft. */
  --wavo-depth-glow: 0 0 0 2px rgba(84, 113, 175, 0.85), 0 8px 24px rgba(84, 113, 175, 0.20);
  --wavo-inner-shine: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Liquid Glass — inner hairline + outer soft shadow combo used on cards/buttons */
  --wavo-liquid-stroke: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
                        inset 0 1px 0 rgba(255, 255, 255, 0.8),
                        inset 0 -1px 0 rgba(23, 41, 76, 0.06);

  /* Material fallback — opaque substitute when backdrop-filter is unsupported.
     Always pulled from the elevated surface so it adapts to dark mode. */
  --wavo-mat-fallback: var(--wavo-bg-elevated);

  /* Glass surface — translucent panel background used by auth card, settings
     panes, empty states, etc. In light mode this is white with 78-85% alpha
     to read as frosted glass over the wallpaper; in dark mode it pulls from
     the dark elevated bg so the glass keeps its frosted feel without bleeding
     white into a dark UI. */
  --wavo-glass-soft: rgba(255, 255, 255, 0.78);
  --wavo-glass-regular: rgba(255, 255, 255, 0.82);
  --wavo-glass-strong: rgba(255, 255, 255, 0.85);

  /* Auth-page wallpaper gradient — Apple-ID style wash behind sign-in/register.
     Light: cool linear blue→white→blue. Dark: deep navy blacks with subtle
     warmth. Kept as a token so it stays in sync between light/dark. */
  --wavo-gradient-auth:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(84, 113, 175, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(23, 41, 76, 0.06), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(84, 113, 175, 0.08), transparent 70%),
    linear-gradient(180deg, #f6f8fc 0%, #ffffff 60%, #f4f6fb 100%);

  /* Sequoia radii — Mac windows are 10-14px; sheets/panels 14-20px; cards 22-30px */
  --wavo-r-window: 26px;        /* primary cards / panels */
  --wavo-r-window-lg: 32px;     /* hero cards / sheets */
  --wavo-r-window-xl: 40px;     /* dramatic feature panels */
  --wavo-r-control: 14px;        /* buttons / inputs (Mac controls) */
  --wavo-r-chip: 10px;

  /* Sequoia traffic-light decoration (decorative window dots) */
  --wavo-tl-close: #ff5f57;
  --wavo-tl-min: #ffbd2e;
  --wavo-tl-max: #28c840;

  /* Layout */
  --wavo-container-max: 1440px;
  --wavo-container-narrow: 980px;
  --wavo-container-padding: clamp(20px, 4vw, 48px);
  --wavo-section-y: clamp(64px, 9vw, 128px);

  --wavo-navbar-h: 76px;
  --wavo-z-navbar: 1000;
  --wavo-z-overlay: 1100;
  --wavo-z-modal: 1200;
  --wavo-z-toast: 1300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wavo-dur-fast: 0ms;
    --wavo-dur: 0ms;
    --wavo-dur-slow: 0ms;
  }
}