/* ============================================================
   CSS Custom Properties — Техноклуб (Робототехника в Омске)
   DO NOT hardcode values elsewhere — always use these tokens.
   ============================================================ */

:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --color-primary:        #1E61C0;
  --color-primary-dark:   #154A96;
  --color-primary-light:  #E8F0FB;
  --color-accent:         #FFD913;
  --color-accent-dark:    #E6C200;
  --color-bg:             #FFFFFF;
  --color-surface:        #F7F9FC;
  --color-border:         #E2E8F0;
  --color-text-primary:   #0F1F3D;
  --color-text-secondary: #374151;
  --color-text-muted:     #5F6B7A;
  --color-text-on-dark:   #FFFFFF;
  --color-text-on-accent: #0F1F3D;
  --color-success:        #15803D;  /* darkened from #16A34A for WCAG AA on small text */
  --color-success-light:  #DCFCE7;
  --color-error:          #DC2626;
  --color-error-light:    #FEE2E2;
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #1DA851;

  /* Soft accent for callouts (first-lesson, cookie) */
  --color-accent-soft:      #FFF8CC;
  --color-accent-soft-text: #997300;

  /* Dark-surface tokens (used in achievements/footer sections on primary bg) */
  --dark-surface:         rgba(255, 255, 255, 0.08);
  --dark-surface-hover:   rgba(255, 255, 255, 0.14);
  --dark-border:          rgba(255, 255, 255, 0.15);
  --dark-border-hover:    rgba(255, 255, 255, 0.30);
  --dark-text-subtle:     rgba(255, 255, 255, 0.40);  /* copyright, disabled, meta */
  --dark-text-muted:      rgba(255, 255, 255, 0.55);  /* secondary labels */
  --dark-text-regular:    rgba(255, 255, 255, 0.70);  /* addresses, links, body-on-dark */
  --dark-text-body:       rgba(255, 255, 255, 0.85);  /* main body text on dark */

  /* Social / messenger brand colors (external — reused in footer, lead-form FAB) */
  --color-telegram:       #39C5F0;
  --color-telegram-light: #7DD8F8;
  --color-whatsapp-light: #4AE081;  /* hover variant of --color-whatsapp */
  --color-max:            #5B9BF8;
  --color-max-light:      #8DBFFF;
  --color-vk:             #0077FF;
  --color-vk-light:       #4DA3FF;

  /* Day-of-week palette (schedule badges, loc-schedule__day--*) — все >= 4.5:1 WCAG AA на белом 12px bold */
  --color-day-mon:        #15803D;  /* green */
  --color-day-tue:        #0D9488;  /* teal */
  --color-day-wed:        #0369A1;  /* blue (darkened from #0EA5E9 for AA) */
  --color-day-thu:        #C2410C;  /* orange (darkened from #EA580C) */
  --color-day-fri:        #B45309;  /* amber (darkened from #F59E0B) */
  --color-day-sat:        #6D28D9;  /* purple (darkened from #7C3AED) */
  --color-day-sun:        #BE123C;  /* rose (darkened from #E11D48) */

  /* ── Typography ─────────────────────────────────────────── */
  --font-family:           'Nunito', system-ui, -apple-system, sans-serif;
  --font-display:          'Orbitron', sans-serif;  /* accent display font — logo, accent headings */
  --font-weight-regular:   400;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Mobile type scale (base — overridden at 1024px) */
  --text-h1:      34px;
  --text-h2:      28px;
  --text-h3:      21px;
  --text-h4:      18px;
  --text-body-l:  16px;
  --text-body-m:  15px;
  --text-caption: 12px;
  --text-btn-l:   16px;
  --text-btn-m:   14px;
  --text-label:   12px;

  --lh-heading: 1.2;
  --lh-subhead: 1.35;
  --lh-body:    1.6;

  /* Letter spacing */
  --ls-heading: -0.01em;
  --ls-body:    0;
  --ls-label:   0.02em;

  /* ── Spacing (8px base scale) ───────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-padding: 20px;
  --section-padding:   64px 0;
  --grid-gap:          16px;
  --nav-height:        60px;

  /* ── Border radius ──────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────  */
  --shadow-card:       0 2px 12px rgba(15, 31, 61, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(15, 31, 61, 0.12);
  --shadow-btn-accent: 0 4px 16px rgba(255, 217, 19, 0.35);
  --shadow-nav:        0 1px 0 var(--color-border);
  --shadow-nav-solid:  0 2px 16px rgba(15, 31, 61, 0.08);
  --shadow-whatsapp:   0 4px 20px rgba(37, 211, 102, 0.4);
  --shadow-lightbox:   0 24px 64px rgba(15, 31, 61, 0.5);

  /* ── Transitions ─────────────────────────────────────────  */
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.25s ease;
  --transition-slow: all 0.4s ease;

  /* ── Z-index scale ───────────────────────────────────────  */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-fab:       500;
}

/* ── Responsive breakpoints ─────────────────────────────── */
/* CANONICAL BREAKPOINTS (use only these):
   480px  — small phones
   640px  — large phones / phone-landscape
   768px  — tablets
   1024px — desktop
   1280px — large desktop
   Inverse max-width is always (X-1)px: 479, 639, 767, 1023, 1279 */

/* ── Small phones (max 479px) ───────────────────────────── */
@media (max-width: 479px) {
  :root {
    --container-padding: 16px;
    --section-padding:   48px 0;
    --grid-gap:          12px;
  }
}

/* ── Tablet (768px+) ────────────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --container-padding: 32px;
    --grid-gap:          20px;
    --nav-height:        68px;
  }
}

/* ── Desktop (1024px+) ──────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --container-padding: 40px;
    --section-padding:   80px 0;
    --grid-gap:          24px;

    /* Desktop type scale */
    --text-h1:      52px;
    --text-h2:      38px;
    --text-h3:      26px;
    --text-h4:      20px;
    --text-body-l:  18px;
    --text-body-m:  16px;
    --text-caption: 13px;
    --text-btn-l:   17px;
    --text-btn-m:   15px;
    --text-label:   13px;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto  !important;
  }
}