/*
 * The look of the app: black and gold, with AssetProc orange as the spark.
 *
 * Change a value here and every screen follows - nothing else needs editing
 * to re-brand. app.css lays the screens out using only these names.
 * See CUSTOMISING.md for fonts, the logo and how to try changes safely.
 */
@font-face { font-family: "Heebo"; src: url("/fonts/heebo-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/libre-baskerville-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/libre-baskerville-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Brand */
  --gold: #c9a24b;            /* the main brand colour: active items, highlights, income in charts */
  --gold-light: #e9cf87;
  --gold-deep: #8a6a24;       /* gold that is dark enough for text on white */
  --orange: #fa9801;          /* AssetProc orange: small accents only */
  --black: #0b0b0c;

  --accent: var(--gold);      /* focus rings, meters */
  --accent-soft: #f7f0de;     /* tinted backgrounds behind gold items */
  --accent-text: #0b0b0c;     /* text on gold */
  --accent-2: var(--orange);
  --btn-bg: linear-gradient(180deg, #e3c26f, #c29637);  /* main buttons */
  --link: #8a6a24;

  /* The sidebar */
  --side-bg: linear-gradient(180deg, #0b0b0c 0%, #141210 100%);
  --side-solid: #0b0b0c;
  --side-text: #a8a39a;
  --side-text-strong: #fff;
  --side-hover: rgb(255 255 255 / .05);
  --side-active: linear-gradient(90deg, rgb(201 162 75 / .22), rgb(201 162 75 / .04));
  --side-line: rgb(201 162 75 / .18);
  --side-width: 252px;

  /* Surfaces and text */
  --bg: #f6f5f2;              /* page background (warm off-white) */
  --surface: #fff;            /* cards */
  --sunk: #faf9f6;            /* table headings, hovered rows */
  --text: #111111;
  --muted: #5f5b54;
  --faint: #9a958c;
  --line: #ebe7df;
  --line-strong: #d8d2c6;

  /* Status colours (chips, alerts, messages) */
  --ok: #1f7a4d;   --ok-bg: #e8f5ee;
  --warn: #9a5b00; --warn-bg: #fff3e0;
  --crit: #b8321c; --crit-bg: #fcece8;
  --info: #5c4a1e; --info-bg: #f5efe1;

  /* Charts: income, costs, net, then extra slices */
  --chart-1: #c9a24b;
  --chart-2: #d9d5cd;
  --chart-3: #111111;
  --chart-4: #fa9801;
  --chart-5: #6b6559;
  --chart-6: #e9cf87;
  --chart-grid: #efece6;

  /* Type */
  --font: "Heebo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-size: 14.5px;

  /* Shape */
  --radius: 14px;             /* cards, tiles */
  --radius-sm: 8px;           /* buttons, inputs */
  --shadow: 0 1px 2px rgb(17 17 17 / .04), 0 8px 24px rgb(17 17 17 / .05);
  --width: 1320px;            /* widest the content gets */

  color-scheme: light;
}

/* Dark mode follows the device setting: black, charcoal and gold. */
@media (prefers-color-scheme: dark) {
  :root {
    --accent-soft: #2a2416; --link: #e3c26f; --gold-deep: #e3c26f;
    --side-bg: linear-gradient(180deg, #050505 0%, #0d0c0a 100%); --side-solid: #050505;
    --bg: #0b0b0c; --surface: #151515; --sunk: #111111;
    --text: #f3f1ec; --muted: #b0aa9f; --faint: #7d786f;
    --line: #262420; --line-strong: #37332c;
    --ok: #63d19b;   --ok-bg: #11251b;
    --warn: #ffb54d; --warn-bg: #2b1f0b;
    --crit: #ff8a73; --crit-bg: #2d1511;
    --info: #e3c26f; --info-bg: #241f13;
    --chart-2: #3a3731; --chart-3: #f3f1ec; --chart-grid: #222;
    --shadow: 0 1px 2px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}