/* ═══════════════════════════════════════════════════════════════════════
   THEME — colours, fonts, sizes
   Everything you need to rebrand the app lives in this first block:
   colours, fonts, logo sizes, shadows and two layout dials. Nothing
   further down this file hard-codes a colour, so change a value here
   and the whole app follows.

   This is the ONLY css file you edit for a client. css/style.css is shared code
   (the Admin's "Update code in clients" button replaces it) — never edit that one.
   Logos, icons and wording live elsewhere: images/, data/content.xml, manifest.json.
   theme_color / background_color in manifest.json can't read this file —
   keep them in step with --canopy by hand.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── 1. BRAND PALETTE ───────── */
:root{
  --canopy:#1F2A3A;        /* darkest brand colour — header, nav bar, splash */
  --canopy-mid:#2A3A50;    /* gradient mid-tone on the rotate screen */
  --forest:#33496B;        /* dark accent — headings, buttons on light panels */
  --moss:#4A6B94;          /* mid green — nature accents */
  --sage:#8FA9C8;          /* soft accent on dark surfaces */
  --sage-soft:#E6ECF4;     /* soft panels, chips, icon backgrounds */
  --copper:#C2662D;        /* PRIMARY ACTION colour — buttons, links, route line */
  --copper-deep:#9A4F22;   /* darker copper */
  --gold:#D9A441;
  --splash-mid:#243247;    /* home-screen gradient, middle stop */
  --splash-deep:#141C28;   /* home-screen gradient, bottom */
}

/* ───────── 2. NEUTRALS ───────── */
:root{
  --parchment:#FAF6EC;     /* page background */
  --card:#FFFFFF;          /* cards, panels, sheets */
  --white:#FFFFFF;         /* text/borders on dark surfaces */
  --ink:#20261E;           /* main text */
  --ink-soft:#3B4436;      /* body copy */
  --ink-softer:#4A5540;    /* secondary copy inside cards */
  --mist:#8A9585;          /* captions, small print */
  --line:#E3DECD;          /* hairline borders */
  --on-dark:#F1E6D8;       /* text on dark surfaces */
  --on-dark-soft:#C9D6C2;
  --on-dark-muted:#7E9186;
  --nav-idle:#6E8272;      /* inactive bottom-nav tab */
}

/* ───────── 3. MAP ───────── */
:root{
  --route-line:var(--copper);          /* the walk's track on the map (read by app.js) */
  --you-are-here:var(--copper);        /* your live-location dot (read by app.js) */
  --pin-offroute-fill:#F4E4C1;         /* "visible, but not on this route" pins */
  --pin-offroute-border:#C9932E;
}

/* ───────── 3b. CONTROLS ───────── */
:root{
  --dropdown-bg:var(--copper);   /* the walk dropdown in the header */
  --dropdown-fg:var(--white);

  --nav-height:53px;             /* footer height (all screen sizes) */
  --nav-label-case:uppercase;    /* footer labels: uppercase | none */
  --nav-icon-size-phone:19px;    /* phones: icon above the label */
  --nav-label-size-phone:10px;
  --nav-icon-size:23px;          /* tablet / desktop (600px wide and up): icon beside the label */
  --nav-label-size:12.5px;
}

/* ───────── 4. CATEGORY BADGES (background / text per category) ───────── */
:root{
  --badge-start-bg:#DCE8D6;      --badge-start-fg:var(--forest);
  --badge-parking-bg:#DCE4EE;    --badge-parking-fg:#2C3E4A;
  --badge-legend-bg:#F1E6D8;     --badge-legend-fg:#8A5A22;
  --badge-nature-bg:var(--sage-soft); --badge-nature-fg:var(--moss);
  --badge-history-bg:#E6E2F1;    --badge-history-fg:#4A3F8A;
  --badge-viewpoint-bg:#FBEAD8;  --badge-viewpoint-fg:var(--copper-deep);
  --badge-geology-bg:#EFEAE0;    --badge-geology-fg:#5C4B33;
  --badge-fact-bg:#F7EAD0;       --badge-fact-fg:#8A6A14;
  --badge-default-bg:var(--sage-soft); --badge-default-fg:var(--forest);
}

/* ───────── 5. TYPOGRAPHY ─────────
   To change typefaces: drop new .woff2 files in lib/fonts/, edit the
   @font-face rules below, then update these two lines. */
:root{
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('../lib/fonts/fraunces-latin-wght-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('../lib/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');}

/* ───────── 6. LOGOS & LAYOUT DIALS ───────── */
:root{
  --logo-splash-height:125px;   /* home-screen logo (width follows its proportions) */
  --logo-splash-radius:25px;
  --logo-header-height:50px;    /* small logo in the app header */
  --panel-card-height:55%;      /* how tall a stop card / the About panel opens */
  --panel-list-height:82%;      /* how tall the Stops / About lists open */
}

/* ───────── 7. SHADOWS ───────── */
:root{
  --shadow-fab:0 3px 10px rgba(20,30,20,.15);        /* round map buttons */
  --shadow-float:0 14px 34px rgba(10,20,10,.35);     /* "you're close by" alert */
  --shadow-pin:0 3px 8px rgba(0,0,0,.2);             /* map pins */
  --shadow-marker:0 3px 8px rgba(0,0,0,.25);         /* character markers */
  --shadow-sheet:0 -8px 30px rgba(0,0,0,.2);         /* install sheet */
  --shadow-icon:0 4px 14px rgba(0,0,0,.18);
  --shadow-hero-icon:0 6px 16px rgba(0,0,0,.3);
}

/* ───────── 8. OVERLAYS & GLASS (derived — usually no need to edit) ─────────
   Fallback values first; modern browsers then switch to versions that
   follow the palette automatically. */
:root{
  --glass-faint:rgba(255,255,255,.06);   /* cards on dark */
  --glass-soft:rgba(255,255,255,.10);    /* round buttons on dark */
  --glass-med:rgba(255,255,255,.12);     /* pressed / dismiss on dark */
  --glass-line:rgba(255,255,255,.14);    /* outlines on dark */
  --sage-line:rgba(127,166,135,.35);
  --sage-line-strong:rgba(127,166,135,.5);
  --warning-bg:rgba(21,42,29,.92);
  --scrim-base:#0A140C;
  --scrim:rgba(10,20,12,.5);
  --scrim-light:rgba(10,20,12,.4);
  --lightbox-bg:rgba(8,14,9,.96);
  --close-btn-bg:rgba(0,0,0,.28);
  --photo-shade:rgba(0,0,0,.6);
}
@supports (color:color-mix(in srgb,red 50%,transparent)){
  :root{
    --sage-line:color-mix(in srgb,var(--sage) 35%,transparent);
    --sage-line-strong:color-mix(in srgb,var(--sage) 50%,transparent);
    --warning-bg:color-mix(in srgb,var(--canopy) 92%,transparent);
    --scrim:color-mix(in srgb,var(--scrim-base) 50%,transparent);
    --scrim-light:color-mix(in srgb,var(--scrim-base) 40%,transparent);
  }
}

/* ═══════════════ END OF THEME — component styles below ═══════════════ */