/* ============================================================
 * THE THUS(DIGITAL) CANONICAL STYLEGUIDE — SOURCE OF TRUTH
 * ============================================================
 * Part of the canonical thus(digital) design system, the SINGLE
 * SOURCE OF TRUTH for all frontend UI/UX across every thus(digital)
 * project. (Flutter projects, e.g. Wordaddle, are the exception.)
 *
 *   Repo:  thusdigital/td-styleguide
 *   Live:  https://styles.thusdigital.com
 *
 * Sits within the canonical thus(digital) full-stack workflow:
 *   • Supabase                 - Postgres host
 *   • FastAPI                  - backend / API
 *   • td-styleguide (this)     - frontend UI/UX
 *   • thusdigital/infra        - Hetzner deploy + CI/CD + runbooks
 *
 * ─────────── HARD RULES ───────────
 *   1. EVERY frontend element in EVERY thus(digital) project MUST be
 *      built from components, tokens, partials + conventions defined
 *      HERE. No improvisation. No project-specific drift.
 *   2. If you need something that does NOT exist here:
 *        STOP. TELL SETH CLEARLY what's missing.
 *        Implement + document INTO THIS STYLEGUIDE FIRST.
 *        THEN consume from here in the project.
 *   3. This keeps the styleguide ALWAYS COMPREHENSIVE + UP TO DATE.
 *   4. CONVENTIONS are part of the contract — composable class names
 *      (.btn.btn-sm.btn-narrow.btn-primary stacks), BEM-lite naming
 *      (short, lowercase, hyphen-only, no app/view prefixes),
 *      token-only values (var(--*) — never hardcoded hex/px), Caddy
 *      partials for shared chrome, fetch-on-trigger pattern
 *      (data-content-url + data-pour-on-init), sub-handler re-binding
 *      via td.pour post-pour hook chain. Respect the patterns; don't
 *      invent shortcuts.
 *   5. STYLEGUIDE CSS IS SACROSANCT. tokens.css, base.css, and
 *      components.css are read-only inside any consuming project. NEVER
 *      edit them in-project to bend behaviour for a one-off case - that
 *      drift is exactly what this contract exists to prevent. If you
 *      need new styling: project-specific rules go in a DEDICATED
 *      app-level CSS file (e.g. /app/app.css or similar) loaded AFTER
 *      the styleguide stack. If the styling is genuinely reusable, it
 *      belongs IN the styleguide - see rule 2.
 *   6. DEV-APP PROTOTYPING EXCEPTION (see README rule 5). A bug fix or
 *      missing component MAY be prototyped inside a consuming app, on
 *      that app's dev env, where live content aids the design.
 *      Mandatory: track it in the styleguide bug/feature list on
 *      creation; project CSS only (never inline, never this read-only
 *      copy); back-port INTO this styleguide before the feature ships
 *      to stage/prod; remove the prototype + close the entry on
 *      back-port. Styleguide-first stays the default.
 * ============================================================ */

/*
 * base.css - resets, body type, link defaults, focus rings.
 * Loaded after tokens.css. Element-level defaults only.
 */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* +s-6 top + bottom = breathing gap between chrome and the first/last
     content row. Roughly aligns the first content line with the show/
     hide icon centre in the left tray. */
  padding-top:    calc(var(--site-header-height, 0px) + var(--page-header-height, 0px) + var(--s-5));
  padding-bottom: calc(var(--site-footer-height, 0px) + var(--page-footer-height, 0px) + var(--s-5));
  /* Use max() of the two tray widths on BOTH sides so content stays
     centred even when one tray is wider than the other (e.g. left peek
     56px vs right peek 40px). Costs a few px of content area in the
     mismatch case but maintains visual symmetry. */
  padding-left:   calc(1rem + max(var(--tray-left-width, 0px), var(--tray-right-width, 0px)));
  padding-right:  calc(1rem + max(var(--tray-left-width, 0px), var(--tray-right-width, 0px)));
  font-family: var(--ff-body);
  font-size: 20px;
  line-height: 30px;
  color: var(--c-body);
  background: white;
  transition: padding 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--c-primary);
  margin: 0;
  line-height: 1.2;
}
h1 { font-size: 40px; line-height: 60px; margin-bottom: var(--s-4); }
h2 { font-size: 32px; line-height: 48px; margin-bottom: var(--s-4); }
h3 { font-size: 24px; line-height: 36px; margin-bottom: var(--s-4); text-transform: uppercase; letter-spacing: 1.2px; }
h3.thin { font-weight: 300; }
h4 { font-size: 20px; line-height: 30px; }
h5 { font-size: 16px; line-height: 24px; }

.app h1 { font-size: 36px; line-height: 54px; }
.app h2 { font-size: 28px; line-height: 42px; }
.app h3 { font-size: 20px; line-height: 30px; }
.app h4 { font-size: 16px; line-height: 24px; }
.app h5 { font-size: 12px; line-height: 18px; }

p { margin: 0 0 var(--s-4); }

ul, ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
ul, ul ul { list-style-type: disc; }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--c-secondary); }
ul ul, ol ol, ul ol, ol ul { margin: var(--s-2) 0 0; }

li.tick { list-style-type: '\2713  '; }
li.tick::marker { color: var(--c-green); }
li.cross { list-style-type: '\2715  '; }
li.cross::marker { color: var(--c-red); }

figure { margin: 0 0 var(--s-4); }
figcaption {
  margin-top: var(--s-2);
  font-size: 16px;
  line-height: 24px;
  font-style: italic;
  color: var(--c-mid);
}
.app figcaption { color: var(--c-body); }

dl { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
dt {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--c-secondary);
  margin-top: var(--s-3);
  position: relative;
}
dt::before {
  content: '\2022';
  position: absolute;
  left: -16px;
  color: var(--c-secondary);
}
dl > dt:first-child { margin-top: 0; }
dd { margin: 0; }
small { font-size: 16px; line-height: 24px; }
.app small { font-size: 12px; line-height: 18px; }
strong, b { font-weight: 500; }
mark { background: var(--c-tertiary); color: inherit; padding: 4px 2px; }
.app mark { color: var(--c-body); }

a {
  color: var(--c-primary);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--c-secondary); }

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--c-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-mid);
  margin: 1em 0;
}

code, .code {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.8em;
  color: var(--c-mid);
  background: var(--c-invert-2);
  padding: 0 var(--s-1);
  border-radius: var(--r-sm);
  text-transform: none;
  letter-spacing: 0;
}

pre {
  display: block;
  font-family: var(--ff-mono);
  background: var(--c-invert-2);
  color: var(--c-mid);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  overflow-x: auto;
  margin: 0 0 var(--s-4);
}
pre code {
  display: block;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
}

/* Any class ending in `-label` is uppercase + black by default. */
[class$="-label"],
[class*="-label "] {
  text-transform: uppercase;
  color: #000;
}
.component-label { font-weight: 500; }