/**
 * MLT Design Tokens — single source of truth for the site.
 *
 * Every UI component reads from these. Change a token → the site updates.
 * Tokens are grouped by: color, type, spacing, radius, shadow, motion,
 * breakpoint, z-index. Breakpoints are documented here but @media queries
 * in component files still have to use literal px values (custom props
 * don't work inside @media).
 *
 * Naming: --mlt-<group>-<role>[-<modifier>]
 */
:root {
  /* ───────── Colour ───────── */
  /* Surfaces (page background, elevated cards, subtle panels) */
  --mlt-surface-0:        #000000;        /* page bg */
  --mlt-surface-1:        #0b0d12;        /* elevated card */
  --mlt-surface-2:        #12151c;        /* deeper elevated (modal) */
  --mlt-surface-subtle:   rgba(255, 255, 255, 0.03);
  --mlt-surface-hover:    rgba(255, 255, 255, 0.06);

  /* Ink (text) */
  --mlt-ink-primary:      #ffffff;
  --mlt-ink-secondary:    #cbd5e1;   /* body, WCAG AA on black */
  --mlt-ink-muted:        #94a3b8;   /* captions, hints */
  --mlt-ink-disabled:     #64748b;
  --mlt-ink-inverse:      #0b0d12;

  /* Brand */
  --mlt-brand-primary:       #2563eb;   /* main action blue */
  --mlt-brand-primary-hover: #1d4ed8;
  --mlt-brand-primary-soft:  rgba(37, 99, 235, 0.15);
  --mlt-brand-accent:        #a3e635;   /* lime — rare, reserved for wins */
  --mlt-brand-serato:        #cc0000;   /* compat badge tone */

  /* Status */
  --mlt-success:      #22c55e;
  --mlt-success-soft: rgba(34, 197, 94, 0.15);
  --mlt-warning:      #f59e0b;
  --mlt-warning-soft: rgba(245, 158, 11, 0.15);
  --mlt-danger:       #ef4444;
  --mlt-danger-soft:  rgba(239, 68, 68, 0.15);
  --mlt-info:         #3b82f6;
  --mlt-info-soft:    rgba(59, 130, 246, 0.15);

  /* Border + divider */
  --mlt-border-subtle:  rgba(148, 163, 184, 0.15);
  --mlt-border-default: rgba(148, 163, 184, 0.25);
  --mlt-border-strong:  rgba(148, 163, 184, 0.45);
  --mlt-border-focus:   #2563eb;

  /* Overlay (backdrops, scrims) */
  --mlt-overlay-weak:   rgba(0, 0, 0, 0.35);
  --mlt-overlay-strong: rgba(0, 0, 0, 0.65);

  /* ───────── Typography ───────── */
  --mlt-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mlt-font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Monaco', 'Cascadia Mono', monospace;

  /* Type scale — fluid where it matters (headlines) so we don't need a
     pile of media queries for hero sizing. */
  --mlt-text-xs:   0.75rem;      /* 12 */
  --mlt-text-sm:   0.875rem;     /* 14 */
  --mlt-text-base: 1rem;         /* 16 — never below this for body on mobile */
  --mlt-text-lg:   1.125rem;     /* 18 */
  --mlt-text-xl:   1.25rem;      /* 20 */
  --mlt-text-2xl:  1.5rem;       /* 24 */
  --mlt-text-3xl:  clamp(1.75rem, 1.3rem + 2vw, 2.25rem);   /* 28–36 fluid */
  --mlt-text-4xl:  clamp(2rem,    1.4rem + 3vw, 3rem);      /* 32–48 fluid */
  --mlt-text-5xl:  clamp(2.5rem,  1.8rem + 4vw, 3.75rem);   /* 40–60 fluid */

  --mlt-weight-regular:  400;
  --mlt-weight-medium:   500;
  --mlt-weight-semibold: 600;
  --mlt-weight-bold:     700;
  --mlt-weight-black:    800;

  --mlt-leading-tight:    1.15;
  --mlt-leading-body:     1.5;
  --mlt-leading-relaxed:  1.65;

  --mlt-tracking-tight:   -0.02em;
  --mlt-tracking-normal:  0;
  --mlt-tracking-wide:    0.02em;

  /* ───────── Spacing (4px base) ───────── */
  --mlt-space-0:   0;
  --mlt-space-1:   0.25rem;   /* 4  */
  --mlt-space-2:   0.5rem;    /* 8  */
  --mlt-space-3:   0.75rem;   /* 12 */
  --mlt-space-4:   1rem;      /* 16 */
  --mlt-space-5:   1.25rem;   /* 20 */
  --mlt-space-6:   1.5rem;    /* 24 */
  --mlt-space-8:   2rem;      /* 32 */
  --mlt-space-10:  2.5rem;    /* 40 */
  --mlt-space-12:  3rem;      /* 48 */
  --mlt-space-16:  4rem;      /* 64 */
  --mlt-space-20:  5rem;      /* 80 */
  --mlt-space-24:  6rem;      /* 96 */
  --mlt-space-32:  8rem;      /* 128 */

  /* ───────── Radius ───────── */
  --mlt-radius-sm:   6px;
  --mlt-radius-md:   10px;
  --mlt-radius-lg:   16px;
  --mlt-radius-xl:   24px;
  --mlt-radius-pill: 999px;

  /* ───────── Shadow ───────── */
  --mlt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mlt-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --mlt-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  --mlt-shadow-glow: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* ───────── Motion ───────── */
  --mlt-duration-fast:  120ms;
  --mlt-duration-base:  200ms;
  --mlt-duration-slow:  320ms;
  --mlt-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --mlt-ease-emphasised: cubic-bezier(0.3, 0.7, 0.1, 1);

  /* ───────── Layout ───────── */
  --mlt-content-max:     720px;    /* single-column reading width */
  --mlt-content-wide:    1120px;   /* two-column / table width */
  --mlt-gutter-mobile:   1.25rem;  /* 20 */
  --mlt-gutter-desktop:  2rem;     /* 32 */
  --mlt-header-h:        64px;

  /* ───────── z-index ───────── */
  --mlt-z-base:       0;
  --mlt-z-raised:     10;
  --mlt-z-sticky:     100;
  --mlt-z-overlay:    1000;
  --mlt-z-modal:      1100;
  --mlt-z-toast:      1200;
}

/* ───────── Breakpoint documentation (literal px, not custom props) ─────────
   --bp-sm: 480px   (small tablets)
   --bp-md: 768px   (tablets)
   --bp-lg: 1024px  (laptops)
   --bp-xl: 1280px  (desktops)
   Mobile-first: all base styles target < 480px. Use `@media (min-width: 768px)` etc to layer on.
*/

/* ───────── Base reset / smooth-scroll ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--mlt-font-sans);
  font-size: var(--mlt-text-base);
  line-height: var(--mlt-leading-body);
  color: var(--mlt-ink-secondary);
  background: var(--mlt-surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Small utility classes — keep minimal, these are for layout only. */
.mlt-container {
  width: 100%;
  max-width: var(--mlt-content-wide);
  margin-inline: auto;
  padding-inline: var(--mlt-gutter-mobile);
}
@media (min-width: 768px) {
  .mlt-container { padding-inline: var(--mlt-gutter-desktop); }
}
.mlt-container--narrow { max-width: var(--mlt-content-max); }

.mlt-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect user's reduced-motion preference globally. */
@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;
  }
}