/* ============================================================================
   Draco K9 Academy — design tokens.

   Direction: premium consumer. Enormous white space, very large type, very few
   words per screen, centred composition, generous radii. Light throughout with
   two deliberate full-bleed dark moments for contrast.

   Palette: grey, blue, white, black.
     white  — the page
     grey   — the alternating band and all secondary type
     black  — headlines, and the two dark sections
     blue   — links and the primary action, and nothing else

   Nothing warm: no brown, tan, gold, amber, orange, yellow or pink.

   Theming:
     1. :root is LIGHT.
     2. Dark applies when the system asks, unless light was explicitly chosen.
     3. An explicit [data-theme] wins in both directions, so it comes last.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Greys ----------------------------------------------------------- */
  --grey-50:  #f8fafd;
  --grey-100: #eef2f9;
  --grey-200: #e2e8f3;
  --grey-300: #cbd5e8;
  --grey-400: #9fadc7;
  --grey-500: #74829e;
  /* Steel: the neutral accent used by the certificate rule, the dashboard
     award icon and the 'key point' callout. It was referenced in four
     files but never defined, so all three rendered with no colour. */
  --steel-400: #64748b;
  --grey-600: #5a6780;
  --grey-700: #3b465c;
  --grey-800: #232d40;
  --grey-900: #131b2b;

  --blue-50:  #eff5ff;
  --blue-100: #dbe8ff;
  --blue-200: #b9d2ff;
  --blue-300: #8bb4fb;
  --blue-400: #5b90f5;
  --blue-500: #2f6ae8;
  --blue-600: #1d4fd0;
  --blue-700: #173ca6;
  --blue-800: #142f7d;
  --blue-900: #101f4f;
  --indigo-900: #0b1533;

  --black: #000000;
  --white: #ffffff;

  /* ---- Surfaces -------------------------------------------------------- */
  --canvas:     var(--white);
  --canvas-alt: var(--grey-50);
  --surface:    var(--white);
  --surface-2:  var(--grey-50);
  --surface-3:  var(--grey-100);
  /* The ground under long-form sections and the sign-in panel. It MUST be a
     theme token: the tinted bands were built from --blue-50, which has no dark
     counterpart, so every tinted section opened with a near-white strip on the
     dark theme. */
  --tint:       var(--blue-50);
  --inset:      var(--grey-200);

  /* ---- Ink ------------------------------------------------------------- */
  --ink:        var(--grey-900);
  --ink-body:   var(--grey-700);
  --ink-muted:  var(--grey-600);
  --ink-faint:  var(--grey-500);
  --ink-invert: var(--white);

  --line:        var(--grey-200);
  --line-strong: var(--grey-300);
  --line-faint:  var(--grey-100);

  /* ---- Roles ----------------------------------------------------------- */
  --blue:         var(--blue-600);
  --accent:       var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-fg:    var(--white);
  --accent-text:  var(--blue-600);
  --accent-soft:  var(--blue-50);
  --accent-ring:  rgba(29, 79, 208, 0.32);

  /* Colour as material. These are the gradients the page is actually built
     from — a flat accent on white was what made it read as empty. */
  --field-deep: linear-gradient(157deg, #0b1533 0%, #142f7d 42%, #1d4fd0 78%, #2f6ae8 100%);
  --field-soft: linear-gradient(180deg, var(--blue-50) 0%, #ffffff 100%);
  --glow:       radial-gradient(60% 55% at 22% 18%, rgba(91, 144, 245, 0.55), transparent 62%);
  --hairline:   linear-gradient(90deg, transparent, var(--blue-200), transparent);

  --ok:   #248a3d;  --ok-text:   #1c6e31;  --ok-soft:   #e7f5ea;
  --warn: var(--blue-500); --warn-text: var(--blue-600); --warn-soft: #e8f2fe;
  --bad:  #c9303e;  --bad-text:  #a32531;  --bad-soft:  #fdecee;
  --info: var(--grey-600); --info-text: var(--grey-700); --info-soft: var(--grey-100);

  --shadow-sm: 0 1px 2px rgba(19, 27, 43, 0.05);
  --shadow:    0 2px 6px rgba(23, 60, 166, 0.06), 0 10px 26px -8px rgba(23, 60, 166, 0.12);
  --shadow-lg: 0 4px 10px rgba(23, 60, 166, 0.07), 0 26px 56px -14px rgba(23, 60, 166, 0.22);
  --shadow-blue: 0 12px 40px -10px rgba(29, 79, 208, 0.42);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: 'InstrumentSans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Deliberately large. This register is carried by type size and air. */
  --fs-display: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --fs-h1:      clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h2:      clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  --fs-h3:      clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  --fs-h4:      clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --fs-lead:    clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-label:   0.75rem;

  --lh-tight: 1.06;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --track-label:   0.02em;
  --track-caps:    0.01em;
  --track-display: -0.032em;

  /* ---- Layout ---------------------------------------------------------- */
  --container:        1140px;
  --container-narrow: 820px;
  --container-wide:   1320px;
  --gutter: clamp(1.5rem, 5vw, 2.5rem);
  --sec-y:    clamp(2.75rem, 2rem + 2.4vw, 4.5rem);
  --sec-y-sm: clamp(1.75rem, 1.4rem + 1.2vw, 2.75rem);

  /* Generous radii — the single most recognisable trait of this register. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --dur:  260ms;

  --header-h: 68px;
  --rail-w:   288px;
}

/* ---- Dark ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas:     #070c19;
    --canvas-alt: #0a1223;
    --surface:    #0f1930;
    --surface-2:  #14203b;
    --surface-3:  #1b2a4a;
    --tint:       #0b1730;
    --inset:      #0a1223;

    --ink:        #eef3fd;
    --ink-body:   #b9c6de;
    --ink-muted:  #8b9ab6;
    --ink-faint:  #6d7d9c;
    --ink-invert: #000000;

    --line:        #1e2c4a;
    --line-strong: #2a3c62;
    --line-faint:  #16223c;

    --blue:         var(--blue-400);
    --accent:       var(--blue-400);
    --accent-hover: #6fb6ff;
    --accent-fg:    #000000;
    --accent-text:  var(--blue-400);
    --accent-soft:  rgba(74, 163, 255, 0.14);
    --accent-ring:  rgba(74, 163, 255, 0.42);

    --ok:   #37c04f;  --ok-text:   #5ed073;  --ok-soft:   rgba(55, 192, 79, 0.14);
    --warn: var(--blue-400); --warn-text: #7cc0ff; --warn-soft: rgba(74, 163, 255, 0.14);
    --bad:  #e2606c;  --bad-text:  #ef8a94;  --bad-soft:  rgba(226, 96, 108, 0.14);
    --info: var(--grey-400); --info-text: var(--grey-300); --info-soft: rgba(174, 174, 178, 0.13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:     #070c19;
  --canvas-alt: #0a1223;
  --surface:    #0f1930;
  --surface-2:  #14203b;
  --surface-3:  #1b2a4a;
  --tint:       #0b1730;
  --inset:      #0a1223;

  --ink:        #eef3fd;
  --ink-body:   #b9c6de;
  --ink-muted:  #8b9ab6;
  --ink-faint:  #6d7d9c;
  --ink-invert: #000000;

  --line:        #1e2c4a;
  --line-strong: #2a3c62;
  --line-faint:  #16223c;

  --blue:         var(--blue-400);
  --accent:       var(--blue-400);
  --accent-hover: #6fb6ff;
  --accent-fg:    #000000;
  --accent-text:  var(--blue-400);
  --accent-soft:  rgba(74, 163, 255, 0.14);
  --accent-ring:  rgba(74, 163, 255, 0.42);

  --ok:   #37c04f;  --ok-text:   #5ed073;  --ok-soft:   rgba(55, 192, 79, 0.14);
  --warn: var(--blue-400); --warn-text: #7cc0ff; --warn-soft: rgba(74, 163, 255, 0.14);
  --bad:  #e2606c;  --bad-text:  #ef8a94;  --bad-soft:  rgba(226, 96, 108, 0.14);
  --info: var(--grey-400); --info-text: var(--grey-300); --info-soft: rgba(174, 174, 178, 0.13);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
}

:root[data-theme="light"] { color-scheme: light; }

/* ============================================================================
   .band-dark — a full-bleed black section inside the light page. Used twice on
   the home page and nowhere else. It re-points the tokens rather than
   hard-coding colours, so components nested inside keep working.
   ========================================================================== */
.band-dark {
  color-scheme: dark;
  --canvas:     #070c19;
  --canvas-alt: #0a1223;
  --surface:    #0f1930;
  --surface-2:  #14203b;
  --surface-3:  #1b2a4a;
  --tint:       #0b1730;
  --inset:      #0a1223;
  --ink:        #eef3fd;
  --ink-body:   #b9c6de;
  --ink-muted:  #8b9ab6;
  --ink-faint:  #6d7d9c;
  --ink-invert: #000000;
  --line:        #1e2c4a;
  --line-strong: #2a3c62;
  --line-faint:  #16223c;
  --blue:        var(--blue-400);
  --accent-text: var(--blue-400);
  --accent-soft: rgba(74, 163, 255, 0.14);
  background: var(--indigo-900);
  color: var(--ink-body);
}