/* ════════════════════════════════════════════════════════════════════
   design.css — GENERÁLT fájl (bin/design-compile.php). NE szerkeszd!
   Forrás: videotube-v2/tokens/*.tokens.json + package tokens.json
   Csomag: verelux-hairline
   Brand: (nincs)
   Site:  31 felülírás
   A tokenek MÁR feloldva (aliaslánc nélkül) → nincs futásidejű munka.
   ════════════════════════════════════════════════════════════════════ */

/* A rétegek explicit sorrendje (a későbbi nyer, specificitás nélkül). */
@layer core, semantic, component, template, brand, site, page;

/* ── L1 · CORE (primitívek) ─────────────────────────────── */
@layer core {
  :root {
    --core-color-white: #ffffff;
    --core-color-black: #000000;
    --core-color-neutral-50: #f8fafc;
    --core-color-neutral-100: #f1f5f9;
    --core-color-neutral-200: #e2e8f0;
    --core-color-neutral-300: #cbd5e1;
    --core-color-neutral-400: #94a3b8;
    --core-color-neutral-500: #64748b;
    --core-color-neutral-600: #475569;
    --core-color-neutral-700: #334155;
    --core-color-neutral-800: #1e293b;
    --core-color-neutral-900: #0f172a;
    --core-color-neutral-950: #0b0e14;
    --core-color-indigo-400: #818cf8;
    --core-color-indigo-500: #6366f1;
    --core-color-indigo-600: #4f46e5;
    --core-color-cyan-300: #67e8f9;
    --core-color-cyan-400: #22d3ee;
    --core-color-status-success: #34d399;
    --core-color-status-warning: #fbbf24;
    --core-color-status-danger: #f87171;
    --core-color-rank-gold: #fbbf24;
    --core-color-rank-silver: #94a3b8;
    --core-color-rank-bronze: #8b6b4a;
    --core-space-0: 0px;
    --core-space-100: 4px;
    --core-space-200: 8px;
    --core-space-300: 12px;
    --core-space-400: 16px;
    --core-space-500: 24px;
    --core-space-600: 32px;
    --core-space-700: 48px;
    --core-space-800: 64px;
    --core-radius-0: 0px;
    --core-radius-100: 6px;
    --core-radius-200: 12px;
    --core-radius-300: 18px;
    --core-radius-400: 24px;
    --core-radius-full: 999px;
    --core-size-card-min: 240px;
    --core-font-family-ui: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    --core-font-family-display: 'Manrope','Inter',Helvetica,Arial,sans-serif;
    --core-font-size-2xs: 0.68rem;
    --core-font-size-xs: 0.75rem;
    --core-font-size-sm: 0.82rem;
    --core-font-size-md: 1rem;
    --core-font-size-lg: 1.25rem;
    --core-font-size-xl: 1.6rem;
    --core-font-size-2xl: 2rem;
    --core-font-weight-regular: 400;
    --core-font-weight-medium: 600;
    --core-font-weight-bold: 800;
    --core-font-lineheight-tight: 1.2;
    --core-font-lineheight-normal: 1.5;
    --core-border-width-0: 0px;
    --core-border-width-1: 1px;
    --core-shadow-none: none;
    --core-shadow-soft: 0 10px 30px rgba(0,0,0,.30);
    --core-shadow-strong: 0 18px 44px rgba(0,0,0,.55);
    --core-gradient-card-overlay: linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72) 100%);
    --core-duration-fast: 120ms;
    --core-duration-base: 200ms;
    --core-duration-slow: 320ms;
    --core-ratio-16x9: 16 / 9;
    --core-ratio-4x3: 4 / 3;
    --core-ratio-3x4: 3 / 4;
    --core-ratio-1x1: 1 / 1;
  }
}

