/* CraftsmanBid — the brand, and the only file allowed to name a colour or a typeface.
   From Adrian's brand book through the AG Group design system (OCP Field, BRAND_SYSTEM_FOR_OTHER_APPS.md, 2026-09-22).
   A company that buys CraftsmanBid later swaps this one file for its own (spec §8).

   The typefaces are the brand book's own, SELF-HOSTED and subsetted to Latin plus Spanish: nothing is fetched from
   Google. Declared as variable faces, or every weight renders at 400. */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-italic.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dmsans.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("fonts/bigshoulders.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* The brand book's palette. Brick is the action colour and only that. Brass and char make it read expensive:
     brass is for hairlines and an italic line on char, never a button; both belong on the cover, not throughout. */
  --ink: #292B1C;
  --paper: #F8F5EA;
  --cream: #F0E9C8;
  --card: #FFFDF8;
  --brick: #A8412C;
  --brass: #B89968;
  --bronze: #8C6F45;
  --char: #16170E;
  --char-soft: #1F2018;
  --on-brick: #FFFDF8;

  /* Roles, which is what every component uses. Dark mode redefines these, never the components. */
  --ground: var(--paper);
  --surface: var(--card);
  --raised: var(--cream);
  --text: var(--ink);
  --muted: #555A43;
  --line: rgba(41, 43, 28, .16);
  --line-strong: rgba(41, 43, 28, .32);
  --hover: rgba(41, 43, 28, .05);
  --action: var(--brick);
  --focus: var(--brick);
  --side-ground: var(--ink);
  --side-text: var(--cream);
  --side-muted: rgba(240, 233, 200, .58);
  --side-hover: rgba(240, 233, 200, .10);
  --side-line: rgba(240, 233, 200, .16);
  --side-line-strong: rgba(240, 233, 200, .30);
  --brass-line: rgba(184, 153, 104, .38);
  --cover-quiet: rgba(240, 233, 200, .50);
  --doc-ground: var(--card);
  --scrim: rgba(22, 23, 14, .56);
  --placeholder: #E7E0C4;
  --placeholder-line: rgba(41, 43, 28, .22);

  /* State colours are separate from the accent: good, waiting, needs attention. */
  --ok: #0F5132;
  --ok-soft: rgba(15, 81, 50, .10);
  --warn: #6B4A00;
  --warn-soft: rgba(107, 74, 0, .10);
  --bad: #7A0F3D;
  --bad-soft: rgba(122, 15, 61, .09);
  --ai: #3D4F7A;
  --ai-soft: rgba(61, 79, 122, .10);

  /* Look A (docs/GOAL_LOOK_A.md): the office screens' shaded panel and the colour of words that say something is due.
     Brick is the action colour; as text on the dark ground it reads too dark, so "due" has its own. */
  --panel: #F3EEDA;
  --due: var(--brick);

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --label: "Big Shoulders Display", "DM Sans", ui-sans-serif, sans-serif;

  /* One spacing scale. Nothing else. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --radius: 12px;
  /* Look A: the office screens' one type scale and three corners. Nothing in office.css is sized any other way. */
  --t-12: 12px; --t-13: 13px; --t-15: 15px; --t-16: 16px; --t-17: 17px; --t-count: 26px; --t-title: 36px;
  --r-chip: 6px; --r-button: 10px; --r-card: 14px;
  --radius-small: 8px;
  --side: 248px;
  --page-max: 84rem;      /* the desk view's reading width; the top bar lines up with it */
}

/* The cover's sign-in side is paper in both themes, so it keeps the light roles whatever the theme. */
.entryform {
  --ground: var(--paper);
  --surface: var(--card);
  --text: var(--ink);
  --muted: #555A43;
  --line: rgba(41, 43, 28, .16);
  --line-strong: rgba(41, 43, 28, .32);
  --hover: rgba(41, 43, 28, .05);
  --action: var(--brick);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: var(--char);
    --surface: var(--char-soft);
    --raised: #2A2B20;
    --text: var(--cream);
    --muted: rgba(240, 233, 200, .66);
    --line: rgba(240, 233, 200, .15);
    --line-strong: rgba(240, 233, 200, .32);
    --hover: rgba(240, 233, 200, .06);
    --action: #B94A33;
    --focus: var(--bronze);
    --side-ground: #0F100A;
    --doc-ground: var(--char-soft);
    --placeholder: #2E2F24;
    --placeholder-line: rgba(240, 233, 200, .22);
    --ok: #7FC6A0; --ok-soft: rgba(127, 198, 160, .12);
    --warn: #E0B85A; --warn-soft: rgba(224, 184, 90, .12);
    --bad: #E58AA9; --bad-soft: rgba(229, 138, 169, .12);
    --ai: #A9B8E0; --ai-soft: rgba(169, 184, 224, .12);
  --panel: #23241B;
  --due: #E0826B;
  }
}
:root[data-theme="dark"] {
  --ground: var(--char);
  --surface: var(--char-soft);
  --raised: #2A2B20;
  --text: var(--cream);
  --muted: rgba(240, 233, 200, .66);
  --line: rgba(240, 233, 200, .15);
  --line-strong: rgba(240, 233, 200, .32);
  --hover: rgba(240, 233, 200, .06);
  --action: #B94A33;
  --focus: var(--bronze);
  --side-ground: #0F100A;
  --doc-ground: var(--char-soft);
  --placeholder: #2E2F24;
  --placeholder-line: rgba(240, 233, 200, .22);
  --ok: #7FC6A0; --ok-soft: rgba(127, 198, 160, .12);
  --warn: #E0B85A; --warn-soft: rgba(224, 184, 90, .12);
  --bad: #E58AA9; --bad-soft: rgba(229, 138, 169, .12);
  --ai: #A9B8E0; --ai-soft: rgba(169, 184, 224, .12);
  --panel: #23241B;
  --due: #E0826B;
}