/* THE THEME — the only file a rebrand touches.
 *
 * Eight values decide the identity. Everything else in the platform is
 * derived from them, so a new brand cannot end up half-changed: there is no
 * second place where a colour lives.
 *
 * To rebrand: change the eight below. Nothing else in this file, no page, no
 * component, no template. Open styleguide.php afterwards to see every
 * component wearing the new identity at once.
 */

:root {
  --ctl-h: 42px;
  --wa: #1FA45B;      /* every full-size button and field */
  --ctl-h-sm: 30px;   /* every small button, sitewide */
  /* ================= THE EIGHT ================= */
  --iris:    #3A4A63;   /* the brand: every primary action, every focus ring */
  --sky:     #6E88A8;   /* the far end of the gradient                       */
  --ink:     #0F1726;   /* all body text                                     */
  --paid:    #10A97A;   /* "this is fine" — paid, done, present              */
  --overdue: #E5556A;   /* "this is wrong" — late, broken, gone              */
  --draft:   #E9A23B;   /* "this wants attention, calmly"                    */
  --serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ============== EVERYTHING BELOW IS DERIVED ==============
     Tints, neutrals, gradients and shadows are all computed from the eight
     above using colour-mix, so they follow automatically. Do not hand-write
     a colour here — change one of the eight instead. */

  /* the neutral ramp: the brand's own hue, almost entirely drained out, so
     white never looks accidentally warm or accidentally blue */
  --paper:   color-mix(in srgb, var(--iris) 2%,  #fff);
  --surface: #ffffff;
  --soft:    color-mix(in srgb, var(--iris) 5%,  #fff);
  --line:    color-mix(in srgb, var(--iris) 11%, #fff);
  --muted:   color-mix(in srgb, var(--ink) 62%,  #fff);
  --faint:   color-mix(in srgb, var(--ink) 42%,  #fff);

  /* the brand, at the strengths the interface actually needs */
  --iris-deep: color-mix(in srgb, var(--iris) 82%, #000);
  --iris-tint: color-mix(in srgb, var(--iris) 8%,  #fff);
  --grad:      linear-gradient(90deg,  var(--iris), var(--sky));
  --grad-btn:  linear-gradient(135deg, var(--iris), color-mix(in srgb, var(--iris) 88%, var(--sky)));

  /* states, each with the faint wash it uses as a background */
  --paid-tint:    color-mix(in srgb, var(--paid) 10%,    #fff);
  --overdue-tint: color-mix(in srgb, var(--overdue) 9%,  #fff);
  --draft-tint:   color-mix(in srgb, var(--draft) 11%,   #fff);

  /* light falls from the top left, so every shadow agrees with every other */
  --lift-1: 0 1px 2px rgba(22,34,68,.05), 0 2px 6px rgba(22,34,68,.05);
  --lift-2: 0 2px 4px rgba(22,34,68,.06), 0 8px 20px rgba(22,34,68,.08);
  --lift-3: 0 4px 8px rgba(22,34,68,.07), 0 16px 40px rgba(22,34,68,.10);
  --ring:   0 0 0 4px color-mix(in srgb, var(--iris) 16%, transparent);

  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* The select caret. A data-URI cannot read a token, so the brand colour is
     written into it HERE, beside the value it must match — the one place a
     rebrand already looks. Change --iris and change this line with it. */
  --caret-img: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233A4A63' stroke-width='1.8'/%3E%3C/svg%3E");
  --caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");

  /* legacy aliases: pages written before Aurora still name bronze. They read
     the brand now, so nothing breaks while pages are converted one at a time.
     Delete these once no page references them. */
  --bronze:      var(--iris);
  --bronze-deep: var(--iris-deep);
  --bronze-tint: var(--iris-tint);
  --accent:      var(--iris-deep);
  --accent-soft: var(--iris-tint);
}