/* The palette and the metrics, in one place: app/ios/Gofannon/Design/Theme.swift, design 1
 * "Tall" from docs/design/appdesign/runda2-grafik.html. Every meaning has a FULL colour and a
 * SOFT one, so that a label, a field and a button can say the same thing at different
 * strengths, and the accent is left to mean only "this can be pressed".
 *
 * Dark mode has its OWN values, not inverted light ones. The surface is lighter than the
 * background in both modes, so depth reads the same; the accent switches direction, because a
 * dark contrast colour against a dark background does not show. */

:root {
  color-scheme: light;

  /* floors and surfaces */
  --background: #F7F5F2;        /* never pure white in light mode: a warm grey rests the eye */
  --surface: #FFFFFF;
  --surface-sunken: #F1EEE9;    /* a surface inside a card: fields, code, rows */
  --line: #E9E4DD;
  --card-border: #ECE7E0;
  /* The card's soft shadow. Light mode only: in the dark the surface is lighter than the floor
   * and that is depth enough, while a shadow on near-black is only a smudge. */
  --card-shadow: 0 1px 1px rgba(27, 26, 24, 0.04), 0 6px 9px rgba(27, 26, 24, 0.12);

  /* text tiers */
  --text: #1B1A18;
  --text-secondary: #6B655E;
  --text-tertiary: #716A62;

  /* the accent: a muted green, only where something can be done */
  --accent: #3D6B61;
  --on-accent: #FFFFFF;
  --accent-soft: #E4EEEA;

  /* not right, but nothing is broken */
  --warning: #8F5C12;
  --warning-soft: #F6ECD9;
  --on-warning: #FFFFFF;
  /* broken */
  --danger: #9E3F36;
  --danger-soft: #F6E3E0;

  /* what the machine is doing to the room: they differ in lightness as well as hue */
  --cooling: #2F6BA8;
  --cooling-soft: #E3EDF7;
  --on-cooling: #FFFFFF;
  --heating: #B9532A;
  --heating-soft: #F8E8DE;
  --on-heating: #FFFFFF;

  --sun: #C98A1B;
  --energy: #5B5FA8;
  --energy-soft: #E8E8F5;
  --power: #C27A0E;
  --phase-1: #2A78D6;
  --phase-2: #1BAF7A;
  --phase-3: #4A3AA7;
  --graph-outside: #9C958C;

  /* metrics */
  --xs: 4px;
  --s: 8px;
  --m: 12px;
  --l: 16px;
  --xl: 24px;
  --xxl: 36px;
  --r-card: 20px;
  --r-control: 14px;
  --r-small: 10px;
  --gutter: 20px;
  /* Layout: one column up to this width, two above (docs/design/webapp.md). Used by app.css;
   * a custom property cannot feed a media query, so the number is repeated there. */
  --page-max: 1120px;

  /* type: the system stack, as on the phone. Sizes are iOS's text styles at the default size. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", var(--font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-caption2: 11px;
  --fs-caption: 12px;
  --fs-footnote: 13px;
  --fs-subheadline: 15px;
  --fs-body: 17px;
  --fs-title3: 20px;
  --fs-title2: 22px;
  --fs-title: 28px;
  --fs-large-title: 34px;
  --fs-big-value: 54px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --background: #0F1012;
    --surface: #18191C;
    --surface-sunken: #212327;
    --line: #2B2D32;
    /* What keeps a card apart from the floor now that both are near-black (2026-10-02). */
    --card-border: #25272B;
    --card-shadow: none;

    --text: #ECEAE6;
    --text-secondary: #A29C94;
    --text-tertiary: #8C867E;

    --accent: #81B7A9;
    --on-accent: #10201C;
    --accent-soft: #22332F;

    --warning: #D8A75F;
    --warning-soft: #382D1C;
    --on-warning: #1E1608;
    --danger: #E28C82;
    --danger-soft: #3A2422;

    --cooling: #85B6E8;
    --cooling-soft: #1E2A38;
    --on-cooling: #1B1A18;
    --heating: #E8916A;
    --heating-soft: #3A271F;
    --on-heating: #1B1A18;

    --sun: #E3B456;
    --energy: #A3A6E8;
    --energy-soft: #26273C;
    --power: #F0B04A;
    --phase-1: #3987E5;
    --phase-2: #199E70;
    --phase-3: #9085E9;
    --graph-outside: #77716A;
  }
}