/* ULC Design System — CSS variables (export 2026-10-05)
   Fonts: подключите fonts/ и tokens/fonts.css отдельно. */

/* ===== colors.css ===== */
/* ============================================================
   ULC — Color tokens
   Urban Lang Club. A bright, friendly education brand.
   Strong blue primary, energetic multi-color accents, warm light
   surfaces. Palette names mirror the Figma "Colors" brand sheet.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --ulc-blue:            #3C4AF5;  /* Brand blue — primary accent */
  --ulc-blue-700:        #2B36C9;  /* pressed / deep */
  --ulc-blue-900:        #102EC4;  /* Accent dark blue */
  --ulc-ink-blue:        #042982;  /* deepest brand navy */
  --ulc-red:             #F02E2E;  /* Brand red */
  --ulc-rose:            #F54768;  /* Accent rose — roundel mark */
  --ulc-fuchsia:         #EB1639;  /* Accent fuchsia */
  --ulc-yellow:          #FFDE00;  /* Accent yellow */
  --ulc-green:           #00FFA3;  /* Accent light green */
  --ulc-green-deep:      #1FB585;  /* readable green on light */
  --ulc-purple:          #6425EA;  /* Accent purple */
  --ulc-lilac-brand:     #8D96FF;  /* Original brandbook lilac */
  --ulc-lilac: color-mix(in srgb, var(--ulc-lilac-brand) 65%, var(--ulc-blue));

  /* ---- Pastels (soft section / card fills) ---- */
  --ulc-pastel-blue:     #B0EAFF;
  --ulc-pastel-lilac:    #E1E3FF;
  --ulc-pastel-purple:   #EAE4FF;
  --ulc-pastel-green:    #CFFBEC;
  --ulc-pastel-yellow:   #FFF3B0;
  --ulc-pastel-pink:     #FFD3D3;
  --ulc-pastel-rose:     #FFE0E6;
  --ulc-pastel-grey:     #F1F1F1;

  /* ---- Neutrals / ink ---- */
  --ulc-black:           #101010;
  --ulc-ink:             #222221;  /* primary text */
  --ulc-ink-soft:        #4A4A48;
  --ulc-grey:            #8A8A88;
  --ulc-grey-line:       #E3E3E0;
  --ulc-grey-200:        #ECECEC;
  --ulc-cream:           #FBF8F2;  /* original brand reference; unused in Revizor UI */
  --ulc-paper:           #FFFFFF;

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--ulc-paper);
  --color-surface:       var(--ulc-paper);
  --color-surface-soft:  var(--ulc-pastel-grey);
  --text-strong:         var(--ulc-ink);
  --text-body:           var(--ulc-ink-soft);
  --text-muted:          var(--ulc-ink-soft);
  --text-on-accent:      var(--ulc-paper);
  --color-accent:        var(--ulc-blue);
  --color-accent-ink:    var(--ulc-blue-900);
  --color-line:          var(--ulc-grey-line);
  --color-success:       var(--ulc-green-deep);
  --color-danger:        var(--ulc-red);
  --color-focus-ring:    color-mix(in srgb, var(--ulc-blue) 45%, var(--ulc-paper));
}

/* ===== typography.css ===== */
/* ============================================================
   ULC — Typography tokens
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Dela Gothic One', 'Wix Madefor Display', system-ui, sans-serif;
  --font-sticker: 'Bangers', 'Dela Gothic One', system-ui, sans-serif;
  --font-text:    'Wix Madefor Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Weights (Wix Madefor) */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */

  /* Type scale — fluid-friendly fixed steps */
  --fs-display-xl: 76px;  /* hero headline */
  --fs-display-l:  56px;
  --fs-display-m:  42px;  /* section headline */
  --fs-h1:         34px;
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-lead:       20px;  /* intro paragraph */
  --fs-body:       17px;
  --fs-sm:         15px;
  --fs-xs:         13px;
  --fs-eyebrow:    13px;  /* uppercase label */

  /* Line heights */
  --lh-tight:   1.02; /* @kind other */
  --lh-snug:    1.15; /* @kind other */
  --lh-body:    1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Tracking */
  --tracking-eyebrow: 0.08em; /* @kind other */
  --tracking-tight:  -0.01em; /* @kind other */
}

/* ===== spacing.css ===== */
/* ============================================================
   ULC — Spacing, radii, shadows, motion
   Rounded, soft, friendly. Generous radii; soft diffuse shadows.
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --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;

  /* Section rhythm */
  --section-y: 96px;
  --container:  1200px;
  --gutter:     24px;

  /* Radii — rounded & soft */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Shadows — soft, low-contrast, slightly blue-tinted */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--ulc-black) 6%, transparent);
  --shadow-sm: 0 4px 14px color-mix(in srgb, var(--ulc-black) 6%, transparent);
  --shadow-md: 0 10px 30px color-mix(in srgb, var(--ulc-black) 8%, transparent);
  --shadow-lg: 0 24px 60px color-mix(in srgb, var(--ulc-black) 10%, transparent);
  --shadow-blue: 0 14px 30px color-mix(in srgb, var(--ulc-blue) 28%, transparent);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}


