/* ════════════════════════════════════════════════════════════════
   VERIFLY — Design tokens (single source of truth)
   ──────────────────────────────────────────────────────────────
   Visual reference: drafts/draft-1/  (UI Library)
   Doc:              02_Design/design-system.md
   ──────────────────────────────────────────────────────────── */

:root {
  /* ─── Color · paper + ink ────────────────────────────────── */
  --color-paper:        #F6F8F8;
  --color-white:        #FFFFFF;
  --color-ink:          #181E3A;
  --color-mute:         #5C6275;

  /* ─── Color · brand ──────────────────────────────────────── */
  --color-blue:         #4B6CFF;
  --color-blue-deep:    #3551D4;
  --color-blue-soft:    #E0E7FF;

  /* ─── Color · borders & dividers ─────────────────────────── */
  --color-divider:      #BACCDE;
  --color-border-light: #EEF1F4;

  /* ─── Color · status / accent ────────────────────────────── */
  --color-success-bg:     #DCFCE7;
  --color-success-fg:     #15803D;
  --color-success-accent: #4ADE80;
  --color-violet-bg:      #E0E7FF;
  --color-violet-fg:      #4338CA;
  --color-warn-bg:        #FFEDD5;
  --color-warn-fg:        #C2410C;
  --color-pin:            #EF4444;

  /* ─── Color · dark hero surfaces ────────────────────────── */
  --color-navy:         #00082D;   /* mobile-first dark hero background */
  --color-blue-sky:     #77C4FF;   /* mobile hero eyebrow text */
  --color-ink-black:    #000000;   /* desktop surround void on mobile-first */

  /* ─── Color · glass surfaces ─────────────────────────────── */
  --color-glass-bg:    rgba(255, 255, 255, 0.80);
  --color-glass-dark:  rgba(24, 30, 58, 0.94);
  --color-glass-blur:  10px;

  /* ─── Type · families ────────────────────────────────────── */
  --font-sans: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* ─── Type · scale (per CLAUDE.md spec — 6 ступеней) ─────── */
  --text-display:        56px;   /* mobile: 48 */
  --text-display-mobile: 48px;
  --text-h2:             32px;   /* mobile: 28 */
  --text-h2-mobile:      28px;
  --text-h3:             20px;   /* mobile: 18 */
  --text-h3-mobile:      18px;
  --text-body:           16px;
  --text-small:          14px;
  --text-caption:        12px;

  /* ─── Spacing · 4px grid ─────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── Radius ─────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;   /* button */
  --radius-lg:  12px;
  --radius-xl:  14px;   /* deal card */
  --radius-2xl: 16px;   /* topbar island */
  --radius-pill: 999px;

  /* ─── Shadow ─────────────────────────────────────────────── */
  --shadow-island: 0 4px 14px -2px rgba(24, 30, 58, 0.08), 0 1px 3px rgba(24, 30, 58, 0.04);
  --shadow-card:   0 18px 48px -12px rgba(24, 30, 58, 0.18);
  --shadow-blue:   0 8px 24px -8px rgba(75, 108, 255, 0.5);
  --shadow-chip:   0 4px 14px -2px rgba(24, 30, 58, 0.18), 0 1px 3px rgba(24, 30, 58, 0.06);

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    180ms;
  --duration-normal:  280ms;
  --duration-slow:    600ms;
}