/* ============================================================================
   Design tokens
   ---------------------------------------------------------------------------
   Taken straight off the logo: ink #111111, accent #FF5C35, cream #FFF9EF.
   Two neutrals and one accent — nothing else gets a colour, because the
   sponsor logos in the grid supply all the colour this page can carry.

   Note the split between --accent (a fill) and --accent-text (a label).
   #FF5C35 on cream is 2.9:1, which fails for text, so anything type-sized uses
   the deepened --accent-text instead. Same hue, readable.

   Theme resolution: :root is light. Dark applies when the OS asks for it and
   the user has not forced light, or when [data-theme="dark"] is set.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Surfaces (warm neutrals, tuned to the logo's cream) --------------- */
  --bg: #fff9ef;
  --bg-sunken: #faf2e3;
  --surface: #ffffff;
  --surface-2: #f4ecdd;
  --surface-hover: #efe5d2;

  /* --- Ink --------------------------------------------------------------- */
  --ink: #111111;
  --ink-2: #5f584e;
  --ink-3: #948b7c;
  --ink-inverse: #fff9ef;

  /* --- Lines ------------------------------------------------------------- */
  --line: #e9dfcd;
  --line-strong: #d5c8b0;

  /* --- The one accent ---------------------------------------------------- */
  --accent: #ff5c35;
  --accent-hover: #f04a22;
  --accent-ink: #1b0b05; /* on top of --accent: 5.3:1 */
  --accent-text: #c43a15; /* accent-coloured type on --bg: 5.1:1 */
  --accent-soft: rgba(255, 92, 53, 0.09);
  --accent-soft-2: rgba(255, 92, 53, 0.17);
  --accent-line: rgba(255, 92, 53, 0.38);

  /* --- Type -------------------------------------------------------------- */
  --font-sans: 'Geist', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --step--2: clamp(0.688rem, 0.67rem + 0.09vw, 0.75rem);
  --step--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.875rem);
  --step-0: clamp(0.938rem, 0.91rem + 0.14vw, 1rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.313rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.68vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.47rem + 1.41vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.75vw, 4.25rem);

  /* --- Space ------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --content: 1180px;
  --header-h: 60px;

  /* --- Radii ------------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Elevation --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 4px 16px -4px rgba(17, 17, 17, 0.11), 0 1px 3px rgba(17, 17, 17, 0.06);
  --shadow-lg: 0 24px 60px -16px rgba(17, 17, 17, 0.24), 0 4px 12px rgba(17, 17, 17, 0.07);
  --shadow-accent: 0 6px 22px -6px rgba(255, 92, 53, 0.55);

  /* --- Motion -----------------------------------------------------------
     One easing curve for everything that moves, three durations. Consistency
     here is what makes a page feel designed rather than assembled.          */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.42, 0.64, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 520ms;
}

/* The dark palette stays warm — a neutral-grey dark mode would read as a
   different brand next to the cream. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: #0e0d0c;
    --bg-sunken: #141210;
    --surface: #1b1815;
    --surface-2: #24201c;
    --surface-hover: #2d2823;

    --ink: #faf7f2;
    --ink-2: #a89f93;
    --ink-3: #736b61;
    --ink-inverse: #0e0d0c;

    --line: #2a2521;
    --line-strong: #3c352e;

    --accent: #ff6b47;
    --accent-hover: #ff8163;
    --accent-ink: #1b0b05;
    --accent-text: #ff8663; /* on --bg: 8.2:1 */
    --accent-soft: rgba(255, 107, 71, 0.13);
    --accent-soft-2: rgba(255, 107, 71, 0.22);
    --accent-line: rgba(255, 107, 71, 0.4);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.66), 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.82), 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-accent: 0 6px 22px -6px rgba(255, 107, 71, 0.5);
  }
}

/* Explicit dark wins in both directions, so the toggle always works. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0e0d0c;
  --bg-sunken: #141210;
  --surface: #1b1815;
  --surface-2: #24201c;
  --surface-hover: #2d2823;

  --ink: #faf7f2;
  --ink-2: #a89f93;
  --ink-3: #736b61;
  --ink-inverse: #0e0d0c;

  --line: #2a2521;
  --line-strong: #3c352e;

  --accent: #ff6b47;
  --accent-hover: #ff8163;
  --accent-ink: #1b0b05;
  --accent-text: #ff8663;
  --accent-soft: rgba(255, 107, 71, 0.13);
  --accent-soft-2: rgba(255, 107, 71, 0.22);
  --accent-line: rgba(255, 107, 71, 0.4);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.66), 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.82), 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 6px 22px -6px rgba(255, 107, 71, 0.5);
}