/* GENERATED at server startup from utils/brand.py BRAND dict — do not edit.
   Edit templates/_brand.css.jinja (this file's source) or utils/brand.py instead.

   Site-owned override of hlweb's _brand.css.jinja. It carries three things:

     1. the --brand-* primitives hlweb's base/variables.css maps to tier-2 tokens;
     2. the @font-face declarations for the self-hosted brand type;
     3. La Bottega's re-pointing of the tier-2 tokens themselves.

   (2) and (3) live here — rather than in a separate base/ stylesheet — because
   brand.css is the ONE sheet linked by every layout in the stack (the public
   base.html, hlweb's admin/base.html, admin/login.html, the error pages). Putting
   them here skins the whole app, including the admin templates that ship inside
   hlweb, without forking a single layout.

   The price is the cascade: brand.css is linked FIRST, before
   base/variables.min.css, which is materialised from hlweb on every boot and so
   cannot be edited. A plain `:root` block here would lose to the identical
   `:root` there. `:root:root` / `:root[data-theme]` match exactly the same
   element but carry one more specificity point, so these win regardless of
   order. That is the whole trick — nothing below relies on source order against
   hlweb's sheets. */

/* ── brand type ───────────────────────────────────────────────────────────
   Self-hosted so font-src stays 'self' (no Google Fonts origin in the CSP) and
   the compiled binary renders correctly offline. Both families are VARIABLE
   fonts: one file spans the whole weight axis, which is why the display face can
   afford to be 900 everywhere. latin-ext is split out so Italian text (which
   lives entirely in latin) never pays for it. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── tier 1: brand primitives ─────────────────────────────────────────── */
:root {
  --brand-primary: #9B3A1E;
  --brand-primary-rgb: 155, 58, 30;
  --brand-primary-dark: #7E2E17;
  --brand-primary-light: #C1552F;
  --brand-accent: #E8442C;
  --brand-accent-rgb: 232, 68, 44;
  --brand-ink: #1C1917;
  --brand-ink-rgb: 28, 25, 23;
  --brand-surface: #FAF6EF;
  --brand-marketing: #E8442C;
  --brand-marketing-rgb: 232, 68, 44;
  --brand-marketing-dark: #CF3620;
  --brand-white: #FFFFFF;
  --brand-black: #000000;

  /* La Bottega extras (see utils/brand.py) */
  --brand-blush: #F6D3CE;
  --brand-blush-rgb: 246, 211, 206;
  --brand-paper: #FFFAF1;
  --brand-warm-white: #FFF7EE;
  --brand-warm-white-rgb: 255, 247, 238;
  --brand-muted: #5F5346;
  --brand-caramel: #A65A2C;
  --brand-photo-1: #6F8697;
  --brand-photo-2: #33475A;
}

/* ── tier 2: semantic tokens (override hlweb's base/variables.css) ─────────
   Only the tokens hlweb does NOT already derive from --brand-* are listed: the
   neutrals it hardcodes to a cool grey scale, the shape, and the type. --bg,
   --text, --color-primary and friends already flow from the primitives above. */
