/* Soul Strategy Group — design tokens
   Extracted from the SSG interactive style guide. Do not hand-edit values;
   update the style guide first and re-sync. */

@font-face {
  font-family: 'Libertinus Mono';
  src: url('../assets/fonts/LibertinusMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- color scales ---- */
  --teal-50:#F3FCFC; --teal-100:#E2F8F8; --teal-200:#C1F1F0; --teal-300:#93E6E5; --teal-400:#61DBD9;
  --teal-500:#155C5B; --teal-600:#114A49; --teal-700:#0D3737; --teal-800:#092726; --teal-900:#051818; --teal-950:#030D0D;

  --charcoal-50:#F7F8F8; --charcoal-100:#ECEEEE; --charcoal-200:#D7DADA; --charcoal-300:#BABEBF; --charcoal-400:#9AA0A2;
  --charcoal-500:#313435; --charcoal-600:#272A2A; --charcoal-700:#1D1F20; --charcoal-800:#151616; --charcoal-900:#0D0E0E; --charcoal-950:#070707;

  --olive-50:#F8F9F6; --olive-100:#F0F1E9; --olive-200:#DEE2D0; --olive-300:#C6CCAD; --olive-400:#ABB588;
  --olive-500:#6C7549; --olive-600:#565E3A; --olive-700:#41462C; --olive-800:#2D311F; --olive-900:#1C1E13; --olive-950:#0F100A;

  --lime-50:#FAFBF3; --lime-100:#F2F7E4; --lime-200:#E4EDC4; --lime-300:#D0E09A; --lime-400:#BAD16B;
  --lime-500:#ACC84C; --lime-600:#8EA934; --lime-700:#6B7F27; --lime-800:#4B591B; --lime-900:#2E3711; --lime-950:#191E09;

  --cream:#F5F3EF;

  /* ---- semantic surfaces / text (light mode) ---- */
  --surface-page: var(--cream);
  --surface-elevated: #FFFFFF;
  --surface-sidebar: var(--charcoal-900);
  --text-primary: var(--charcoal-900);
  --text-secondary: var(--charcoal-600);
  --text-muted: var(--charcoal-400);
  --text-inverse: var(--cream);
  --text-brand: var(--teal-600);
  --border-subtle: var(--charcoal-200);
  --border-default: var(--charcoal-300);
  --interactive: var(--teal-500);
  --interactive-hover: var(--teal-600);
  --interactive-active: var(--teal-700);
  --feedback-success: var(--olive-600);
  --feedback-error:#8C3B2E;
  --feedback-warning:#8A6A1E;
  --feedback-info: var(--teal-600);

  /* ---- gradients / overlays ---- */
  --gradient-brand-primary: linear-gradient(135deg, var(--teal-700) 0%, var(--olive-500) 55%, var(--lime-500) 100%);
  --gradient-secondary: linear-gradient(120deg, var(--olive-700), var(--lime-400));
  --gradient-radial-glow: radial-gradient(circle, var(--lime-400) 0%, transparent 70%);
  --gradient-hero-dark: linear-gradient(180deg, var(--charcoal-950) 0%, var(--teal-800) 100%);
  --overlay-photo-duotone: linear-gradient(160deg, rgba(21,92,91,0.85), rgba(13,55,55,0.95));
  --overlay-hero-scrim: linear-gradient(0deg, rgba(7,7,7,0.75) 0%, rgba(7,7,7,0) 45%);
  --overlay-card-hover: rgba(172,200,76,0.14);
  --overlay-modal-scrim: rgba(7,7,7,0.6);

  /* ---- type ---- */
  --font-primary:'Spectral', serif;
  --font-secondary:'Libertinus Mono', monospace;
  --text-display-2xl:4.5rem; --text-display-xl:3.75rem; --text-display-lg:3rem; --text-display-md:2.25rem;
  --text-display-sm:1.875rem; --text-display-xs:1.5rem; --text-xl:1.25rem; --text-lg:1.125rem;
  --text-md:1rem; --text-sm:0.875rem; --text-xs:0.75rem;

  /* ---- spacing ---- */
  --space-px:1px; --space-0-5:0.125rem; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* ---- radius / borders ---- */
  --radius-none:0; --radius-sm:0.125rem; --radius-md:0.375rem; --radius-lg:0.5rem;
  --radius-xl:0.75rem; --radius-2xl:1rem; --radius-3xl:1.5rem; --radius-full:9999px;
  --border-thin:1px; --border-medium:2px; --border-thick:4px;

  /* ---- shadows ---- */
  --shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
  --shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);

  /* ---- motion ---- */
  --duration-fast:100ms; --duration-normal:200ms; --duration-slow:300ms; --duration-slower:500ms;
  --easing-default:cubic-bezier(.4,0,.2,1); --easing-in:cubic-bezier(.4,0,1,1);
  --easing-out:cubic-bezier(0,0,.2,1); --easing-bounce:cubic-bezier(.34,1.56,.64,1);
}

