/* =====================================================================
   TOKENS - every colour, font and font-size of the website lives here.
   Each line changes exactly ONE thing. Nothing else is affected.
   Rule of thumb: --{element}-{property}  e.g. --hero-title-color
   ===================================================================== */
:root{
  /* Palette (reused by the tokens below; change these to restyle many things at once) */
  --navy:#0b1730;--gold:#e8bd7e;--blue:#1f6feb;
  --serif:'Libre Baskerville',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
  /* Light theme */
  --bg:#eef3fb;--card:#fff;--line:#e3e8f1;--mut:#667085;--ink:#14213d;--cream:#f7f4ee;
}
/* Dark theme (automatic) */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1424;--card:#16203a;--line:#26324f;--mut:#9aa6c0;--ink:#e8edf8;--cream:#101a30}}
:root[data-theme="dark"]{--bg:#0d1424;--card:#16203a;--line:#26324f;--mut:#9aa6c0;--ink:#e8edf8;--cream:#101a30}
:root{

  /* --- Page base --- */
  --body-font-family:var(--sans);
  --body-background:var(--bg);
  --body-color:var(--ink);
  --a-color:inherit;
  --toast-background:#0a1124;
  --toast-color:#fff;

  /* --- Header (menu bar) --- */
  --site-header-background:var(--navy);
  --site-header-color:#fff;
  --site-header-brand-font-family:var(--serif);
  --site-header-brand-font-size:1.05rem;
  --site-header-menu-font-size:.9rem;
  --site-header-cta-background:var(--gold);
  --site-header-cta-color:var(--navy);
  --site-header-cta-border:0;

  /* --- Hero (top banner) --- */
  --hero-background:url(../assets/hero.webp) 75% center/cover no-repeat #0b1730;
  --hero-color:#fff;
  --hero-before-background:linear-gradient(90deg,rgba(11,23,48,.88) 0%,rgba(11,23,48,.55) 40%,rgba(11,23,48,0) 70%);
  --hero-label-font-size:.8rem;
  --hero-title-font-family:var(--serif);
  --hero-title-font-size:clamp(2.2rem,5.5vw,3.8rem);
  --hero-divider-border:0;
  --hero-divider-border-top:3px solid var(--gold);
  --hero-button-background:var(--gold);
  --hero-button-color:var(--navy);
  --hero-button-border:0;

  /* --- Icon strip (under hero) --- */
  --strip-background:var(--navy);
  --strip-color:#fff;
  --strip-border-top:1px solid #ffffff22;
  --strip-item-border-right:1px solid #ffffff2a;
  --strip-item-last-child-border:0;
  --strip-icon-fill:none;
  --strip-icon-stroke:var(--gold);
  --strip-label-font-size:inherit;

  /* --- Belief section (A Quieter Question) --- */
  --belief-tag-color:#c58b45;
  --belief-tag-font-size:.9rem;
  --belief-title-font-family:var(--serif);
  --belief-title-font-size:clamp(1.8rem,4vw,2.6rem);
  --belief-lead-font-size:1.4rem;
  --belief-lead-color:var(--ink);
  --belief-text-color:var(--mut);
  --belief-button-background:var(--gold);
  --belief-button-color:var(--navy);
  --belief-button-border:0;
  --belief-image-color:#fff;
  --belief-image-font-family:var(--serif);
  --belief-image-font-size:1.3rem;
  --belief-image-background:var(--line);

  /* --- Focus section (Beyond the Applause) --- */
  --section-focus-background:var(--cream);
  --focus-tag-color:#c58b45;
  --focus-tag-font-size:.9rem;
  --focus-title-font-family:var(--serif);
  --focus-title-font-size:clamp(1.8rem,4vw,2.6rem);
  --focus-item-background:var(--card);
  --focus-item-border:1px solid var(--line);
  --focus-icon-fill:none;
  --focus-icon-stroke:var(--ink);
  --focus-icon-accent-stroke:#c58b45;
  --focus-label-font-size:inherit;

  /* --- Measure section (quote + photo) --- */
  --measure-image-color:#fff;
  --measure-image-font-family:var(--serif);
  --measure-image-font-size:1.3rem;
  --measure-image-background:var(--line);
  --measure-card-background:#f3e9d8;
  --measure-card-color:#14213d;
  --measure-tag-color:#c58b45;
  --measure-tag-font-size:.9rem;
  --measure-quote-font-family:var(--serif);
  --measure-quote-font-size:1.9rem;
  --measure-text-color:#3a4358;
  --measure-button-background:var(--gold);
  --measure-button-color:var(--navy);
  --measure-button-border:0;

  /* --- Stats bar --- */
  --stats-background:var(--navy);
  --stats-color:#fff;
  --stats-value-font-family:var(--serif);
  --stats-value-font-size:2.4rem;
  --stats-label-font-size:.9rem;

  /* --- Blog section (home page) --- */
  --blog-title-font-family:var(--serif);
  --blog-title-font-size:clamp(1.8rem,4vw,2.6rem);
  --blog-card-background:var(--card);
  --blog-card-border:1px solid var(--line);
  --blog-card-tag-color:#c58b45;
  --blog-card-tag-font-size:.9rem;
  --blog-card-title-font-family:var(--serif);
  --blog-card-title-font-size:1em;
  --blog-card-link-color:inherit;
  --blog-card-excerpt-font-size:.9rem;
  --blog-card-excerpt-color:var(--mut);

  /* --- Closing section (CTA) --- */
  --section-cta-background:linear-gradient(90deg,#0b1730,#2a2218);
  --section-cta-color:#fff;
  --cta-text-color:#e2e6ee;
  --cta-button-background:var(--gold);
  --cta-button-color:var(--navy);
  --cta-button-border:0;

  /* --- Footer --- */
  --site-footer-background:var(--navy);
  --site-footer-color:#fff;
  --site-footer-font-size:.85rem;
  --site-footer-link-color:var(--gold);

  /* --- Blog post page --- */
  --post-meta-color:var(--mut);
  --post-meta-font-size:.9rem;
  --post-title-font-family:var(--serif);
  --post-title-font-size:clamp(1.8rem,4vw,2.6rem);
  --post-body-p-color:var(--mut);
  --post-tags-color:var(--mut);
  --post-tags-font-size:.9rem;
  --post-related-title-font-family:var(--serif);
  --post-related-title-font-size:clamp(1.8rem,4vw,2.6rem);
  --post-back-color:var(--mut);
  --post-back-link-color:var(--ink);

  /* --- Page not found (404) --- */
  --notfound-title-font-family:var(--serif);
  --notfound-actions-color:var(--mut);
  --notfound-button-background:var(--gold);
  --notfound-button-color:var(--navy);
  --notfound-button-border:0;

  /* --- Loading shimmer (shared on purpose) --- */
  --skeleton-background:linear-gradient(90deg,var(--line) 25%,rgba(128,128,128,.14) 50%,var(--line) 75%);

  /* --- Login page - left panel --- */
  --login-page-background:#fff;
  --login-page-color:#0c1a3a;
  --login-hero-background:linear-gradient(160deg,#0a1f44,#0d3a7a);
  --login-hero-color:#fff;
  --login-hero-logo-mark-background:var(--blue);
  --login-hero-title-font-size:clamp(2rem,4vw,3.2rem);
  --login-hero-title-accent-color:#2d9cff;
  --login-feature-font-size:.88rem;
  --login-feature-title-font-size:1rem;

  /* --- Login page - form card --- */
  --login-panel-background:#f2f6ff;
  --login-card-background:#fff;
  --login-card-box-shadow:0 10px 40px #1f6feb22;
  --login-card-logo-mark-background:var(--blue);
  --login-card-subtitle-color:#667085;
  --login-card-subtitle-font-size:.9rem;
  --login-email-border:1px solid #dbe3f0;
  --login-email-background:#f7f9fe;
  --login-email-color:#0c1a3a;
  --login-password-border:1px solid #dbe3f0;
  --login-password-background:#f7f9fe;
  --login-password-color:#0c1a3a;
  --login-options-font-size:.85rem;
  --login-options-color:#0c1a3a;
  --login-remember-font-size:inherit;
  --login-forgot-color:var(--blue);
  --login-submit-background:var(--blue);
  --login-submit-color:#fff;
  --login-submit-border:0;
  --login-error-color:#d92d20;
  --login-error-font-size:.85rem;
  --login-google-background:#fff;
  --login-google-border:1px solid #dbe3f0;
  --login-google-color:#0c1a3a;
  --login-help-color:#667085;
  --login-help-font-size:.9rem;
  --login-help-link-color:var(--blue);
  --login-demo-color:#667085;
  --login-demo-font-size:.75rem;

  /* --- Admin - sidebar --- */
  --admin-sidebar-background:#0a1124;
  --admin-sidebar-color:#cfd8ee;
  --admin-sidebar-logo-color:#fff;
  --admin-sidebar-logo-mark-background:var(--blue);
  --admin-sidebar-item-background:none;
  --admin-sidebar-item-border:0;
  --admin-sidebar-item-color:inherit;
  --admin-sidebar-item-hover-background:#17306b;
  --admin-sidebar-item-hover-color:#fff;
  --admin-sidebar-item-is-active-background:#17306b;
  --admin-sidebar-item-is-active-color:#fff;
  --admin-sidebar-user-font-size:.8rem;
  --admin-sidebar-logout-background:none;
  --admin-sidebar-logout-border:0;
  --admin-sidebar-logout-color:inherit;
  --admin-sidebar-logout-hover-background:#17306b;
  --admin-sidebar-logout-hover-color:#fff;

  /* --- Admin - top bar and stats --- */
  --admin-topbar-title-font-size:1.5rem;
  --admin-topbar-menu-background:#0a1124;
  --admin-topbar-menu-color:#fff;
  --admin-topbar-menu-border:0;
  --admin-topbar-add-background:var(--blue);
  --admin-topbar-add-color:#fff;
  --admin-topbar-add-border:0;
  --admin-stat-background:var(--card);
  --admin-stat-border:1px solid var(--line);
  --admin-stat-value-font-size:1.6rem;
  --admin-stat-label-color:var(--mut);
  --admin-stat-label-font-size:.85rem;
  --admin-panel-title-font-size:1rem;
  --admin-note-color:var(--mut);
  --admin-note-font-size:.85rem;
  --admin-chart-line-fill:none;
  --admin-chart-line-stroke:#1f6feb;
  --admin-bar-font-size:.85rem;
  --admin-bar-track-background:var(--line);
  --admin-bar-fill-background:#1f6feb;

  /* --- Admin - posts table --- */
  --admin-table-wrap-background:var(--card);
  --admin-table-wrap-border:1px solid var(--line);
  --admin-table-head-border-bottom:1px solid var(--line);
  --admin-table-head-font-size:.88rem;
  --admin-table-head-color:var(--mut);
  --admin-table-cell-border-bottom:1px solid var(--line);
  --admin-table-cell-font-size:.88rem;
  --admin-pill-font-size:.78rem;
  --admin-pill-published-background:#d1fae5;
  --admin-pill-published-color:#047857;
  --admin-pill-draft-background:#ffedd5;
  --admin-pill-draft-color:#c2410c;
  --admin-pill-scheduled-background:#ede9fe;
  --admin-pill-scheduled-color:#6d28d9;
  --admin-action-background:none;
  --admin-action-border:1px solid var(--line);
  --admin-action-color:var(--ink);
  --admin-action-delete-color:#d92d20;

  /* --- Admin - post editor and forms --- */
  --admin-form-background:var(--card);
  --admin-form-border:1px solid var(--line);
  --admin-form-label-font-size:.85rem;
  --admin-form-field-border:1px solid var(--line);
  --admin-form-field-background:var(--bg);
  --admin-form-field-color:var(--ink);
  --admin-form-tool-border:1px solid var(--line);
  --admin-form-tool-background:var(--card);
  --admin-form-tool-color:var(--ink);
  --admin-form-editor-border:1px solid var(--line);
  --admin-form-editor-background:var(--bg);
  --admin-form-save-background:var(--blue);
  --admin-form-save-color:#fff;
  --admin-form-save-border:0;

  /* --- Admin - media library --- */
  --admin-media-empty-color:var(--mut);

  /* --- Mobile --- */
  --hero-before-background-mobile:linear-gradient(180deg,rgba(11,23,48,.2) 0%,rgba(11,23,48,0) 45%,#0b1730 100%);
  --hero-label-font-size-mobile:.72rem;
  --hero-title-font-size-mobile:clamp(1.7rem,7.2vw,2.5rem);
  --hero-text-font-size-mobile:.95rem;
  --hero-actions-font-size-mobile:.95rem;
  --hero-button-font-size-mobile:.9rem;

  /* --- Small phone --- */
  --hero-title-font-size-small:1.7rem;
  --hero-text-font-size-small:.9rem;
  --hero-actions-font-size-small:.9rem;
}