/* ==========================================================================
   AfroLatin — Colors & Type
   Дизайн-система студии танца AfroLatin (Киров)
   Пары и соло: Бачата · Сальса · Кизомба
   ========================================================================== */

/* ---------- Webfonts -------------------------------------------------------
   Manrope — основной интерфейсный шрифт (отличная Cyrillic-поддержка).
   Unbounded — дисплейный, для заголовков и плакатной типографики.
   Caveat — рукописная подпись, для акцентов в духе соцсетей и афиш.
   ----------------------------------------------------------------------- */
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLORS — собраны вокруг фиолетового логотипа,
     тёплые латинские акценты + ночной тон вечеринок
     ============================================================ */

  /* Brand purple — ядро бренда (из логотипа) */
  --al-purple-50:  #f4eeff;
  --al-purple-100: #e6d8ff;
  --al-purple-200: #cbb0ff;
  --al-purple-300: #ad84fb;
  --al-purple-400: #9462f0;
  --al-purple-500: #7c45e0;   /* primary */
  --al-purple-600: #6a32c8;
  --al-purple-700: #54259f;
  --al-purple-800: #3d1a76;
  --al-purple-900: #251047;

  /* Brand gradient — ровно как «металлик» на печати логотипа */
  --al-grad-brand:    linear-gradient(135deg, #b497f5 0%, #7c45e0 45%, #4a1e9c 100%);
  --al-grad-brand-soft: linear-gradient(135deg, #f4eeff 0%, #d8c4ff 100%);
  --al-grad-night:    linear-gradient(180deg, #1a0e3a 0%, #0b0820 100%);

  /* Latin accents — тепло и страсть из латиноамериканской палитры */
  --al-coral:    #ff6b6b;   /* Бачата — романтика, страсть */
  --al-coral-soft: #ffe1de;
  --al-gold:     #f5b948;   /* Сальса — праздник, солнце */
  --al-gold-soft:  #fff1d4;
  --al-teal:     #2bb8a8;   /* Кизомба — глубина, ангольские мотивы */
  --al-teal-soft:  #d6f1ed;

  /* Neutrals — кремовые тёплые, не «офисные» серые */
  --al-ink-900: #15102a;    /* основной текст, почти-чёрный с фиолет. подкладкой */
  --al-ink-700: #3a3151;
  --al-ink-500: #6b6285;
  --al-ink-400: #8d85a3;
  --al-ink-300: #b8b3c7;
  --al-ink-200: #ddd9e6;
  --al-ink-100: #efecf4;
  --al-cream:   #faf7f2;    /* основной фон страниц */
  --al-paper:   #ffffff;
  --al-night:   #0b0820;    /* для тёмных секций / афиш */

  /* Semantic */
  --al-success: #2bb8a8;
  --al-warning: #f5b948;
  --al-danger:  #e64545;

  /* ============================================================
     SEMANTIC TOKENS
     ============================================================ */
  --fg-1: var(--al-ink-900);   /* основной текст */
  --fg-2: var(--al-ink-700);   /* вторичный */
  --fg-3: var(--al-ink-500);   /* подписи, метки */
  --fg-4: var(--al-ink-400);   /* плейсхолдеры */
  --fg-on-brand: #ffffff;

  --bg-page:   var(--al-cream);
  --bg-card:   var(--al-paper);
  --bg-soft:   #f4f1ea;        /* мягкая «оф-белая» подложка */
  --bg-muted:  var(--al-ink-100);
  --bg-night:  var(--al-night);

  --border-1: rgba(21, 16, 42, 0.08);
  --border-2: rgba(21, 16, 42, 0.14);
  --border-strong: rgba(21, 16, 42, 0.24);

  --brand: var(--al-purple-500);
  --brand-hover: var(--al-purple-600);
  --brand-press: var(--al-purple-700);

  /* ============================================================
     TYPE — Cyrillic-first
     ============================================================ */
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script:  'Caveat', cursive;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Type scale — крупная и щедрая, под афишную типографику */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  80px;
  --text-6xl:  112px;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ============================================================
     SPACING — 4px база
     ============================================================ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — мягкие, без «офисного» серого; с фиолет. подкладкой
     ============================================================ */
  --sh-1: 0 1px 2px rgba(21, 16, 42, 0.06), 0 1px 3px rgba(21, 16, 42, 0.05);
  --sh-2: 0 4px 12px rgba(21, 16, 42, 0.07), 0 2px 4px rgba(21, 16, 42, 0.04);
  --sh-3: 0 12px 28px rgba(21, 16, 42, 0.10), 0 4px 8px rgba(21, 16, 42, 0.04);
  --sh-4: 0 24px 56px rgba(21, 16, 42, 0.16), 0 8px 16px rgba(21, 16, 42, 0.06);
  --sh-glow: 0 12px 40px rgba(124, 69, 224, 0.35);  /* фиолет. свечение */
  --sh-inset: inset 0 0 0 1px rgba(21, 16, 42, 0.06);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(40px, 6vw, var(--text-5xl)); font-weight: 900; }
h2, .h2 { font-size: clamp(32px, 4.5vw, var(--text-3xl)); }
h3, .h3 { font-size: var(--text-2xl); font-weight: 700; }
h4, .h4 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }

p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 700;
  color: var(--brand);
}

.script {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.4em;
  line-height: 1;
  color: var(--brand);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--al-purple-200); color: var(--al-purple-900); }