/* Towed Help: one visual identity (research/brand/identity.md). Every page links this file first: the city tool
   (site/index.html), the towedhelp.org home page (server/app/home_page.py), the Library and the state hub
   (site/library/library.css and the pages that use it), guide, FAQ and driver pages (server/app/guide_pages.py,
   faq_pages.py), About and the legal pages (site/legal/*.html).

   - --th-* are the brand tokens. Pages use them directly or through the short aliases below (--bg, --ink, ...),
     which are the names the older page stylesheets already used.
   - Dark mode follows the system setting; a page can force one with <html data-theme="light|dark">.
   - Fonts: site/brand/fonts.css (self-hosted woff2 from tools/build_prod.py). The city tool gets the same faces from
     its own build step, so it does not link fonts.css.
   - Contrast (WCAG 2.1 AA) for every text/background pair here is listed in research/brand/identity.md. */
:root{
  color-scheme:light;
  /* brand */
  --th-navy:#14284B;          /* wordmark, headings, outline buttons, rules */
  --th-orange:#F26B1D;        /* the hook in the mark, primary buttons, the current step */
  --th-orange-hover:#FF8640;
  --th-on-orange:#14284B;     /* text on orange: 4.81:1 (white on orange is only 3.05:1, never used for text) */
  /* neutrals (navy-tinted greys) */
  --th-bg:#FFFFFF;
  --th-surface:#F4F6FA;       /* cards, panels */
  --th-surface-2:#E6EBF3;     /* chips, counters, wells */
  --th-line:#C9D3E6;          /* dividers (decorative) */
  --th-line-strong:#6B7A99;   /* input borders: 4.31:1 on white, meets the 3:1 rule for controls */
  --th-rule:#14284B;          /* the 2 px rule under a header and above a footer */
  --th-ink:#1B2333;           /* body text */
  --th-heading:#14284B;
  --th-muted:#4A5568;         /* secondary text */
  --th-link:#0B4A8F;
  --th-focus:#1A5FB4;
  /* the one accent for warnings and the legal notice: amber */
  --th-notice-bg:#FFF4D6;
  --th-notice-line:#9A5B00;      /* also safe for small amber text: 5.43:1 on white */
  --th-notice-ink:#5A3E00;
  /* status (not brand colours): red only for deadlines, forfeits and errors; green for "done" */
  --th-alert:#B42318;
  --th-on-alert:#FFFFFF;
  --th-alert-bg:#FDECEA;
  --th-ok:#1D6B35;
  /* type */
  --th-font-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --th-font-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --th-font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  /* shape and spacing (4 px grid) */
  --th-radius:8px; --th-radius-lg:12px;
  --th-s1:4px; --th-s2:8px; --th-s3:12px; --th-s4:16px; --th-s5:24px; --th-s6:32px; --th-s7:48px;

  /* aliases: the names the page stylesheets use */
  --bg:var(--th-bg); --fg:var(--th-ink); --ink:var(--th-ink); --muted:var(--th-muted); --line:var(--th-line);
  --link:var(--th-link); --focus:var(--th-focus); --card:var(--th-surface); --panel:var(--th-surface);
  --surface:var(--th-surface); --surface-2:var(--th-surface-2); --heading:var(--th-heading);
  --accent:var(--th-orange); --accent-fg:var(--th-on-orange); --accent-ink:var(--th-on-orange);
  --navy:var(--th-navy); --orange:var(--th-orange);
  --warn-bg:var(--th-notice-bg); --warn-fg:var(--th-notice-ink); --warn-line:var(--th-notice-line);
  --note:var(--th-notice-bg); --noteline:var(--th-notice-line); --notice-bg:var(--th-notice-bg);
  --flag-bg:var(--th-alert-bg); --flag-fg:var(--th-alert); --ok:var(--th-ok);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --th-on-orange:#0F1729; --th-orange-hover:#FF8640;
    --th-bg:#0F1729; --th-surface:#18233D; --th-surface-2:#22304F; --th-line:#2E3D60; --th-line-strong:#8C9BB8; --th-rule:#8C9BB8;
    --th-ink:#ECEFF5; --th-heading:#FFFFFF; --th-muted:#B5BFD0; --th-link:#9CC3FF; --th-focus:#7FB2FF;
    --th-notice-bg:#33270A; --th-notice-line:#D69E2E; --th-notice-ink:#FFE3A3;
    --th-alert:#FF7A70; --th-on-alert:#0F1729; --th-alert-bg:#3B1612; --th-ok:#7FD49A;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --th-on-orange:#0F1729; --th-orange-hover:#FF8640;
  --th-bg:#0F1729; --th-surface:#18233D; --th-surface-2:#22304F; --th-line:#2E3D60; --th-line-strong:#8C9BB8; --th-rule:#8C9BB8;
  --th-ink:#ECEFF5; --th-heading:#FFFFFF; --th-muted:#B5BFD0; --th-link:#9CC3FF; --th-focus:#7FB2FF;
  --th-notice-bg:#33270A; --th-notice-line:#D69E2E; --th-notice-ink:#FFE3A3;
  --th-alert:#FF7A70; --th-on-alert:#0F1729; --th-alert-bg:#3B1612; --th-ok:#7FD49A;
}

/* Base: type, headings, links, focus. Page stylesheets set sizes and layout. */
body{font-family:var(--th-font-body)}
h1,h2{font-family:var(--th-font-display);font-weight:700;color:var(--th-heading);letter-spacing:0;text-wrap:balance}
h3,h4{color:var(--th-heading)}
a{color:var(--th-link)}
:focus-visible{outline:3px solid var(--th-focus);outline-offset:2px}

/* Buttons: primary = orange with navy text; secondary = navy outline. 44 px tall at least. */
.th-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 16px;
  border-radius:var(--th-radius);border:2px solid var(--th-orange);background:var(--th-orange);color:var(--th-on-orange);
  font:inherit;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}
.th-btn:hover{background:var(--th-orange-hover);border-color:var(--th-orange-hover)}
.th-btn.secondary{background:transparent;border-color:var(--th-heading);color:var(--th-heading)}
.th-btn.secondary:hover{background:var(--th-surface)}

/* The legal notice / warning box: amber, always above the fold where a state's law requires it. */
.th-notice{background:var(--th-notice-bg);color:var(--th-ink);border:2px solid var(--th-notice-line);border-left-width:6px;
  border-radius:var(--th-radius);padding:10px 14px}

/* City sub-brand wordmark in live text: "Towed in Austin" over "a Towed Help tool" (the SVG lockups in /brand are the
   same lockup drawn as artwork). */
.th-wordmark{font-family:var(--th-font-body);font-weight:700;color:var(--th-heading);letter-spacing:-.01em;line-height:1.1}
.th-wordmark i,.th-wordmark b{font-style:italic;font-weight:400;color:var(--th-orange)}