/* variables.css — design tokens */
:root {
  /* Neutrals */
  --white:     #ffffff;
  --bg:        #f8f8f6;
  --border:    #e6e6e2;
  --light:   #e8e8e3;
  --mid:       #9a9a90;
  --dark:      #1a1a16;
  --ink:       #0a0a08;

  /* Layout */
  --topbar-h:  58px;
  --ad-h:      66px;   /* Adsterra 468×60 banner + 6px padding */
  --secnav-h:  42px;
  --subnav-h:  40px;

  /* ── 9 UNIQUE section colors ── */
  --c-news:      #e8333a;   /* crimson red       */
  --c-sports:    #0066ff;   /* electric blue     */
  --c-politics:  #00875a;   /* forest green      */
  --c-celeb:     #ff5500;   /* hot orange        */
  --c-music:     #7c3aed;   /* deep violet       */
  --c-health:    #00897b;   /* jade teal         */
  --c-money:     #b07d00;   /* amber gold        */
  --c-lifestyle: #c2185b;   /* deep rose         */
  --c-science:   #0277bd;   /* ocean blue        */

  /* Active color — updated by JS */
  --active: var(--c-news);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui:      'Syne', sans-serif;
  --font-body:    'Lora', Georgia, serif;

  /* Easing */
  --ease-slide: cubic-bezier(0.72, 0, 0.28, 1);
  --ease-pop:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Light mode overrides ─────────────────────────── */
body.light {
  --white:   #ffffff;
  --bg:      #f4f3ef;
  --border:  #e0dfd9;
  --light:   #e8e8e3;
  --mid:     #888880;
  --dark:    #1a1a16;
  --ink:     #f4f3ef;   /* topbar/nav background becomes light */
}

/* Topbar text flips dark in light mode */
body.light #topbar,
body.light #ad-bar,
body.light #section-nav {
  background: #f4f3ef;
  border-bottom-color: rgba(0,0,0,0.1);
}
body.light #app-name,
body.light #tb-time { color: #0a0a08; }
body.light #tb-date { color: rgba(0,0,0,0.45); }
body.light #wb-city { color: rgba(0,0,0,0.4); }
body.light #bc-sep  { color: rgba(0,0,0,0.2); }
body.light #tab-indicator { opacity: 1; }

body.light #topbar-right button { color: rgba(0,0,0,0.55); }
body.light #topbar-right button:hover { background: rgba(0,0,0,0.07); color: #000; }
body.light #login-btn { border-color: rgba(0,0,0,0.18); }

/* Section nav tabs */
body.light .sec-tab       { color: rgba(0,0,0,0.5); }
body.light .sec-tab.active { color: var(--active); }

/* Subnav */
body.light #subnav-track  { background: #f4f3ef; border-bottom-color: rgba(0,0,0,0.08); }
body.light .sub-pill       { color: rgba(0,0,0,0.5); background: rgba(0,0,0,0.05); }
body.light .sub-pill.active { background: var(--active); color: #fff; }

/* Cards */
body.light .card          { background: #ffffff; border-color: #e0dfd9; }
body.light .card:active   { background: #f0efeb; }
body.light .card-title    { color: #0a0a08; }
body.light .card-dot      { color: #bbb; }
body.light .card-time     { color: #aaa; }
body.light .card.hero .card-excerpt { color: #555; }

/* Reader sheet */
body.light #reader-sheet  { background: #ffffff; }
body.light #reader-handle { background: #ccc; }
body.light #reader-topbar { border-color: #e0dfd9; }
body.light #reader-close  { background: #f0efeb; }
body.light #reader-title  { color: #0a0a08; }
body.light #reader-lead   { color: #444; }
body.light #reader-body   { color: #333; }
body.light #reader-path-tag { background: color-mix(in srgb, var(--active) 12%, white); }

/* Search */
body.light #search-overlay { background: #f4f3ef; }
body.light #search-bar-wrap { background: #fff; border-color: #e0dfd9; }
body.light #search-input  { color: #0a0a08; }
body.light #search-cancel { color: var(--active); }

/* Page background */
body.light #pages-track   { background: #f4f3ef; }