:root {
  /* ═══════════════════════════════════════════════════════════════
     PRIMITIVE COLORS — Tailwind native scale values
     Matches tailwind.config.js { neutral, red, blue, emerald, amber }
     ═══════════════════════════════════════════════════════════════ */

  /* neutral → tailwind neutral */
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;

  /* red → tailwind red */
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-700: #b91c1c;

  /* blue → tailwind blue */
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-700: #1d4ed8;

  /* emerald → tailwind emerald */
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-700: #047857;

  /* amber → tailwind amber */
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-700: #b45309;

  /* ═══════════════════════════════════════════════════════════════
     SEMANTIC TOKENS — Figma variable names
     Reference primitives above; override in .dark {} for dark mode
     ═══════════════════════════════════════════════════════════════ */

  /* Figma: muted-foreground */
  --dhv2-muted-foreground:       #6E6E6E;

  /* Figma: accent / accent-foreground */
  --dhv2-accent:                 rgba(0, 0, 0, 0.04);
  --dhv2-accent-foreground:      var(--color-neutral-800);

  /* Figma: destructive / destructive-foreground */
  --dhv2-destructive:            var(--color-red-500);
  --dhv2-destructive-foreground: var(--color-red-700);

  /* Figma: info / info-foreground */
  --dhv2-info:                   var(--color-blue-500);
  --dhv2-info-foreground:        var(--color-blue-700);

  /* Figma: success / success-foreground */
  --dhv2-success:                var(--color-emerald-500);
  --dhv2-success-foreground:     var(--color-emerald-700);

  /* Figma: warning / warning-foreground */
  --dhv2-warning:                var(--color-amber-500);
  --dhv2-warning-foreground:     var(--color-amber-700);

  /* Figma: border / input / ring */
  --dhv2-border:                 rgba(0, 0, 0, 0.08);
  --dhv2-border-strong:          rgba(0, 0, 0, 0.12);
  --dhv2-border-stronger:        rgba(0, 0, 0, 0.20);
  --dhv2-border-gray:            #D1D5DC;
  --dhv2-input:                  rgba(0, 0, 0, 0.10);
  --dhv2-ring:                   var(--color-neutral-400);

  --dhv2-surface:                #FFFFFF;
  /* Figma: body-background */
  --dhv2-body-background:        #FBFBFC;

  /* Figma: gradient-01 */
  --dhv2-gradient-01:            #FFF6F0;

  /* Figma: brand */
  --dhv2-brand-1:                #2463EB;
  --dhv2-brand-2:                #FBBB01;
  --dhv2-brand-2-alpha-08:       rgba(251, 187, 1, 0.08);
  --dhv2-brand-2-1:              #FCD665;
  --dhv2-brand-2-2:              #FEEFC1;
  --dhv2-brand-2-3:              #E2A801;
  --dhv2-brand-2-4:              #E3C15B;

  /* Figma: sidebar group */
  --dhv2-sidebar:                    var(--color-neutral-50);
  --dhv2-sidebar-foreground:         #535353;
  --dhv2-sidebar-primary-foreground: var(--color-neutral-50);
  --dhv2-sidebar-accent:             rgba(0, 0, 0, 0.04);
  --dhv2-sidebar-accent-foreground:  var(--color-neutral-800);
  --dhv2-sidebar-border:             rgba(0, 0, 0, 0.06);
  --dhv2-sidebar-ring:               var(--color-neutral-400);

  /* ═══════════════════════════════════════════════════════════════
     BACKWARD-COMPAT ALIASES — kept for Tailwind config references
     ═══════════════════════════════════════════════════════════════ */

  --dh-brand-gold:     var(--dhv2-brand-2);
  --dh-brand-gold-soft: #FFF6D6;
  --dh-brand-blue:     #2E6CF6;
  --dh-brand-blue-700: var(--dhv2-brand-1);

  --dh-ink-900: #0A0A0A;
  --dh-ink-800: #1E1E1E;
  --dh-ink-700: #262626;
  --dh-ink-500: var(--dhv2-muted-foreground);
  --dh-ink-400: #A1A1A1;
  --dh-ink-300: #D4D4D4;
  --dh-ink-200: #E5E5E5;
  --dh-ink-100: #F5F5F5;
  --dh-ink-50:  #FAFAFA;

  --dh-sky-50:  #F0F9FF;
  --dh-sky-100: #DFF2FE;
  --dh-sky-200: #B8E6FE;
  --dh-sky-400: #74D4FF;

  --dh-bg:        #F3F6FB;
  --dh-surface:   #FFFFFF;
  --dh-surface-2: var(--dhv2-body-background);
  --dh-hero:      var(--dh-sky-200);
  --dh-hero-soft: var(--dh-sky-50);

  --dh-success: var(--dhv2-success);
  --dh-danger:  var(--dhv2-destructive);
  --dh-warning: var(--dhv2-warning);
  --dh-info:    var(--dhv2-info);

  --dh-fg-1: var(--dh-ink-900);
  --dh-fg-2: var(--dh-ink-700);
  --dh-fg-3: var(--dhv2-muted-foreground);
  --dh-fg-4: var(--dh-ink-400);
  --dh-fg-inverse: #FFFFFF;

  --dh-border:        var(--dhv2-border);
  --dh-border-strong: rgba(0, 0, 0, 0.16);
  --dh-border-soft:   rgba(0, 0, 0, 0.04);

  /* ——— Shadows (subtle; dhelp never relies on big drop shadows) ——— */
  --dh-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --dh-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0,0,0,0.04);
  --dh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0,0,0,0.04);
  --dh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0,0,0,0.03);

  /* ——— Radii ——— */
  --dh-radius-sm: 6px;
  --dh-radius:    8px;
  --dh-radius-md: 12px;
  --dh-radius-lg: 16px;   /* recipient cards */
  --dh-radius-xl: 24px;
  --dh-radius-2xl: 32px;
  --dh-radius-3xl: 48px;  /* hero cards */
  --dh-radius-pill: 9999px;

  /* ——— Spacing (tailwind v4 scale) ——— */
  --dh-space-0: 0;
  --dh-space-1: 4px;
  --dh-space-2: 8px;
  --dh-space-3: 12px;
  --dh-space-4: 16px;
  --dh-space-5: 20px;
  --dh-space-6: 24px;
  --dh-space-8: 32px;
  --dh-space-10: 40px;
  --dh-space-12: 48px;
  --dh-space-16: 64px;
  --dh-space-20: 80px;
  --dh-space-24: 96px;

  /* ——— Type ——— */
  --dh-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dh-font-mono: "Menlo", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* Base sizes (Inter). Line-height tuned for Ukrainian/English mix. */
  --dh-size-xs:   12px; --dh-lh-xs:   16px;
  --dh-size-sm:   14px; --dh-lh-sm:   20px;
  --dh-size-base: 16px; --dh-lh-base: 24px;
  --dh-size-lg:   18px; --dh-lh-lg:   28px;
  --dh-size-xl:   20px; --dh-lh-xl:   28px;
  --dh-size-2xl:  22px; --dh-lh-2xl:  32px;
  --dh-size-3xl:  24px; --dh-lh-3xl:  32px;
  --dh-size-4xl:  32px; --dh-lh-4xl:  40px;
  --dh-size-5xl:  40px; --dh-lh-5xl:  48px;
  --dh-size-6xl:  44px; --dh-lh-6xl:  52px;

  --dh-tracking-tight: -0.02em;
  --dh-tracking-normal: 0;
  --dh-tracking-wide:  0.01em;

  /* ——— Semantic type roles ——— */
  --dh-display-size: var(--dh-size-6xl);
  --dh-display-lh:   100%;
  --dh-display-weight: 400;  /* Inter Regular @ big size — like hero */

  --dh-h1-size: var(--dh-size-5xl);
  --dh-h2-size: var(--dh-size-4xl);
  --dh-h3-size: var(--dh-size-3xl);
  --dh-h4-size: var(--dh-size-xl);

  --dh-body-size: var(--dh-size-base);
  --dh-body-lh: 1.5;

  --dh-label-size: var(--dh-size-sm);
  --dh-label-weight: 500;

  --dh-caption-size: var(--dh-size-xs);
}