/* VuBerber — Design Tokens (Eight Sleep dark) */

:root {
  /* ─── Color ───────────────────────────────────── */
  --bg:            #000000;
  --surface:       #141414;
  --surface-2:     #1c1c1c;
  --surface-3:     #232323;
  --border:        #2a2a2a;
  --border-strong: #3a3a3a;
  --disabled:      #444444;

  --text:          #ffffff;
  --text-muted:    #999999;   /* #888 ↗ #999 — 4.5:1 kontrast için */
  --text-subtle:   #6a6a6a;
  --text-on-cta:   #000000;

  --cta-bg:        #ffffff;
  --cta-bg-hover:  #ebebeb;
  --cta-fg:        #000000;

  --danger:        #ff5547;
  --success:       #4ade80;
  --warning:       #fbbf24;

  /* ─── Typography ──────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               system-ui, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  26px;
  --fs-3xl:  32px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.4px;
  --tracking-normal: 0;
  --tracking-wide:   0.3px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ─── Spacing — 4/8 grid ──────────────────────── */
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 10px;
  --s-4: 14px;
  --s-5: 18px;
  --s-6: 22px;
  --s-7: 28px;
  --s-8: 36px;
  --s-9: 44px;
  --s-10: 56px;

  /* ─── Radius ──────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* ─── Sizing ──────────────────────────────────── */
  --touch-min:     44px;
  --bottom-nav-h:  64px;
  --top-bar-h:     52px;
  --container-max: 460px;

  /* ─── Motion ──────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Shadow / Glow ───────────────────────────── */
  --shadow-card:  0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-pop:   0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-cta:   0 0 0 0 rgba(255, 255, 255, 0);
  --glow-soft:    0 0 24px rgba(255, 255, 255, 0.06);

  /* ─── Z-index ─────────────────────────────────── */
  --z-bottom-nav: 40;
  --z-top-bar:    30;
  --z-sticky:     20;
  --z-modal:      80;
  --z-toast:      90;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}