/* ============================================================
   DESIGN TOKENS — variables.css
   Single source of truth for all design decisions
   ============================================================ */

:root {
  /* --- COLOR PALETTE --- */
  --clr-bg-primary:    #f8f9fa;
  --clr-bg-secondary:  #ffffff;
  --clr-bg-card:       #ffffff;
  --clr-bg-elevated:   #f1f3f5;
  --clr-bg-surface:    #f1f3f5;

  --clr-accent:        #c1121f;
  --clr-accent-hover:  #9b0d18;
  --clr-accent-glow:   rgba(193, 18, 31, 0.15);

  --clr-blue:          #1d4ed8;
  --clr-blue-light:    #2563eb;
  --clr-blue-glow:     rgba(29, 78, 216, 0.15);

  --clr-text-primary:  #111827;
  --clr-text-secondary:#4b5563;
  --clr-text-muted:    #6b7280;   /* WCAG AA-compliant на белом */
  --clr-text-inverse:  #ffffff;

  --clr-border:        rgba(0, 0, 0, 0.08);
  --clr-border-hover:  rgba(0, 0, 0, 0.16);
  --clr-border-accent: rgba(193, 18, 31, 0.3);

  --clr-white:         #ffffff;
  --clr-black:         #000000;

  /* --- SEMANTIC STATUS COLORS --- */
  --clr-success:        #10b981;
  --clr-success-bg:     rgba(16, 185, 129, 0.08);
  --clr-success-border: rgba(16, 185, 129, 0.22);
  --clr-success-text:   #065f46;
  --clr-success-dark:   #059669;

  --clr-danger:         #ef4444;
  --clr-danger-bg:      rgba(239, 68, 68, 0.05);
  --clr-danger-border:  rgba(239, 68, 68, 0.2);
  --clr-danger-text:    #dc2626;

  --clr-warning:        #f59e0b;
  --clr-warning-bg:     rgba(245, 158, 11, 0.08);
  --clr-warning-border: rgba(245, 158, 11, 0.22);
  --clr-warning-text:   #b45309;

  --clr-info:           #3b82f6;
  --clr-info-bg:        rgba(59, 130, 246, 0.08);
  --clr-info-border:    rgba(59, 130, 246, 0.22);
  --clr-info-text:      #1d4ed8;

  /* --- SURFACE OVERLAYS (replaces raw rgba(0,0,0,X) hacks) --- */
  --clr-overlay-subtle:  rgba(0, 0, 0, 0.04);
  --clr-overlay-hover:   rgba(0, 0, 0, 0.07);
  --clr-overlay-active:  rgba(0, 0, 0, 0.12);

  /* --- GRADIENTS --- */
  --gradient-hero:     linear-gradient(135deg, #f1f5f9 0%, #e8eef5 50%, #f8fafc 100%);
  --gradient-accent:   linear-gradient(135deg, #c1121f 0%, #9b0d18 100%);
  --gradient-blue:     linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  --gradient-card:     linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  --gradient-glow-r:   radial-gradient(ellipse at center, rgba(193, 18, 31, 0.08) 0%, transparent 70%);
  --gradient-glow-b:   radial-gradient(ellipse at center, rgba(29, 78, 216, 0.08) 0%, transparent 70%);

  /* --- TYPOGRAPHY --- */
  --font-primary:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:      'Outfit', var(--font-primary);

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   1.875rem;   /* 30px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-5xl:   3.75rem;    /* 60px */
  --fs-6xl:   4.5rem;     /* 72px */

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

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;

  /* --- SPACING --- */
  --sp-1:   0.25rem;   /* 4px */
  --sp-2:   0.5rem;    /* 8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */

  /* --- BORDER RADIUS --- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-3xl:  24px;
  --r-full: 9999px;

  /* --- SHADOWS --- */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:     0 16px 64px rgba(0,0,0,0.16);
  --shadow-accent: 0 8px 32px var(--clr-accent-glow);
  --shadow-blue:   0 8px 32px var(--clr-blue-glow);
  --shadow-glow-r: 0 0 40px var(--clr-accent-glow);
  --shadow-glow-b: 0 0 40px var(--clr-blue-glow);

  /* --- TRANSITIONS --- */
  --t-fast:    150ms ease;
  --t-normal:  250ms ease;
  --t-slow:    400ms ease;
  --t-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- LAYOUT --- */
  --max-width:     1440px;
  --container-px:  var(--sp-4);
  --header-height: 72px;

  /* --- Z-INDEX SCALE --- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}

/* --- RESPONSIVE CONTAINER PADDING --- */
@media (min-width: 768px) {
  :root {
    --container-px: var(--sp-6);
    --header-height: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-px: var(--sp-8);
  }
}

@media (min-width: 1440px) {
  :root {
    --container-px: var(--sp-12);
  }
}

/* ============================================================
   DARK THEME — overrides colour & gradient tokens only
   Applied via data-theme="dark" on <html>
   Palette inspired by GitHub / Linear / Vercel dark modes:
   - Near-neutral surfaces with minimal blue tint
   - Clear 5-level surface hierarchy
   - Enough contrast without harsh black-on-black
   ============================================================ */
[data-theme="dark"] {
  /* Surface hierarchy: primary → secondary → surface → card → elevated
     Each step is ~6–8 luminosity points brighter — visually distinct */
  --clr-bg-primary:    #0d1017;  /* Page base — deep, not pure black */
  --clr-bg-secondary:  #151920;  /* Header, footer, nav bar */
  --clr-bg-surface:    #191c26;  /* Alternative surface (finder, sections) */
  --clr-bg-card:       #1e2130;  /* Cards — clear step above page */
  --clr-bg-elevated:   #252838;  /* Dropdowns, tooltips, raised panels */

  --clr-accent:        #e8202f;
  --clr-accent-hover:  #c1121f;
  --clr-accent-glow:   rgba(232, 32, 47, 0.22);

  --clr-blue:          #3b82f6;
  --clr-blue-light:    #60a5fa;
  --clr-blue-glow:     rgba(59, 130, 246, 0.22);

  --clr-text-primary:  #f0f2f8;  /* Almost white — max readability */
  --clr-text-secondary:#d1d5db;  /* Light gray — clearly visible */
  --clr-text-muted:    #a8b2c4;  /* Readable mid-gray — was #7a8599, too dark */
  --clr-text-inverse:  #111827;

  --clr-border:        rgba(255, 255, 255, 0.08);
  --clr-border-hover:  rgba(255, 255, 255, 0.16);
  --clr-border-accent: rgba(232, 32, 47, 0.40);

  /* Surface overlays — correct rgba() sense for dark backgrounds */
  --clr-overlay-subtle:  rgba(255, 255, 255, 0.04);
  --clr-overlay-hover:   rgba(255, 255, 255, 0.08);
  --clr-overlay-active:  rgba(255, 255, 255, 0.14);

  --gradient-hero:  linear-gradient(135deg, #0d1017 0%, #151920 50%, #1e2130 100%);
  --gradient-blue:  linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --gradient-card:  linear-gradient(145deg, #1e2130 0%, #191c26 100%);
  --gradient-glow-r:radial-gradient(ellipse at center, rgba(232,32,47,0.12) 0%, transparent 70%);
  --gradient-glow-b:radial-gradient(ellipse at center, rgba(59,130,246,0.12) 0%, transparent 70%);

  /* Shadows in dark mode: stronger black + inner highlight for depth */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.5),  inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.65);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.75);

  --clr-success:        #34d399;
  --clr-success-bg:     rgba(52, 211, 153, 0.10);
  --clr-success-border: rgba(52, 211, 153, 0.22);
  --clr-success-text:   #6ee7b7;
  --clr-success-dark:   #10b981;

  --clr-danger:         #f87171;
  --clr-danger-bg:      rgba(248, 113, 113, 0.10);
  --clr-danger-border:  rgba(248, 113, 113, 0.22);
  --clr-danger-text:    #fca5a5;

  --clr-warning:        #fbbf24;
  --clr-warning-bg:     rgba(251, 191, 36, 0.10);
  --clr-warning-border: rgba(251, 191, 36, 0.22);
  --clr-warning-text:   #fcd34d;

  --clr-info:           #60a5fa;
  --clr-info-bg:        rgba(96, 165, 250, 0.10);
  --clr-info-border:    rgba(96, 165, 250, 0.22);
  --clr-info-text:      #93c5fd;
}