:root:root {
  --bg-elevated: var(--brand-paper);
  --bg-sunken: #F2EBDF;
  --text-muted: var(--brand-muted);
  --border: rgba(var(--brand-ink-rgb), 0.16);
  --text-on-primary: var(--brand-warm-white);

  /* Warm shadows: the ink is brown-black, so a neutral drop shadow reads grey
     against the cream. */
  --shadow: 0 1px 3px rgba(var(--brand-ink-rgb), 0.10), 0 1px 2px rgba(var(--brand-ink-rgb), 0.06);
  --shadow-lg: 0 24px 44px -24px rgba(var(--brand-ink-rgb), 0.5);

  --radius: 12px;
  --radius-sm: 8px;

  /* Site-owned shape tokens. --rule is the brand's structural line: the identity
     is built on one confident stroke rather than hairline borders, and
     --shadow-hard is the flat offset that goes with it (no blur, ink, never
     translucent). --radius-pill and --radius-lg complete the shape scale. */
  --rule: 2.5px;
  --shadow-hard: 0 5px 0 var(--brand-ink);
  --shadow-hard-sm: 0 3px 0 var(--brand-ink);
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Site-owned editorial roles. The generic scale has one accent; this brand
     has an accent that SPLITS by type size, a plate colour that must appear on
     every page, and a band that stays dark in both themes. Naming them here is
     what lets the component sheet stay free of --brand-* primitives. */
  --accent-text: var(--brand-primary);          /* the accent at small sizes: rust */
  --plate: var(--brand-blush);                  /* the blush the mark sits on */
  --on-plate: var(--brand-ink);                 /* text on the plate — never flips */
  --on-fill: var(--brand-warm-white);           /* text on an ink/coral/rust fill */
  --on-fill-rgb: var(--brand-warm-white-rgb);
  --band-bg: var(--brand-ink);                  /* the problem band + the footer: */
  --band-text: var(--brand-warm-white);         /* deliberately dark in BOTH themes, */
  --band-text-rgb: var(--brand-warm-white-rgb); /* it is a brand element, not a neutral */
  --tone-dull: #C6BCB1;                         /* the drab "them" column */
  --logotype-accent: var(--brand-accent);       /* the coral "STUDIO" in the mark: */
                                                /* fixed, so the logotype does not */
                                                /* change colour between surfaces */
  --photo-a: var(--brand-photo-1);              /* photo stand-in gradient in the mock */
  --photo-b: var(--brand-photo-2);
  --divider: rgba(var(--brand-ink-rgb), 0.25);  /* the dashed internal rule */

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --maxw: 1120px;
}

/* ── theme axis: neutrals ─────────────────────────────────────────────────
   A warm dark, not the stock blue-grey one — the palette has no cool tone in it
   anywhere else. The primary is lifted here too: rust is a light-background
   colour and drops to ~2:1 on a dark surface, so the dark theme borrows the
   coral end of the same family. */
:root[data-theme="dark"] {
  --bg: #17130F;
  --bg-elevated: #221C16;
  --bg-sunken: #100D0A;
  --text: #F4EBDD;
  --text-muted: #B8A794;
  --border: #3B3027;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 44px -24px rgba(0, 0, 0, 0.7);
  --shadow-hard: 0 5px 0 #000000;
  --shadow-hard-sm: 0 3px 0 #000000;

  --color-primary: #F2795C;
  --color-primary-dark: var(--brand-accent);
  --color-primary-rgb: 242, 121, 92;
  --text-on-primary: var(--brand-ink);
  --accent-text: #F2795C;
  --divider: rgba(var(--brand-warm-white-rgb), 0.22);
}

/* ── admin on a phone ──────────────────────────────────────────────────────
   STOPGAP, and it belongs upstream. hlweb's `.data-table` has no minimum width
   and no scroll container, so on a 390px screen every admin list pushes the
   PAGE sideways: measured 709px of horizontal scroll on the templates list and
   708px on /admin/users. The whole layout drifts, headers included.

   The proper fix is a scroll wrapper in hlweb's admin/tables.css. It is here
   because /admin/users is rendered by hlweb's own template, which this site
   does not fork — and brand.css is the only stylesheet that layout loads. When
   hlweb ships the fix, delete this block.

   Confining the scroll to .admin-content means the table scrolls inside the
   page instead of taking the page with it. */
:root:root .admin-content { overflow-x: auto; }
@media (max-width: 720px) {
  :root:root .data-table { min-width: 34rem; }
}

/* Touch targets. The pointer query is what makes this safe to apply globally:
   it only fires on a coarse pointer, so the desktop admin keeps its compact
   controls while a thumb gets something it can actually hit. 44px is the
   documented minimum on both platforms; these controls were 29–34px. */
@media (pointer: coarse) {
  :root:root .btn,
  :root:root .btn-sm,
  :root:root .theme-toggle-btn { min-height: 44px; }
  :root:root input[type="checkbox"],
  :root:root input[type="radio"] { width: 22px; height: 22px; }
  :root:root input[type="range"] { height: 44px; }
}

/* ── surface axis: accent + shape ─────────────────────────────────────────
   The public site. Declared AFTER the theme block on purpose: the marketing
   coral is a large-type-only colour and holds up on both the cream and the dark
   background, so it should survive the dark theme's primary lift above. */
:root[data-surface="marketing"] {
  --color-primary: var(--brand-marketing);
  --color-primary-dark: var(--brand-marketing-dark);
  --color-primary-rgb: var(--brand-marketing-rgb);
  --text-on-primary: var(--brand-warm-white);
  --radius: 18px;
  --radius-sm: 12px;
}