/**
 * Aira Antivirus Design System — Core Tokens
 * Visual Direction: Premium Cybersecurity × AI Infrastructure
 * Strictly adhering to:
 * - better-colors (primitive ramps -> semantic role tokens)
 * - frontend-ui-engineering (fluid scales, 4px baseline spacing, touch targets)
 * - better-accessibility (WCAG 2.1 AA contrast, visible focus, reduced motion)
 * - frontend-design (distinctive technological aesthetic, zero generic AI tropes)
 */

:root {
  /* ==========================================================================
     1. Primitive Color Ramps (Hue-based, strictly consumed by semantic tokens)
     ========================================================================== */

  /* Neutral: Deep Obsidian to Cool Silver */
  --color-neutral-950: #07090d;
  --color-neutral-900: #0e131b;
  --color-neutral-850: #141b26;
  --color-neutral-800: #1a2332;
  --color-neutral-750: #222d40;
  --color-neutral-700: #2c3950;
  --color-neutral-600: #475569;
  --color-neutral-500: #64748b;
  --color-neutral-400: #94a3b8;
  --color-neutral-300: #cbd5e1;
  --color-neutral-200: #e2e8f0;
  --color-neutral-100: #f1f5f9;
  --color-neutral-50:  #f8fafc;

  /* Brand Accent: Precision Cyber Blue / Indigo */
  --color-accent-950: #0a1329;
  --color-accent-900: #11234c;
  --color-accent-800: #1c387b;
  --color-accent-700: #254db0;
  --color-accent-600: #2952e3;
  --color-accent-500: #3b66ff; /* Primary Brand Fill */
  --color-accent-400: #6085ff;
  --color-accent-300: #8ea7ff;
  --color-accent-200: #bfceff;
  --color-accent-100: #e0e7ff;
  --color-accent-50:  #eef2ff;

  /* Telemetry / Secondary Accent: Precision Cyan */
  --color-cyan-600: #0891b2;
  --color-cyan-500: #06b6d4;
  --color-cyan-400: #22d3ee;
  --color-cyan-300: #67e8f9;

  /* Status: Neutralized / Secure (Emerald) */
  --color-emerald-600: #059669;
  --color-emerald-500: #10b981;
  --color-emerald-400: #34d399;

  /* Status: Warning (Amber) */
  --color-amber-500: #f59e0b;
  --color-amber-400: #fbbf24;

  /* Status: Threat Alert / Danger (Crimson) */
  --color-danger-600: #e11d48;
  --color-danger-500: #f43f5e;
  --color-danger-400: #fb7185;

  /* ==========================================================================
     2. Semantic Surface Tokens (Roles used across components)
     ========================================================================== */
  --surface-canvas:              var(--color-neutral-950);  /* #07090d: deep obsidian */
  --surface-subtle:              var(--color-neutral-900);  /* #0e131b: page panels */
  --surface-card:                var(--color-neutral-850);  /* #141b26: default card layer */
  --surface-elevated:            var(--color-neutral-800);  /* #1a2332: elevated dialog/popover */
  --surface-interactive:         var(--color-neutral-750);  /* #222d40: button idle / inputs */
  --surface-interactive-hover:   var(--color-neutral-700);  /* #2c3950: hover state */
  --surface-interactive-active:  var(--color-neutral-800);

  /* Primary Accent Fill */
  --surface-accent-solid:        var(--color-accent-500);  /* #3b66ff */
  --surface-accent-hover:        var(--color-accent-400);  /* #6085ff */
  --surface-accent-active:       var(--color-accent-600);  /* #2952e3 */
  --surface-accent-subtle:       rgba(59, 102, 255, 0.08);

  /* ==========================================================================
     3. Semantic Border & Hairline Tokens
     ========================================================================== */
  --border-subtle:               rgba(255, 255, 255, 0.07);
  --border-default:              rgba(255, 255, 255, 0.12);
  --border-strong:               rgba(255, 255, 255, 0.20);
  --border-accent:               rgba(59, 102, 255, 0.45);
  --border-accent-strong:        rgba(59, 102, 255, 0.85);

  /* Status Borders */
  --border-status-secure:        rgba(16, 185, 129, 0.35);
  --border-status-warning:       rgba(245, 158, 11, 0.35);
  --border-status-danger:        rgba(244, 63, 94, 0.35);

  /* ==========================================================================
     4. Semantic Typography Tokens (Text Colors & Contrasts)
     All measured for WCAG AA compliance (4.5:1 body, 3:1 display/badges)
     ========================================================================== */
  --text-primary:                var(--color-neutral-50);  /* #f8fafc -> 17.5:1 contrast */
  --text-secondary:              var(--color-neutral-300); /* #cbd5e1 -> 11.5:1 contrast (effortless body & supporting copy) */
  --text-tertiary:               var(--color-neutral-400); /* #94a3b8 -> 6.8:1 contrast (clean metadata & labels) */
  --text-accent:                 var(--color-accent-400);  /* #6085ff */
  --text-accent-bright:          var(--color-cyan-400);    /* #22d3ee */
  --text-on-accent:              #ffffff;
  --text-disabled:               var(--color-neutral-500); /* #64748b */

  /* Semantic Status Colors */
  --status-secure:               var(--color-emerald-400);
  --status-warning:              var(--color-amber-400);
  --status-danger:               var(--color-danger-400);
  --status-info:                 var(--color-cyan-400);

  /* ==========================================================================
     5. Typography System & Fluid Type Scale
     Resilient to English and Russian (Cyrillic) text lengths
     ========================================================================== */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Line Heights */
  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.55;
  --leading-relaxed:  1.68;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.07em;

  /* Fluid Responsive Type Scale (clamp: min -> scalable -> max) */
  --text-xs:      clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);  /* 12px -> 13px */
  --text-sm:      clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);   /* 13px -> 14px */
  --text-base:    clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);       /* 15px -> 16px */
  --text-md:      clamp(1.0625rem, 1rem + 0.35vw, 1.125rem);     /* 17px -> 18px */
  --text-lg:      clamp(1.2rem, 1.12rem + 0.45vw, 1.375rem);     /* 19px -> 22px */
  --text-xl:      clamp(1.4rem, 1.25rem + 0.8vw, 1.75rem);       /* 22px -> 28px */
  --text-2xl:     clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);       /* 28px -> 36px */
  --text-3xl:     clamp(2.15rem, 1.8rem + 1.8vw, 3rem);          /* 34px -> 48px */
  --text-display: clamp(2.6rem, 2.1rem + 2.5vw, 4rem);           /* 42px -> 64px */

  /* ==========================================================================
     6. Spacing Scale (Strict 4px/8px incremental rhythm)
     ========================================================================== */
  --space-0:   0rem;       /* 0px */
  --space-1:   0.25rem;    /* 4px */
  --space-2:   0.5rem;     /* 8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-14:  3.5rem;     /* 56px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */

  /* ==========================================================================
     7. Container & Layout Scale
     ========================================================================== */
  --container-max:        1240px;
  --container-prose:      68ch;   /* Strict readable max line length */
  --container-padding:    clamp(1rem, 4vw, 2.5rem);

  /* Breakpoints (Documentary Reference for Media Queries) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;

  /* ==========================================================================
     8. Border Radii Hierarchy (Intentional, not uniform bubble cards)
     ========================================================================== */
  --radius-xs:    4px;    /* Micro-chips, inner status tags */
  --radius-sm:    6px;    /* Badges, micro inputs */
  --radius-md:    10px;   /* Standard buttons, input controls */
  --radius-lg:    14px;   /* Content cards, dialogs */
  --radius-xl:    20px;   /* Hero feature panels */
  --radius-full:  9999px; /* Pill badges, circular icon vessels */

  /* ==========================================================================
     9. Shadows & Architectural Elevations
     Sophisticated dark layering instead of muddy gray dropshadows
     ========================================================================== */
  --shadow-sm:        0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg:        0 12px 36px rgba(0, 0, 0, 0.7);
  --shadow-elevated:  0 20px 50px rgba(0, 0, 0, 0.85);

  /* Precision Lighting / Ambient Glows */
  --glow-primary:     0 0 24px rgba(59, 102, 255, 0.22);
  --glow-primary-lg:  0 0 60px rgba(59, 102, 255, 0.16);
  --glow-cyan:        0 0 24px rgba(6, 182, 212, 0.18);
  --glow-status:      0 0 16px rgba(16, 185, 129, 0.25);

  /* ==========================================================================
     10. Focus & Accessibility Defaults
     ========================================================================== */
  --focus-ring-offset: 2px;
  --focus-ring-width:  2px;
  --focus-ring-color:  var(--color-accent-400);
  --focus-ring:        0 0 0 var(--focus-ring-offset) var(--surface-canvas),
                       0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  /* Touch / Click Hit Target minimum */
  --hit-target-min:    44px;
  --hit-target-desktop: 40px;

  /* ==========================================================================
     11. Motion & Transition Tokens
     ========================================================================== */
  --ease-out-cyber:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cyber: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast:   140ms var(--ease-out-cyber);
  --transition-normal: 240ms var(--ease-out-cyber);
  --transition-slow:   380ms var(--ease-out-cyber);

  /* ==========================================================================
     12. Z-Index Scale
     ========================================================================== */
  --z-background: -10;
  --z-base:       0;
  --z-surface:    10;
  --z-floating:   20;
  --z-sticky:     40;
  --z-header:     50;
  --z-overlay:    90;
  --z-modal:      100;
  --z-skip-link:  999;
}

/* Reduced Motion Override (better-accessibility compliance) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0.01ms !important;
    --transition-normal: 0.01ms !important;
    --transition-slow:   0.01ms !important;
  }
}