/* ==========================================================================
   LiderMAG — design tokens
   Dark is the default. The saved appearance switch can explicitly select
   light; section tones remain independent of the operating system's setting.
   ========================================================================== */

:root {
  color-scheme: light;
  /* --- brand ------------------------------------------------------------ */
  --red: #FA2600;          /* sampled from the LiderMAG logo */
  --red-btn: #E01F00;      /* filled surfaces: 4.9:1 with white text */
  --red-ink: #C81E00;      /* 5.8:1 on white — safe for small text */
  --red-deep: #8F1500;
  --red-wash: #FFF1EE;

  /* --- neutral ramp (light) --------------------------------------------- */
  --ink: #16161A;
  --ink-2: #3A3A42;
  --ink-3: #5A5A65;   /* 6.0:1 on paper */
  --ink-4: #6E6E79;   /* 4.5:1 on paper — the quietest tone still usable as text */
  --ink-5: #C4C4CC;   /* hairlines and disabled marks only, never text */
  --line: #E2E0DC;
  --line-strong: #CFCCC6;

  --paper: #F6F5F3;
  --paper-raised: #FFFFFF;
  --paper-sunk: #EDEBE7;

  /* --- night ramp (used by dark sections) -------------------------------- */
  --night: #0E0E11;
  --night-2: #17171C;
  --night-3: #212128;
  --night-line: #2E2E37;
  --night-ink: #F4F4F6;
  --night-ink-2: #B6B6C0;
  --night-ink-3: #85858F;

  /* --- semantic (re-pointed per tone) ------------------------------------ */
  --bg: var(--paper);
  --bg-raised: var(--paper-raised);
  --bg-sunk: var(--paper-sunk);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --accent: var(--red);
  --accent-text: var(--red-ink);

  /* --- steel (part / spec accents) --------------------------------------- */
  --steel: #7C838C;
  --steel-light: #B9BFC7;
  --steel-glow: rgba(180, 196, 214, 0.35);

  /* --- type -------------------------------------------------------------- */
  /* Body voice: Sofia Sans — the regular-width sibling of the display face,
     so headings and text share one Bulgarian type family. Inter stays as
     fallback only. */
  --font-sans: 'Sofia Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Display face: Sofia Sans Condensed — a Bulgarian typeface with true
     Bulgarian Cyrillic forms; condensed black weights carry the machined,
     industrial voice of the logo. Body text stays on Inter. */
  --font-display: 'Sofia Sans Condensed', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Card voice: Russo One — square, machined, single 400 weight, real Cyrillic.
     Reserved for card/tile titles and short labels; never body text. */
  --font-card: 'Russo One', 'Sofia Sans Condensed', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Headings render in the condensed display face, so they run larger than
     the old Inter scale without gaining measure. */
  --fs-display: clamp(2.9rem, 1.2rem + 5.6vw, 6.4rem);
  --fs-h1: clamp(2.3rem, 1.4rem + 3.4vw, 4.1rem);
  --fs-h2: clamp(1.8rem, 1.25rem + 2.3vw, 3.1rem);
  --fs-h3: clamp(1.34rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-h4: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  --fs-lead: clamp(1.02rem, 0.97rem + 0.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;

  --tr-display: -0.038em;   /* Apple-ish tight tracking at large sizes */
  --tr-head: -0.026em;
  --tr-body: -0.004em;   /* Sofia Sans is narrower than Inter — ease the tracking */
  --tr-eyebrow: 0.14em;

  /* --- space (4pt rhythm) ------------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px;
  --s-24: 96px; --s-32: 128px;

  --section-y: clamp(56px, 6.2vw, 104px);
  --section-y-tight: clamp(40px, 4.6vw, 72px);
  --gutter: clamp(20px, 4.4vw, 56px);
  --maxw: 1300px;
  --maxw-text: 68ch;

  /* --- shape ------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* --- elevation (one scale, used consistently) -------------------------- */
  --sh-1: 0 1px 2px rgba(20, 20, 26, 0.05), 0 1px 1px rgba(20, 20, 26, 0.04);
  --sh-2: 0 2px 6px rgba(20, 20, 26, 0.06), 0 6px 16px rgba(20, 20, 26, 0.05);
  --sh-3: 0 6px 18px rgba(20, 20, 26, 0.08), 0 18px 40px rgba(20, 20, 26, 0.07);
  --sh-4: 0 12px 32px rgba(20, 20, 26, 0.10), 0 32px 72px rgba(20, 20, 26, 0.10);
  --sh-part: 0 26px 46px rgba(14, 14, 20, 0.30);

  /* --- motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  --d-press: 130ms;
  --d-fast: 170ms;
  --d-base: 220ms;
  --d-slow: 320ms;
  --d-drawer: 460ms;

  --nav-h: 60px;
}

@media (min-width: 900px) {
  :root { --nav-h: 68px; }
}

/* --- dark sections ------------------------------------------------------ */
[data-tone="night"] {
  color-scheme: dark;
  --bg: var(--night);
  --bg-raised: var(--night-2);
  --bg-sunk: #08080A;
  --fg: var(--night-ink);
  --fg-2: var(--night-ink-2);
  --fg-3: var(--night-ink-3);
  --fg-4: #8A8A95;
  --rule: var(--night-line);
  --rule-strong: #3A3A45;
  --accent-text: #FF6A4D;   /* lifted red keeps 4.5:1 on near-black */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --sh-3: 0 8px 26px rgba(0, 0, 0, 0.55);
  --sh-4: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* A light island placed inside a night section. */
[data-tone="day"] {
  color-scheme: light;
  --bg: var(--paper);
  --bg-raised: var(--paper-raised);
  --bg-sunk: var(--paper-sunk);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --accent-text: var(--red-ink);
}

/* The HTML starts with data-theme="dark" even without JavaScript. The early
   head script restores a valid saved choice before any stylesheet loads. */
/* --- default dark appearance / saved switch choice ----------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F4F4F6;
  --ink-2: #C2C2CC;
  --ink-3: #93939E;
  --ink-4: #85858F;
  --ink-5: #4A4A55;
  --line: #2B2B33;
  --line-strong: #3C3C46;

  --paper: #101014;
  --paper-raised: #1A1A20;
  --paper-sunk: #08080B;

  --accent-text: #FF6A4D;
  --red-wash: #2A100C;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --sh-3: 0 8px 26px rgba(0, 0, 0, 0.55);
  --sh-4: 0 18px 48px rgba(0, 0, 0, 0.62);
}
/* "day" islands stay genuinely light so posters/logos read correctly */
:root[data-theme="dark"] [data-tone="day"] {
  --bg: #F6F5F3;
  --bg-raised: #FFFFFF;
  --bg-sunk: #EDEBE7;
  --fg: #16161A;
  --fg-2: #3A3A42;
  --fg-3: #5A5A65;
  --fg-4: #6E6E79;
  --rule: #E2E0DC;
  --rule-strong: #CFCCC6;
  --accent-text: #C81E00;
}


/* ==========================================================================
   V2 COLOUR SCHEME (2026-09-03) — v1 backup: .backups/v1-2026-09-03/
   In the LIGHT theme the black content sections wear warm beige; photo
   heroes and the drawn instrument frames stay dark by design. Dark mode is
   untouched — there the night ramp applies as before.
   ========================================================================== */
/* the pre-footer CTA band and the footer stay truly dark — the page closes
   dark; grey-on-grey read washed (user, 2026-09-04) */
html:not([data-theme="dark"]) [data-tone="night"]:not(.page-hero):not(.hero):not(.cta-band):not(.footer) {
  color-scheme: light;
  /* v2.2 (2026-09-03): warm stone grey per the user — keyed to the
     certificate section's paper-sunk tone, a shade deeper for contrast */
  --bg: #E4E1D8;
  --bg-raised: #F1EFE9;
  --bg-sunk: #D7D3C7;
  --fg: #191812;
  --fg-2: #3E3C32;
  --fg-3: #5B584B;
  --fg-4: #6C695C;
  --rule: #CFCABC;
  --rule-strong: #B4AF9E;
  --accent-text: var(--red-ink);
  --sh-1: 0 1px 2px rgba(50, 47, 36, 0.09);
  --sh-2: 0 2px 8px rgba(50, 47, 36, 0.11);
  --sh-3: 0 8px 26px rgba(50, 47, 36, 0.15);
  --sh-4: 0 18px 48px rgba(50, 47, 36, 0.19);
  background: linear-gradient(180deg, #E8E5DD, #DDD9CD);
  border-block: 1px solid #CBC6B8;
}