/**
 * @file
 * Design tokens.
 *
 * Every colour, size and timing in this theme resolves to one of these. Change
 * a value here and it changes everywhere; never hard-code a hex below this
 * file.
 *
 * Contrast is deliberate: --accent is a fill and border colour only. It sits
 * at roughly 3.6:1 on white, which fails WCAG AA for text, so text and buttons
 * use --accent-ink (5.7:1) or --accent-deep (7.4:1) instead.
 */

:root {
  /* Brand -------------------------------------------------------------- */
  --accent: #0e93c9;
  --accent-bright: #23b3e8;
  --accent-ink: #0a6c92;
  --accent-deep: #075a7a;
  /* Matches imdmusic.com. White text on the lighter stop measures 4.55:1,
     which clears AA for body text but only just - #0a6c92 gave 5.88:1. Kept
     in step with the reference deliberately; revert this one line if the
     headroom matters more than the exact match. */
  --accent-grad: linear-gradient(135deg, #0d7fa8, #075a7a);
  --accent-soft: rgba(14, 147, 201, 0.09);
  --accent-line: rgba(14, 147, 201, 0.32);

  /* Neutrals ----------------------------------------------------------- */
  --ink: #0b1220;
  --ink-2: #4b5768;
  --ink-3: #7b8798;
  --bg: #ffffff;
  --bg-2: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f7fafc;
  --line: rgba(15, 23, 42, 0.09);
  --line-2: rgba(15, 23, 42, 0.16);

  /* Status ------------------------------------------------------------- */
  --ok: #0f7b52;
  --ok-soft: #e6f4ee;
  --warn: #9a5b06;
  --warn-soft: #fdf3e3;
  --danger: #a3232b;
  --danger-soft: #fbeaec;

  /* Type --------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --t-4xl: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* Space — a 4px base, so every gap is a multiple of one unit. --------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /*
   * Section rhythm, taken from imdmusic.com's band scale so the two sites
   * breathe the same way. Fluid rather than stepped: the gap grows with the
   * viewport instead of jumping at a breakpoint.
   *   --band        80px -> 150px  (11vw)
   *   --band-tight  64px -> 110px  (8vw)
   */
  --band: clamp(5rem, 11vw, 9.375rem);
  --band-tight: clamp(4rem, 8vw, 6.875rem);

  /* Shape and depth ---------------------------------------------------- */
  --r-sm: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px -8px rgba(15, 23, 42, 0.12);
  --sh-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 18px 40px -22px rgba(15, 23, 42, 0.28);
  --sh-lg: 0 4px 10px rgba(15, 23, 42, 0.05), 0 40px 80px -40px rgba(15, 23, 42, 0.38);

  /* On dark surfaces (header and footer) -------------------------------- */
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, 0.72);

  /* Header. Contrast on --header-bg: white 18:1, --on-dark-2 about 11:1,
     --accent-bright 7.3:1 - all comfortably past WCAG AA. */
  --header-bg: #070d18;
  --header-grad: linear-gradient(180deg, #0b1220, #070d18);
  --header-line: rgba(255, 255, 255, 0.12);
  --header-hover: rgba(255, 255, 255, 0.10);
  --header-active: rgba(35, 179, 232, 0.18);
  --focus-on-dark: var(--accent-bright);

  /* DevLoops attribution, fixed brand colours that are not ours to change. */
  --brand-dev: #f36d24;
  --brand-loops: #fa9d26;

  /* Layout ------------------------------------------------------------- */
  --maxw: 1240px;
  --gutter: var(--s-4);

  /* Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--s-6);
  }
}

/* Honour the system setting: no transform or opacity animation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
  }
}