/* =========================================================================
   Tutok — Design Tokens
   Single source of truth for color, type, space, radius, shadow, motion.
   Screens MUST consume these variables, never hardcode raw values.
   ========================================================================= */
:root {
  /* ---- Ink / neutrals ---- */
  --ink: #14121F;
  --ink-soft: #4A4660;
  --muted: #8E8A9C;
  --line: #ECEAF4;
  --bg: #F5F4FB;
  --surface: #FFFFFF;
  --surface-2: #F3F1FB;
  --surface-3: #E9E6F5;

  /* ---- Brand ---- */
  --brand: #5B5BF5;
  --brand-2: #7C3AED;
  --brand-ink: #3A2B8C;
  --brand-soft: #EEEBFE;

  /* ---- Accent / status ---- */
  --accent: #FFB020;
  --accent-2: #FF7A59;
  --success: #12B886;
  --success-soft: #E6F8F1;
  --danger: #F0455A;
  --danger-soft: #FDECEF;
  --warning: #F59E0B;
  --info: #3B82F6;
  --star: #FFB020;

  /* ---- Map palette ---- */
  --map-land: #EAF0F6;
  --map-block: #E1E7F0;
  --map-road: #FFFFFF;
  --map-water: #CBE3F5;
  --map-park: #D7EBDA;

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg, #6D5BF8 0%, #8B5CF6 55%, #A855F7 100%);
  --grad-brand-soft: linear-gradient(135deg, #EEEBFE 0%, #F5EEFE 100%);
  --grad-accent: linear-gradient(135deg, #FFB020, #FF7A59);
  --grad-success: linear-gradient(135deg, #16C098, #0FA37A);
  --grad-dark: linear-gradient(160deg, #2A2350 0%, #181432 100%);

  /* ---- Typography ---- */
  --font-display: "Sora", system-ui, -apple-system, sans-serif;
  --font-text: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --fs-h1: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h2: 1.25rem;
  --fs-h3: 1.0625rem;
  --fs-lg: 1.125rem;
  --fs-body: 0.95rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.6875rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ---- Radius ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-1: 0 1px 2px rgba(20,18,31,.06), 0 2px 8px rgba(20,18,31,.05);
  --sh-2: 0 6px 20px rgba(20,18,31,.09);
  --sh-3: 0 14px 36px rgba(20,18,31,.14);
  --sh-brand: 0 10px 26px rgba(108,76,241,.34);
  --sh-pop: 0 22px 50px rgba(20,18,31,.20);
  --sh-inset: inset 0 0 0 1px rgba(20,18,31,.04);

  /* ---- Motion ---- */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 440ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* ---- Layout ---- */
  --frame-w: 430px;
  --nav-h: 72px;
  --bar-h: 56px;

  /* ---- Z-index ladder ---- */
  --z-nav: 40;
  --z-footer: 45;
  --z-sheet: 60;
  --z-toast: 80;
}

/* Respect users who prefer reduced motion: kill the long, decorative durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}