/* ── Starting Up ──────────────────────────────────────────────────────
   The identity, in one file, layered over the generated tokens in
   variables.css. Separate rather than edited into that file so it can be
   changed or removed without touching what the platform generated.

   ## Yellow is a surface, never a text colour

   The rule this palette is built around, because it is the one that gets
   broken by default. Pure yellow on white is about 1.4:1 contrast and
   white on yellow about 1.9:1 — both unreadable, both what you get by
   reaching for "primary button, white label".

   Near-black on this yellow is roughly 10:1. So: yellow fills, ink sits
   on it, and yellow never carries small text or a thin line.

   ## Four jobs, and no fifth

   The redesign spends the brand colour deliberately rather than broadly.
   In the application yellow means exactly one of: the active navigation
   marker, the primary button, the focus ring, or a mark on something that
   needs attention. Everything else is warm neutral. Status is told in the
   semantic family below — green, amber, red — because a colour that means
   "this is us" cannot also mean "this is wrong".

   ## Warm, not lemon; warm neutrals, not grey

   These products are about invoices, bank transactions and tax. A bright
   playful yellow undercuts that; a deepened amber reads as confident. The
   greys are biased warm for the same reason — a cool grey beside this
   amber reads as a rendering fault rather than as a choice.

   ## Two faces, three voices

   `--font-ui` carries the interface, `--font-mono` carries everything that
   is data rather than prose: labels, identifiers, handles, money, dates,
   counts. That split is what makes the product read as instrumentation
   instead of a brochure, and it is deliberately built out of system faces —
   `style-src 'self'` admits no font host, so a webfont here would be a
   silent fallback rather than a design.
   ──────────────────────────────────────────────────────────────────── */

/* The third selector is not decoration, it is the whole reason this file works.
   `variables.css` sets its light palette under
   `@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) }`,
   which is specificity (0,2,0). A plain `:root` here is (0,1,0) and loses to it
   however late it loads — so the tokens below were being overridden on every
   page styled with the template's names, and the sign-in screen stayed the
   template's blue while the account area, which reads `--su-*` directly, came
   out yellow. Two screens of one product that did not look related.
   Matching the specificity is enough: this file loads last, so equal wins. */
:root,
:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  /* The brand. A field, not a text colour. */
  --su-yellow:      #ffc700;
  --su-yellow-hi:   #ffd233;  /* hover on a yellow fill */
  --su-yellow-lo:   #eab600;  /* the edge of a yellow fill */
  --su-yellow-deep: #a87a00;  /* when yellow must be a mark on light; ~4.8:1 on paper */
  --su-yellow-wash: #fbf0ce;  /* a wash of it — active rows, quiet fills */

  /* Warm near-black down to warm mid. Pure #000 next to yellow reads as a
     default rather than as a decision. */
  --su-ink:      #14110b;
  --su-ink-2:    #5a5248;     /* ~7:1 on paper — body prose */
  --su-ink-3:    #8c8377;     /* metadata, labels */
  --su-ink-4:    #a89e8f;     /* for things that are genuinely incidental */

  --su-paper:    #f6f2e9;     /* the ground */
  --su-surface:  #ffffff;
  --su-sunk:     #efeadc;     /* inputs, table heads, quiet fills */
  --su-sunk-2:   #e8e2d1;
  --su-line:     #e2dccc;     /* the hairline the whole layout is built from */
  --su-line-2:   #cec6b1;     /* a rule that has to be seen */
  --su-line-3:   #b6ac94;     /* a control's edge */

  /* Status, kept away from the brand colour on purpose. */
  --su-ok:        #2e6b4c;
  --su-ok-wash:   #e6efe9;
  --su-warn:      #8a5a00;
  --su-warn-wash: #faedd5;
  --su-bad:       #a03626;
  --su-bad-wash:  #f7e8e4;

  /* The near-black band. Fixed rather than themed: it is a surface the design
     places deliberately, not a response to the reader's preference. */
  --su-night:      #14110b;
  --su-night-2:    #201b13;
  --su-night-3:    #2e281d;
  --su-night-ink:  #f4f0e6;
  --su-night-ink-2:#a9a091;

  /* The generated tokens, repointed, so the legacy account area inherits the
     identity rather than staying blue next to a yellow front door. */
  --color-text:          var(--su-ink);
  --color-text-muted:    var(--su-ink-2);
  --color-bg:            var(--su-paper);
  --color-surface:       var(--su-surface);
  --color-border:        var(--su-line);
  --color-primary:       var(--su-yellow);
  --color-primary-hover: var(--su-yellow-hi);
  --color-on-primary:    var(--su-ink);   /* the whole rule, in one line */
  --color-accent:        var(--su-yellow-deep);
  --color-hover:         rgba(20, 17, 11, 0.05);
  --color-active:        var(--su-yellow-wash);
  --color-error:         var(--su-bad);
  --color-error-bg:      var(--su-bad-wash);

  /* System faces, deliberately. See the header. */
  --font-ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Small radii are load-bearing. Twelve pixels is what makes a business tool
     look like a template; three is what makes it look drawn. */
  --radius:    4px;
  --radius-sm: 3px;
  --radius-lg: 5px;
}

