/*
  PowerDeal design tokens: the only place where colours, type, spacing, sizes and motion are defined.
  Look "Survey": ink on paper, lines and dimensions carry the information.
  Change a token here and the whole app follows.
*/

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-display: swap; src: url("fonts/barlow-semi-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-700.woff2") format("woff2"); }

:root {
  /* ---- Colour ---- */
  --color-paper: #EEF1F0;        /* page background */
  --color-sheet: #FFFFFF;        /* surfaces */
  --color-ink: #1C2B36;          /* text, primary actions, strong lines */
  --color-ink-hover: #2A3D4B;
  --color-ink-soft: #52616C;     /* secondary text */
  --color-on-ink: #FFFFFF;       /* text on ink */
  --color-rule: #C5CFD4;         /* hairlines */
  --color-grid: #E3E9EB;         /* drawing grid, hover wash */
  --color-dim: #1F5FBF;          /* dimensions, links, current step, selection */
  --color-dim-strong: #18478F;
  --color-dim-wash: #E4EDFA;
  --color-ok: #16804F;           /* measured, checked */
  --color-ok-strong: #0F5A38;
  --color-ok-wash: #E3F2EA;
  --color-ok-on-ink: #9FE3BF;    /* "measured" on a pressed (ink) control */
  --color-warn: #A86A12;         /* needs checking */
  --color-warn-strong: #7A4C0C;
  --color-warn-wash: #FBF0DC;
  --color-scrim: rgb(255 255 255 / 0.85);

  /* Drawings (roof model) */
  --color-drawing-sunny: var(--color-dim-wash);
  --color-drawing-shade: #D7DEE3;
  --color-drawing-flat: #E6EBED;
  --color-drawing-wall: #FFFFFF;
  --color-drawing-wall-shaded: #F4F6F7;
  --color-drawing-hatch: #B9C9DE;
  --color-drawing-panel: #16263F;
  --color-drawing-panel-edge: #C9D6E6;
  --color-drawing-panel-shine: #9DB8DC;
  --color-drawing-wall-render: #D2D2CE; /* walls in 3D over the photo: lit, so it reads as white */
  --color-sky: #4A90D9;
  --color-sky-horizon: #CFE6F7;
  --color-drawing-part: #F1EDE4;        /* another roof of the same building */
  --color-drawing-part-hover: #E7E0D2;
  --color-photo-backdrop: #2F3B33;  /* under aerial photo tiles while they load */
  --color-on-photo: #FFFFFF;        /* lines drawn over an aerial photo */
  /* Groups (categorical, fixed order, validated for colour vision): the flat parts of a roof in the survey */
  --color-group-1: #2a78d6;
  --color-group-2: #eb6834;
  --color-group-3: #1baf7a;
  --color-group-4: #eda100;
  --color-group-5: #e87ba4;
  --color-group-6: #008300;
  --color-group-7: #6250d6;
  --color-group-8: #e34948;
  /* Height bands (one hue, light = low, dark = high): survey heights over a plan */
  --color-level-1: oklch(0.95 0.025 300);
  --color-level-2: oklch(0.87 0.055 300);
  --color-level-3: oklch(0.79 0.085 300);
  --color-level-4: oklch(0.70 0.115 300);
  --color-level-5: oklch(0.61 0.135 300);
  --color-level-6: oklch(0.52 0.145 300);
  --color-level-7: oklch(0.43 0.145 300);

  /* ---- Type ---- */
  --font-body: "Barlow", system-ui, sans-serif;
  --font-cond: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --text-xs: 0.8125rem;   /* 13 */
  --text-sm: 0.875rem;    /* 14 */
  --text-md: 0.9375rem;   /* 15: body */
  --text-base: 1rem;      /* 16: lead text */
  --text-lg: 1.0625rem;   /* 17: labels, values */
  --text-xl: 1.1875rem;   /* 19: measures */
  --text-2xl: 1.375rem;   /* 22: inputs */
  --text-3xl: 1.875rem;   /* 30: step titles */
  --text-4xl: 2.25rem;    /* 36: page titles */
  --leading-tight: 1.1;
  --leading-body: 1.45;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Space (4 px steps) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.125rem;    /* panel inset */
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-14: 3.5rem;

  /* ---- Lines and shapes ---- */
  --radius: 4px;
  --radius-round: 999px;
  --border-hair: 1px solid var(--color-rule);
  --border-strong: 1px solid var(--color-ink);
  --focus-ring: 2px solid var(--color-dim);
  --shadow-menu: 0 6px 18px rgb(0 0 0 / 0.15);
  --filter-lifted: drop-shadow(0 0 1.5px var(--color-sheet)) drop-shadow(0 3px 4px rgb(0 0 0 / 0.4));  /* something picked up and carried, visible on any background */
  --grid-size: 30px;

  /* ---- Sizes ---- */
  --touch: 44px;            /* minimum touch target */
  --control-height: 52px;   /* buttons, inputs */
  --control-height-lg: 60px;
  --bar-height: 60px;
  --steps-height: 40px;
  --panel-width: 400px;
  --toolbox-width: 84px;    /* canvas tools: icon over a short label */
  --toolbox-width-narrow: 68px;
  --content-width: 640px;

  /* ---- Layers ---- */
  --z-map-overlay: 1100;    /* above Leaflet's own panes and controls */
  --z-menu: 1500;           /* open menus, above the canvas overlays */
  --z-toast: 2000;

  /* ---- Motion ---- */
  --duration-fast: 120ms;
  --duration-spin: 800ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-spin: 0ms;
  }
}