/* Revizor extensions: derived from the brand palette, without independent HEX values. */
:root {
  --ulc-orange: color-mix(in srgb, var(--ulc-red) 50%, var(--ulc-yellow));
  --ulc-amber: color-mix(in srgb, var(--ulc-yellow) 80%, var(--ulc-red));
  --ulc-teal: color-mix(in srgb, var(--ulc-green-deep) 75%, var(--ulc-blue));
  --ulc-lilac-vivid: var(--ulc-lilac);
  --ulc-lilac-vivid-strong: color-mix(in srgb, var(--ulc-lilac-vivid) 75%, var(--ulc-black));
  --ulc-lilac-vivid-soft: color-mix(in srgb, var(--ulc-lilac-vivid) 12%, var(--ulc-paper));
  --ulc-lilac-vivid-muted: color-mix(in srgb, var(--ulc-lilac-vivid) 28%, var(--ulc-paper));
  --ulc-lilac-vivid-subtle: color-mix(in srgb, var(--ulc-lilac-vivid) 5%, var(--ulc-paper));
  --ulc-cyan: color-mix(in srgb, var(--ulc-green) 50%, var(--ulc-blue));
  --ulc-grey-soft: color-mix(in srgb, var(--ulc-grey-line) 55%, var(--ulc-paper));
  --ulc-red-strong: color-mix(in srgb, var(--ulc-red) 75%, var(--ulc-black));
  --ulc-red-muted: color-mix(in srgb, var(--ulc-red) 28%, var(--ulc-paper));
  --ulc-red-subtle: color-mix(in srgb, var(--ulc-red) 5%, var(--ulc-paper));
  --ulc-green-deep-strong: color-mix(in srgb, var(--ulc-green-deep) 75%, var(--ulc-black));
  --ulc-green-deep-muted: color-mix(in srgb, var(--ulc-green-deep) 28%, var(--ulc-paper));
  --ulc-green-deep-subtle: color-mix(in srgb, var(--ulc-green-deep) 5%, var(--ulc-paper));
  --ulc-purple-strong: color-mix(in srgb, var(--ulc-purple) 75%, var(--ulc-black));
  --ulc-purple-muted: color-mix(in srgb, var(--ulc-purple) 28%, var(--ulc-paper));
  --ulc-purple-subtle: color-mix(in srgb, var(--ulc-purple) 5%, var(--ulc-paper));
  --ulc-lilac-strong: color-mix(in srgb, var(--ulc-lilac) 75%, var(--ulc-black));
  --ulc-lilac-muted: color-mix(in srgb, var(--ulc-lilac) 28%, var(--ulc-paper));
  --ulc-lilac-subtle: color-mix(in srgb, var(--ulc-lilac) 5%, var(--ulc-paper));
  --ulc-orange-strong: color-mix(in srgb, var(--ulc-orange) 75%, var(--ulc-black));
  --ulc-orange-muted: color-mix(in srgb, var(--ulc-orange) 28%, var(--ulc-paper));
  --ulc-orange-subtle: color-mix(in srgb, var(--ulc-orange) 5%, var(--ulc-paper));
  --ulc-amber-strong: color-mix(in srgb, var(--ulc-amber) 75%, var(--ulc-black));
  --ulc-amber-muted: color-mix(in srgb, var(--ulc-amber) 28%, var(--ulc-paper));
  --ulc-amber-subtle: color-mix(in srgb, var(--ulc-amber) 5%, var(--ulc-paper));
  --ulc-teal-strong: color-mix(in srgb, var(--ulc-teal) 75%, var(--ulc-black));
  --ulc-teal-muted: color-mix(in srgb, var(--ulc-teal) 28%, var(--ulc-paper));
  --ulc-teal-subtle: color-mix(in srgb, var(--ulc-teal) 5%, var(--ulc-paper));
  --ulc-cyan-strong: color-mix(in srgb, var(--ulc-cyan) 75%, var(--ulc-black));
  --ulc-cyan-muted: color-mix(in srgb, var(--ulc-cyan) 28%, var(--ulc-paper));
  --ulc-cyan-subtle: color-mix(in srgb, var(--ulc-cyan) 5%, var(--ulc-paper));
  --ulc-rose-strong: color-mix(in srgb, var(--ulc-rose) 75%, var(--ulc-black));
  --ulc-rose-muted: color-mix(in srgb, var(--ulc-rose) 28%, var(--ulc-paper));
  --ulc-rose-subtle: color-mix(in srgb, var(--ulc-rose) 5%, var(--ulc-paper));
  --ulc-blue-muted: color-mix(in srgb, var(--ulc-blue) 28%, var(--ulc-paper));
  --ulc-blue-subtle: color-mix(in srgb, var(--ulc-blue) 5%, var(--ulc-paper));
  --ulc-orange-soft: color-mix(in srgb, var(--ulc-orange) 12%, var(--ulc-paper));
  --ulc-teal-soft: color-mix(in srgb, var(--ulc-teal) 12%, var(--ulc-paper));
  --ulc-cyan-soft: color-mix(in srgb, var(--ulc-cyan) 12%, var(--ulc-paper));
}