:root {
  color-scheme: light;
  /* ---- theme tokens: light is the default; the dark block below inverts them (see theme.js and the toggle) ---- */
  --bg: var(--cream);               --bg-rgb: 245 243 239;
  --surface: #FFFFFF;
  --ink: #082D39;                   --ink-rgb: 8 45 57;
  --ink-12: rgb(var(--ink-rgb) / .12);
  --ink-25: rgb(var(--ink-rgb) / .25);
  --teal-ink: #155C5B;              /* teal as text: 7.4:1 on cream */
  --teal-fill: #155C5B;             /* teal as a filled shape */
  --olive-text: #565E3A;            /* olive as text: 6.2:1 on cream */
  --note-ink: #41462C;
  --focus: #155C5B;                 --focus-ring: rgba(21, 92, 91, .18);
  --wash: rgba(172, 200, 76, .3);
  --navy-band: #082D39;             /* the dark band */
  --inv-bg: #082D39;                --inv-fg: #F5F3EF; --inv-hover: #114A49;  /* the inverse button / selected state */
}

/* Dark theme. Applies when the visitor chose it (data-theme="dark") or, with no choice, when the system prefers it.
   The two blocks hold the same values (a test keeps them identical): CSS cannot share one list across a media query and an attribute. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #061F29;                  --bg-rgb: 6 31 41;
    --surface: #0B3040;
    --ink: #F5F3EF;                 --ink-rgb: 245 243 239;
    --teal-ink: #8FDDDC;
    --teal-fill: #2FA3A1;
    --olive-text: #C6CCAD;
    --note-ink: #DDE5B8;
    --focus: #ACC84C;               --focus-ring: rgba(172, 200, 76, .3);
    --wash: rgba(172, 200, 76, .14);
    --navy-band: #0C3A4A;
    --inv-bg: #F5F3EF;              --inv-fg: #082D39; --inv-hover: #DAD7CF;
    /* editorial tokens (articles, brand) follow the same palette */
    --surface-page: var(--bg);
    --surface-elevated: var(--surface);
    --surface-sidebar: var(--bg);
    --text-primary: var(--ink);
    --text-secondary: #D2DBDD;
    --text-muted: #A9BBC0;
    --text-brand: var(--teal-ink);
    --border-subtle: rgb(var(--ink-rgb) / .16);
    --border-default: rgb(var(--ink-rgb) / .3);
    --interactive: var(--teal-ink);
    --interactive-hover: #B5ECEB;
    --feedback-error: #F0A596;
    --feedback-success: #C6CCAD;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #061F29;                  --bg-rgb: 6 31 41;
  --surface: #0B3040;
  --ink: #F5F3EF;                 --ink-rgb: 245 243 239;
  --teal-ink: #8FDDDC;
  --teal-fill: #2FA3A1;
  --olive-text: #C6CCAD;
  --note-ink: #DDE5B8;
  --focus: #ACC84C;               --focus-ring: rgba(172, 200, 76, .3);
  --wash: rgba(172, 200, 76, .14);
  --navy-band: #0C3A4A;
  --inv-bg: #F5F3EF;              --inv-fg: #082D39; --inv-hover: #DAD7CF;
  /* editorial tokens (articles, brand) follow the same palette */
  --surface-page: var(--bg);
  --surface-elevated: var(--surface);
  --surface-sidebar: var(--bg);
  --text-primary: var(--ink);
  --text-secondary: #D2DBDD;
  --text-muted: #A9BBC0;
  --text-brand: var(--teal-ink);
  --border-subtle: rgb(var(--ink-rgb) / .16);
  --border-default: rgb(var(--ink-rgb) / .3);
  --interactive: var(--teal-ink);
  --interactive-hover: #B5ECEB;
  --feedback-error: #F0A596;
  --feedback-success: #C6CCAD;
}