/* ============================================================================
   Theme tokens (app-standards rule 02). Light is the base; dark comes from the
   system preference AND from an explicit data-theme, with explicit-light
   overriding a system-dark preference so the toggle wins in both directions.
   No colour literal appears outside this file.

   Palette is Lankin's: blue #1B4D82, river #0093B2, gold #C6AA76,
   onyx #2E2E2B, linen #F4F1EC.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* surfaces */
  --bg: #f4f1ec;
  --bg-tint: #ece7df;
  --surface: #ffffff;
  --surface-2: #f7f5f1;
  --surface-3: #eee9e1;
  --overlay: rgba(255, 255, 255, 0.94);
  --scrim: rgba(29, 33, 38, 0.42);

  /* text — Onyx for body copy on light, Grey for subdued, both straight from
     the palette in Lankin Brand/references/visual-identity.md */
  --text: #2e2e2b;
  --text-muted: #626262;
  --text-faint: #8e8e8a;
  --text-on-accent: #ffffff;

  /* lines */
  --border: rgba(46, 46, 43, 0.14);
  --border-strong: rgba(46, 46, 43, 0.26);

  /* interaction */
  --hover: rgba(27, 77, 130, 0.07);
  --active: rgba(27, 77, 130, 0.13);
  --focus-ring: #0093b2;                  /* River — the brand's link/hover colour */

  /* brand: Lankin Blue leads, River accents, Gold Brown is a whisper only */
  --accent: #1b4d82;                      /* Lankin Blue #1B4D82 */
  --accent-hover: #143c68;                /* Blue, darkened for hover */
  --accent-soft: rgba(27, 77, 130, 0.1);
  --river: #0093b2;                       /* River #0093B2 */
  --river-soft: rgba(0, 147, 178, 0.12);
  /* Gold Brown #C6AA76 fails contrast as text on Linen, so the brand gold is kept
     for the fill and a darkened version of it carries the label. */
  --gold: #8a6d2f;
  --gold-soft: rgba(198, 170, 118, 0.26);
  --linen: #f4f1ec;                       /* Linen #F4F1EC */
  --onyx: #2e2e2b;                        /* Onyx #2E2E2B */

  --success: #17754a;
  --success-soft: rgba(23, 117, 74, 0.12);
  --success-strong: #12633e;
  --warning: #8a5300;
  --warning-soft: rgba(138, 83, 0, 0.12);
  --danger: #b3352b;
  --danger-soft: rgba(179, 53, 43, 0.12);

  /* elevation — light leans on shadow */
  --shadow-sm: 0 1px 2px rgba(46, 46, 43, 0.07);
  --shadow-md: 0 4px 18px rgba(46, 46, 43, 0.1);
  --shadow-lg: 0 20px 56px rgba(46, 46, 43, 0.18);

  /* type */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14181d;
    --bg-tint: #10141a;
    --surface: #1c2229;
    --surface-2: #232a33;
    --surface-3: #2b333d;
    --overlay: rgba(28, 34, 41, 0.94);
    --scrim: rgba(0, 0, 0, 0.6);

    --text: #eef1f4;
    --text-muted: #a3adb9;
    --text-faint: #78828e;
    /* Dark mode lightens the accent, so white-on-accent drops to ~3.4:1 and the
       main "Check in" button becomes hard to read at a dim reception desk.
       Filled surfaces therefore carry near-black text in dark mode (~5.4:1). */
    --text-on-accent: #0d1117;

    --border: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(255, 255, 255, 0.26);

    --hover: rgba(255, 255, 255, 0.07);
    --active: rgba(255, 255, 255, 0.13);
    --focus-ring: #56c7e0;

    --accent: #4d8fc9;
    --accent-hover: #6ba4d8;
    --accent-soft: rgba(77, 143, 201, 0.18);
    --river: #35b8d6;
    --river-soft: rgba(53, 184, 214, 0.18);
    --gold: #d3b782;
    --gold-soft: rgba(198, 170, 118, 0.2);
    --linen: #f4f1ec;
    --onyx: #2e2e2b;

    --success: #4cc98a;
    --success-soft: rgba(76, 201, 138, 0.16);
    --success-strong: #6fd8a2;
    --warning: #e0a94a;
    --warning-soft: rgba(224, 169, 74, 0.16);
    --danger: #f0796c;
    --danger-soft: rgba(240, 121, 108, 0.16);

    /* dark leans on borders, not heavier shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.6);
  }
}

/* Explicit dark beats a system-light preference. */
:root[data-theme='dark'] {
  --bg: #14181d;
  --bg-tint: #10141a;
  --surface: #1c2229;
  --surface-2: #232a33;
  --surface-3: #2b333d;
  --overlay: rgba(28, 34, 41, 0.94);
  --scrim: rgba(0, 0, 0, 0.6);

  --text: #eef1f4;
  --text-muted: #a3adb9;
  --text-faint: #78828e;
  --text-on-accent: #0d1117;

  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.26);

  --hover: rgba(255, 255, 255, 0.07);
  --active: rgba(255, 255, 255, 0.13);
  --focus-ring: #56c7e0;

  --accent: #4d8fc9;
  --accent-hover: #6ba4d8;
  --accent-soft: rgba(77, 143, 201, 0.18);
  --river: #35b8d6;
  --river-soft: rgba(53, 184, 214, 0.18);
  --gold: #d3b782;
  --gold-soft: rgba(198, 170, 118, 0.2);
  --linen: #f4f1ec;
  --onyx: #2e2e2b;

  --success: #4cc98a;
  --success-soft: rgba(76, 201, 138, 0.16);
  --success-strong: #6fd8a2;
  --warning: #e0a94a;
  --warning-soft: rgba(224, 169, 74, 0.16);
  --danger: #f0796c;
  --danger-soft: rgba(240, 121, 108, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.6);
}

/* And explicit light beats a system-dark preference. */
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}

/* ---- logo lockups -------------------------------------------------------------
   Both colourways ship in the markup and CSS picks one, following the SAME
   precedence as the tokens above (system dark, then explicit dark, then explicit
   light). A single <img> whose src is swapped by JS would flash the wrong
   colourway on load and break when the toggle beats the system preference. */
.brand-white { display: none; }
.brand-blue { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .brand-blue { display: none; }
  :root:not([data-theme='light']) .brand-white { display: block; }
}
:root[data-theme='dark'] .brand-blue { display: none; }
:root[data-theme='dark'] .brand-white { display: block; }
:root[data-theme='light'] .brand-blue { display: block; }
:root[data-theme='light'] .brand-white { display: none; }