/* Cascade order, lowest first. Later layers win regardless of specificity, so a component restyles
   a generic control without out-selecting it. reset's [hidden] !important beats every layer. */
@layer reset, tokens, base, layout, controls, components, utilities;

@layer tokens {

  /* The app is dark only: the browser draws its own parts dark too (unstyled inputs, selects and their
     menus, scrollbars, number spinners). Printed pages are black on white (document.css). */
  :root {
    color-scheme: dark;

    /* Private palette — referenced only by the semantic tokens below. */
    --brand-graphite-950: oklch(0.15 0 0);
    --brand-graphite-850: oklch(0.23 0 0);
    --brand-graphite-800: oklch(0.27 0 0);
    --brand-graphite-750: oklch(0.33 0 0);
    --brand-graphite-700: oklch(0.383 0 0);
    --brand-graphite-650: oklch(0.409 0 0);
    --brand-graphite-400: oklch(0.63 0 0);
    --brand-graphite-200: oklch(0.833 0 0);
    --brand-graphite-100: oklch(0.9 0 0);
    --brand-blue: oklch(0.5 0.12 255);
    --brand-azure: oklch(0.655 0.184 262);
    --brand-red: oklch(0.65 0.235 23);
    --brand-mint: oklch(0.862 0.167 157.7);
    --brand-violet: oklch(0.656 0.235 306.3);
    --brand-amber: oklch(0.821 0.149 72.1);
    --brand-lime: oklch(0.949 0.193 118.2);
    --brand-green: oklch(0.81 0.222 131.2);
    --brand-coral: oklch(0.7 0.17 35);
    --brand-cyan: oklch(0.82 0.12 205);
    --brand-tile: oklch(0.78 0.05 230);
    --brand-pink: oklch(0.72 0.17 350);
    --brand-deep-blue: oklch(0.62 0.17 255);
    --brand-porcelain: oklch(0.93 0.03 215);
    --brand-teal: oklch(0.8 0.09 175);
    --brand-hot-water: oklch(0.74 0.17 50);
    --brand-cold-water: oklch(0.78 0.12 225);
    --brand-sewer: oklch(0.6 0.07 60);
    --brand-oak: oklch(0.72 0.1 65);
    --brand-ice: oklch(0.86 0.1 220);
    --brand-sage: oklch(0.8 0.11 145);

    --white: oklch(1 0 0);
    --black: oklch(0 0 0);

    /* Semantic API — the only colours components use. */
    --color-canvas: var(--brand-graphite-800);
    --color-canvas-glow: color-mix(in oklch, var(--color-canvas), var(--white) 14%);
    --color-surface: var(--brand-graphite-850);
    --color-surface-sunken: color-mix(in oklch, var(--color-surface), var(--black) 25%);
    --color-edge: var(--brand-graphite-950);
    --color-ink: var(--brand-graphite-100);
    --color-ink-muted: var(--brand-graphite-400);
    --color-line: var(--brand-graphite-750);

    --color-primary: var(--brand-blue);
    --color-on-primary: var(--white);
    --color-accent: var(--brand-violet);
    --color-on-accent: var(--white);
    --color-info: var(--brand-azure);
    --color-success: var(--brand-mint);
    --color-warning: var(--brand-amber);
    --color-danger: var(--brand-red);
    --color-danger-ink: color-mix(in oklch, var(--color-danger), var(--white) 45%);
    --color-primary-surface: color-mix(in oklch, var(--color-primary) 22%, transparent);
    --color-danger-surface: color-mix(in oklch, var(--color-danger) 22%, transparent);
    --color-warning-surface: color-mix(in oklch, var(--color-warning) 18%, transparent);

    /* Heating domain (also read by the 3D viewer through plan/colors.js). */
    --color-radiator: var(--brand-mint);
    --color-towel-rail: var(--brand-azure);
    --color-boiler: var(--brand-violet);
    --color-floor-heating: var(--brand-amber);
    --color-gas-heater: var(--brand-coral);
    --color-electric-heater: var(--brand-cyan);
    --color-covering-tile: var(--brand-tile);
    --color-covering-wood: var(--brand-oak);
    --color-manifold: var(--brand-pink);
    --color-water-hot: var(--brand-hot-water);
    --color-water-cold: var(--brand-cold-water);
    /* and the water inlet */
    --color-sewer: var(--brand-sewer);
    /* drains and sewer outlets */
    --color-plumbing: var(--brand-porcelain);
    /* bath, shower, faucet, toilet, bidet */
    --color-appliance: var(--brand-teal);
    /* plumbed-in kitchen appliances: steam oven, coffee machine, ice maker */
    --color-pipe-supply: var(--brand-red);
    --color-pipe-return: var(--brand-deep-blue);
    /* every other loop of a floor-heating zone split in several: told apart from its neighbour */
    --color-pipe-supply-alt: var(--brand-pink);
    --color-pipe-return-alt: var(--brand-cyan);
    /* Climate: air conditioners (indoor and outdoor units), ventilation units and grilles, and the vents by
       the way the air goes — red in, blue out, as on the drawings. */
    --color-air-conditioner: var(--brand-ice);
    --color-ventilation: var(--brand-sage);
    --color-air-supply: var(--brand-red);
    --color-air-extract: var(--brand-deep-blue);
    /* copper refrigerant lines and the condensate drain beside them */
    --color-refrigerant: var(--brand-hot-water);
    --color-condensate: var(--brand-tile);
    --color-stairs: var(--brand-lime);
    --color-wall: var(--brand-graphite-200);
    --color-opening: var(--brand-cyan);
    /* windows and doors in the walls */
    --color-grid: var(--brand-graphite-700);
    --color-grid-center: var(--brand-graphite-650);
    --color-grid-major: color-mix(in oklch, var(--color-grid), var(--white) 18%);
    --color-preview: var(--brand-lime);
    --color-dimension: var(--color-info);
    --color-reference: color-mix(in oklch, var(--color-wall), var(--color-canvas) 25%);
    --color-underlay: color-mix(in oklch, var(--color-ink-muted), var(--color-canvas) 20%);
    /* the lines of an imported plan traced over (plan/underlay.js) */
    /* Axes named as in Blender (Z up), used by the ground lines and the navigation gizmo. */
    --color-axis-x: var(--brand-red);
    --color-axis-y: var(--brand-green);
    --color-axis-z: var(--brand-azure);

    /* Right-hand panel of the 3D views; floating controls keep clear of it. Its divider overrides
       this on the root (panel_resize_controller). */
    --panel-width: 360px;
  }
}