/* ============================================
   ДАЛИ ВИДАЛИ — Design Tokens
   ============================================ */

:root {
  /* ——— Brand colors (extracted from logo) ——— */
  --dv-sun:        #FFC72C;
  --dv-sun-soft:   #FFE07A;
  --dv-sun-deep:   #E5A600;

  --dv-sky:        #3FBFE0;
  --dv-sky-soft:   #B7E6F2;
  --dv-sky-deep:   #1E9CC2;

  --dv-leaf:       #7DC242;
  --dv-leaf-soft:  #C5E3A1;
  --dv-leaf-deep:  #4A9F2C;

  --dv-sea:        #1B5FAE;
  --dv-sea-soft:   #6FA1D6;
  --dv-sea-deep:   #134A8E;

  --dv-night:      #0E2C5C;
  --dv-night-soft: #2A4A7E;
  --dv-night-ink:  #08183A;

  /* ——— Neutrals (cool tinted) ——— */
  --n-0:   #FFFFFF;
  --n-50:  #F7F9FC;
  --n-100: #EEF2F7;
  --n-200: #DDE4EE;
  --n-300: #C2CCDC;
  --n-400: #9AA7BC;
  --n-500: #6F7E97;
  --n-600: #4F5D78;
  --n-700: #34405A;
  --n-800: #1F2A44;
  --n-900: #0E1733;

  /* ——— Semantic ——— */
  --bg:           var(--n-0);
  --bg-alt:       var(--n-50);
  --bg-deep:      var(--dv-night);
  --bg-deep-ink:  var(--dv-night-ink);
  --surface:      var(--n-0);
  --surface-alt:  var(--n-50);
  --border:       var(--n-200);
  --border-strong:var(--n-300);
  --text:         var(--dv-night);
  --text-muted:   var(--n-500);
  --text-dim:     var(--n-400);
  --text-on-dark: #ffffff;

  --accent:        var(--dv-sea);
  --accent-deep:   var(--dv-sea-deep);
  --accent-soft:   var(--dv-sky-soft);
  --accent-warm:   var(--dv-sun);

  --success:       var(--dv-leaf-deep);
  --success-soft:  #E6F4D9;
  --warning:       var(--dv-sun-deep);
  --warning-soft:  #FFF1C7;
  --danger:        #D9434F;
  --danger-soft:   #FBE0E2;
  --info:          var(--dv-sky-deep);
  --info-soft:     var(--dv-sky-soft);

  /* ——— Typography (two voices only) ——— */
  --font-head:    'Unbounded', 'Onest', system-ui, sans-serif;
  --font-body:    'Onest', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
  /* legacy alias — display now resolves to head italic */
  --font-display: var(--font-head);

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-80: 80px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* ——— Spacing (4px base) ——— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* ——— Radii ——— */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ——— Elevation ——— */
  --sh-1: 0 1px 2px rgba(14,44,92,.06), 0 1px 1px rgba(14,44,92,.04);
  --sh-2: 0 4px 12px rgba(14,44,92,.08), 0 2px 4px rgba(14,44,92,.04);
  --sh-3: 0 12px 28px rgba(14,44,92,.10), 0 4px 8px rgba(14,44,92,.05);
  --sh-4: 0 24px 56px rgba(14,44,92,.14), 0 8px 16px rgba(14,44,92,.06);
  --sh-glow-sun: 0 8px 24px rgba(255,199,44,.35);
  --sh-glow-sea: 0 8px 24px rgba(27,95,174,.30);

  /* ——— Motion ——— */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --d-1: 120ms;
  --d-2: 220ms;
  --d-3: 360ms;

  /* ——— Layout ——— */
  --container: 1240px;
  --container-tight: 1080px;
  --gutter: 24px;
}