/* Dark stays dark, and yellow survives it better than most brand colours —
   on near-black it reaches about 12:1 and can carry text, which it cannot on
   paper. The one place the rule inverts.

   The two blocks below must declare the same tokens. `landing.test.js` asserts
   it, because a palette redefined here and forgotten under the stamped
   attribute looks correct until somebody uses the theme toggle. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --su-yellow-deep: #ffc700;
    --su-yellow-wash: #2c2208;

    --su-ink:     #f4f0e6;
    --su-ink-2:   #b5ad9f;
    --su-ink-3:   #8a8175;
    --su-ink-4:   #6f6759;

    --su-paper:   #100e09;
    --su-surface: #1a1610;
    --su-sunk:    #221d15;
    --su-sunk-2:  #2a2419;
    --su-line:    #2e2820;
    --su-line-2:  #443c30;
    --su-line-3:  #5a5142;

    --su-ok:        #7fc39b;
    --su-ok-wash:   #16241c;
    --su-warn:      #e0a94a;
    --su-warn-wash: #2a2012;
    --su-bad:       #e08b7a;
    --su-bad-wash:  #2a1712;

    --su-night:   #0b0906;
    --su-night-2: #16130d;
    --su-night-3: #262019;

    --color-hover:  rgba(255, 255, 255, 0.06);
    --color-active: var(--su-yellow-wash);
    /* Still ink-on-yellow for buttons: the yellow is the same, so the label
       must be too. */
    --color-on-primary: #14110b;
  }
}

/* And again for an explicit choice, outside the media query on purpose: the
   whole point of a stamped attribute is that it beats what the operating system
   says. Without this, a dark toggle would fall back to the template's blue. */
:root[data-theme="dark"] {
  --su-yellow-deep: #ffc700;
  --su-yellow-wash: #2c2208;

  --su-ink:     #f4f0e6;
  --su-ink-2:   #b5ad9f;
  --su-ink-3:   #8a8175;
  --su-ink-4:   #6f6759;

  --su-paper:   #100e09;
  --su-surface: #1a1610;
  --su-sunk:    #221d15;
  --su-sunk-2:  #2a2419;
  --su-line:    #2e2820;
  --su-line-2:  #443c30;
  --su-line-3:  #5a5142;

  --su-ok:        #7fc39b;
  --su-ok-wash:   #16241c;
  --su-warn:      #e0a94a;
  --su-warn-wash: #2a2012;
  --su-bad:       #e08b7a;
  --su-bad-wash:  #2a1712;

  --su-night:   #0b0906;
  --su-night-2: #16130d;
  --su-night-3: #262019;

  --color-hover:  rgba(255, 255, 255, 0.06);
  --color-active: var(--su-yellow-wash);
  --color-on-primary: #14110b;
}