/* ── L2 · SEMANTIC (Brand Kit) ─────────────────────────────── */
@layer semantic {
  :root {
    --semantic-color-border-strong: #334155;
    --semantic-color-warning: #fbbf24;
    --semantic-radius-control: 6px;
    --semantic-radius-pill: 999px;
    --semantic-space-gap-x: 12px;
    --semantic-space-gap-y: 12px;
    --semantic-space-card-pad: 12px;
    --semantic-space-section: 32px;
    --semantic-font-scale: 100;
    --semantic-blur-card: 0px;
    --semantic-header-height: 60px;
    --semantic-footer-height: 36px;
  }
}

/* ── L3 · COMPONENT (template) ─────────────────────────────── */
@layer component {
  :root {
    --component-card-radius: 0px;
    --component-card-padding: 12px;
    --component-card-shadow: none;
    --component-card-shadow-hover: none;
    --component-card-border-width: 1px;
    --component-card-min-width: 300px;
    --component-card-bg: #050505;
    --component-card-border-color: #171717;
    --component-card-blur: 0px;
    --component-media-ratio: 16 / 9;
    --component-media-overlay: linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72) 100%);
    --component-grid-gap: 1px;
    --component-grid-gap-x: 1px;
    --component-grid-gap-y: 1px;
    --component-header-height: 72px;
    --component-header-brand-size: 1.25rem;
    --component-header-bg: #000000;
    --component-nav-gap: 16px;
    --component-nav-font-size: 0.82rem;
    --component-nav-case: uppercase;
    --component-nav-spacing: 0;
    --component-chip-radius: 999px;
    --component-chip-font-size: 0.75rem;
    --component-control-radius: 0px;
    --component-page-max-width: 1152px;
    --component-title-font: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --component-title-letter-spacing: 0;
    --component-title-section-size: 1.25rem;
    --component-footer-height: 46px;
    --component-footer-font-size: 0.75rem;
    --component-footer-bg: #000000;
  }
}

/* ── L5 · SITE (a site saját felülírásai) ─────────────── */
@layer site {
  :root {
    --semantic-color-bg: #000000;
    --semantic-color-surface: #050505;
    --semantic-color-surface-raised: #0A0A0A;
    --semantic-color-text: #E8EAEE;
    --semantic-color-text-muted: #7C8290;
    --semantic-color-heading: #E8EAEE;
    --semantic-color-link: #E8EAEE;
    --semantic-color-brand: #9AA3AF;
    --semantic-color-accent: #E5E7EB;
    --semantic-color-on-brand: #000000;
    --semantic-color-accent-text: #000000;
    --semantic-color-header-bg: #000000;
    --semantic-color-footer-bg: #000000;
    --semantic-color-rank-gold: #E5E7EB;
    --semantic-color-rank-silver: #9AA3AF;
    --semantic-color-rank-bronze: #7C8290;
    --semantic-color-border: #171717;
    --semantic-color-hover-bg: #0F0F0F;
    --semantic-color-overlay-text: #1A1030;
    --semantic-color-success: #4ADE80;
    --semantic-color-danger: #F87171;
    --semantic-radius-card: 0px;
    --semantic-space-gap: 1px;
    --semantic-shadow-card: none;
    --semantic-shadow-card-hover: none;
    --semantic-font-heading: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --semantic-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --semantic-tone-uppercase: uppercase;
    --semantic-tone-letter-spacing: 0;
    --semantic-border-card-width: 1px;
    --semantic-ratio-card: 4 / 3;
  }
}

/* ── Származtatott tokenek (a brand színből) ────────── */
@layer semantic {
  :root {
    --semantic-color-brand-a08: color-mix(in srgb, var(--semantic-color-brand) 8%, transparent);
    --semantic-color-brand-a15: color-mix(in srgb, var(--semantic-color-brand) 15%, transparent);
    --semantic-color-brand-a30: color-mix(in srgb, var(--semantic-color-brand) 30%, transparent);
    --semantic-color-brand-a55: color-mix(in srgb, var(--semantic-color-brand) 55%, transparent);
  }
}