/* The house style, for a page.
 *
 * The same role table as House.swift in every Mac and iOS product and
 * Theme::dopecode() in gust-ui, spelled as custom properties. See
 * dopecode_house_style.html for what each role is for; this file is only
 * the table, and the table is the same everywhere.
 *
 * A role resolves against the appearance: the system's by default, or the
 * one a page pins with data-theme="light" or data-theme="dark" on <html>.
 * Nothing on a page names a hex; it names a role.
 *
 * Copy this file into a product rather than linking it across origins. It
 * changes when the guide changes, and only then.
 */

:root {
  color-scheme: light dark;

  /* Amber, the only accent. The fill does not flip. */
  --house-amber-100: #FFE3B0; /* tint fills, documents and pages only */
  --house-amber-hi: #FFC65C;  /* Amber 300: focused hairline, text selection */
  --house-amber: #FFB224;     /* Amber 500: the mark, the primary button, the rail, a bar in flight */
  --house-amber-dn: #E89A12;  /* Amber 600: the primary button, pressed */
  --house-amber-ring: #8F5806; /* Amber 800: the 2px ring outside a focused control, in both */
  --house-on-amber: #17130F;  /* Ink 800 on an amber fill, in both */

  /* Objects, never chrome: one colour in either appearance. A page someone
     would print, with the ink on paper on it, and an instrument's
     faceplate. gust-ui draws them as materials; a page draws the fill. */
  --house-page: #FFFDFA;
  --house-page-line: #E0D8CB;
  --house-page-text: #17130F;
  --house-page-dim: #6B6055;
  --house-anodised: #241E18;

  /* Radii: r12 panels, r10 detail rows, r8 buttons and fields, r6 chips.
     List rows are flush and square. */
  --house-r-panel: 12px;
  --house-r-row: 10px;
  --house-r-button: 8px;
  --house-r-chip: 6px;
  --house-rail: 3px;

  /* Type: JetBrains Mono for what a machine said, the system face for what a
     person reads. */
  --house-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --house-sans: -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Light: the default, and what a page without a preference gets. */
  --house-canvas: #F7F4EF;     /* Paper */
  --house-card: #FFFDFA;       /* Surface */
  --house-hover: #F7F3EC;
  --house-raised: #F0EBE2;
  --house-line: #E0D8CB;       /* Hairline */
  --house-text: #17130F;       /* Ink 800 */
  --house-dim: #6B6055;
  --house-amber-text: #8F5806; /* Amber 800 */
  --house-ok: #23714E;
  --house-warn: #B23B00;
  --house-bad: #C70F34;

  /* Data: never amber and never a status colour. A scale with a direction
     runs cool-2 → warm-2 through neutral; series take 1–6 in order and
     never cycle; one series with no judgement is plain. */
  --house-cool-2: #2456BD;
  --house-cool-1: #5E93E8;
  --house-neutral: #9A8F82;
  --house-warm-1: #E5735F;
  --house-warm-2: #BF2F3B;
  --house-series-1: #2456BD;
  --house-series-2: #BF696A;
  --house-series-3: #1195B4;
  --house-series-4: #96872D;
  --house-series-5: #773F9B;
  --house-series-6: #2E9E52;
  --house-series-plain: #BDB2A3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --house-canvas: #17130F;     /* Ink 800 */
    --house-card: #1B1712;       /* Ink 700 */
    --house-hover: #211C16;      /* Ink 650 */
    --house-raised: #241E18;     /* Ink 600 */
    --house-line: #3A322A;       /* Ink 500 */
    --house-text: #F4EFE8;       /* Bone */
    --house-dim: #9A8F82;        /* Ink 300 */
    --house-amber-text: #FFB224; /* Amber 500 */
    --house-ok: #48C78E;
    --house-warn: #FF8A3D;
    --house-bad: #F2555A;
    --house-cool-2: #6793E3;
    --house-cool-1: #3A63B8;
    --house-neutral: #7D7266;
    --house-warm-1: #A93F37;
    --house-warm-2: #EC5B63;
    --house-series-1: #6793E3;
    --house-series-2: #A74449;
    --house-series-3: #1F9BBA;
    --house-series-4: #8A7B1D;
    --house-series-5: #834BA8;
    --house-series-6: #1D7D3E;
    --house-series-plain: #54493E;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --house-canvas: #17130F;
  --house-card: #1B1712;
  --house-hover: #211C16;
  --house-raised: #241E18;
  --house-line: #3A322A;
  --house-text: #F4EFE8;
  --house-dim: #9A8F82;
  --house-amber-text: #FFB224;
  --house-ok: #48C78E;
  --house-warn: #FF8A3D;
  --house-bad: #F2555A;
  --house-cool-2: #6793E3;
  --house-cool-1: #3A63B8;
  --house-neutral: #7D7266;
  --house-warm-1: #A93F37;
  --house-warm-2: #EC5B63;
  --house-series-1: #6793E3;
  --house-series-2: #A74449;
  --house-series-3: #1F9BBA;
  --house-series-4: #8A7B1D;
  --house-series-5: #834BA8;
  --house-series-6: #1D7D3E;
  --house-series-plain: #54493E;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* The ground and the two faces. */

body {
  background: var(--house-canvas);
  color: var(--house-text);
  font-family: var(--house-sans);
}

code, kbd, samp, pre {
  font-family: var(--house-mono);
}

a {
  color: var(--house-amber-text);
}

/* Selected text is Amber 300 behind Ink 800 at full opacity, in both
   appearances: the one place amber is a background. */
::selection {
  background: var(--house-amber-hi);
  color: var(--house-on-amber);
}

/* Focus is a 2px Amber 800 ring outside the control's own edge, so the edge
   never moves and nothing below it shifts. */
:focus-visible {
  outline: 2px solid var(--house-amber-ring);
  outline-offset: 0;
}