/* ============================================================
 * 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.
 * ============================================================ */

/*
 * tokens.css - thus(digital) design tokens.
 * Single source of truth. Components reference var(--*) - no hardcoded values.
 */

:root {
  /* COLOUR - brand */
  --c-primary:    #02605C;
  --c-secondary:  #2A8A81;
  --c-tertiary:   #9AC5C3;

  /* COLOUR - body + surface */
  --c-black:      #000000;
  --c-body:       #303030;
  --c-mid:        #7D8284;
  --c-invert-1:   #CBD4D9;
  --c-invert-2:   #E8ECEE;
  --c-bg:         #F7F9FA;

  /* COLOUR - status */
  --c-red:        #DC2626;
  --c-red-fade:   #FEF2F2;
  --c-amber:      #D97706;
  --c-amber-fade: #FFFBEB;
  --c-green:      #16A34A;
  --c-green-fade: #F0FDF4;

  /* SPACING - 4px micro-grid */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* RADII */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:   16px;
  --r-pill: 9999px;

  /* TYPE - families */
  --ff-display: 'Fredoka', system-ui, sans-serif;
  --ff-body:    'M PLUS', system-ui, sans-serif;
  --ff-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* APP-SHELL CHROME — heights of the four sticky chrome slots.
     site-* are always present, page-* are 0 by default and grow when
     body has .has-page-header / .has-page-footer (toggled by JS based
     on partial pour). Body padding (top + bottom) and tray top/bottom
     anchors all consume these vars so the layout reflows together. */
  --site-header-height: 56px;
  --page-header-height: 0px;
  --site-footer-height: 44px;
  --page-footer-height: 0px;
}
body.has-page-header { --page-header-height: 48px; }
body.has-page-footer { --page-footer-height: 56px; }

/* ─────────────────────────────────────────────
 * .app density context.
 * Sets the app-mode body text size (matches .app .scale-base).
 * Components define their own `.app .x` (or `.app.x`) variants explicitly.
 * ───────────────────────────────────────────── */
.app {
  font-size: 16px;
  line-height: 24px;
  color: var(--c-mid);
}

/* @font-face declarations */
@font-face {
  font-family: 'Fredoka';
  src: url('fonts/fredoka-latin.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'M PLUS';
  src: url('fonts/mplus-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 75%;
  descent-override: 10%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'M PLUS';
  src: url('fonts/mplus-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 75%;
  descent-override: 10%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'M PLUS';
  src: url('fonts/mplus-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 75%;
  descent-override: 10%;
  line-gap-override: 0%;
}