/* Solar Split design system: tokens.
   Light theme of redesign mockup C "Rooftop Diorama" (docs/mockups/redesign-c/mockup-c.html).
   Every colour, size, space and timing used anywhere in the product comes from here. */

/* Self-hosted variable fonts (SIL OFL, src/design-system/fonts). The fallback faces match the metrics of the system font so the swap does not shift the layout. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-style: normal; font-display: swap; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque Fallback"; src: local("Arial"); size-adjust: 102%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"); size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  /* palette (mockup C names) */
  --sky: #EAF3F7;        /* page */
  --sky-2: #DCEBF2;
  --paper: #FFFFFF;      /* cards and sheets */
  --ink: #1D3B35;        /* deep eucalyptus ink */
  --ink-2: #4A645E;
  --ink-3: #5A726C;      /* captions; 4.5:1 on the page */
  --line: #CFDFE3;
  --sun: #F4B82E;        /* solar. A fill only, never text (fails AA); text on sun is ink */
  --sun-soft: #FBE3A0;
  --sun-line: #B97F00;   /* any sun line, outline or small mark (the sun fill itself is too light for 3:1) */
  --supply: #7B8F96;
  --grid: #46607E;       /* grid power */
  --landlord: #2E7D64;   /* eucalyptus: brand and primary */

  /* persona wires: decorative, marketing landing only. The app never uses them for data. */
  --tenant: #2A81DE;
  --agent: #6F5792;
  --family: #B83147;
  --strata: #7F8B92;

  /* semantic roles: one meaning per colour */
  --c-solar: var(--sun);
  --c-grid: var(--grid);
  --c-battery: #0F4C5C;  /* deep teal-ink: apart from brand green and grid blue under all three colour-vision simulations */
  --c-brand: var(--landlord);
  --c-error: #A8392B;    /* the only red-family tone; errors only. Always paired with an icon or words */
  --c-warn: #8A5A00;     /* dark amber, text-safe. Warnings only */
  --focus: var(--color-accent); /* focus rings; dark uses the note's focus blue */
  --c-ok: var(--c-brand); /* success is the brand tone, always paired with a tick or words */

  /* colour roles (older names, kept so consumers keep working) */
  --color-bg: var(--sky);
  --color-surface: var(--paper);
  --color-text: var(--ink);
  --color-accent: var(--c-brand);
  --color-divider: var(--line);
  --color-control-border: #8DA3A8;

  /* tonal ramps */
  --color-neutral-100: #F6FAFB;
  --color-neutral-200: #E3EDF1;
  --color-neutral-300: #CFDFE3;
  --color-neutral-400: #B3C6CB;
  --color-neutral-500: #8DA3A8;
  --color-neutral-600: #5A726C;
  --color-neutral-700: #4A645E;
  --color-neutral-800: #34504A;
  --color-neutral-900: #1D3B35;

  --color-accent-100: #E6F3EE;
  --color-accent-200: #CBE7DC;
  --color-accent-300: #A3D3C1;
  --color-accent-400: #6FB69C;
  --color-accent-500: #2E7D64;
  --color-accent-600: #276B55;
  --color-accent-700: #1F5845;
  --color-accent-800: #184535;
  --color-accent-900: #11332A;

  /* energy roles: the colour rule lives here so charts, legends, 3D and tables cannot drift */
  --energy-solar-flat: var(--c-solar);
  --energy-solar-house: var(--energy-sol-2);
  --energy-solar-battery: var(--energy-sol-o);
  --energy-battery-flat: var(--c-battery);
  --energy-battery-house: var(--energy-bat-1);
  --energy-grid-flat: var(--c-grid);
  --energy-grid-house: var(--energy-gr-1);
  /* by colour slot: o = the home that owns the battery, 0..4 = the other homes in order (up to 6 homes; the charts use 2-4, the 3D property up to 6).
     Each energy type keeps its own hue; the homes differ by lightness steps. */
  --energy-sol-o: #C59D30;
  --energy-sol-0: #F4B82E;
  --energy-sol-1: #F7CD6D;
  --energy-sol-2: #FADC97;
  --energy-sol-3: #FBE8BC;
  --energy-sol-4: #FDF1D5;
  --energy-bat-o: #0F4C5C;
  --energy-bat-0: #3F707D;
  --energy-bat-1: #6A909A;
  --energy-bat-2: #91ADB4;
  --energy-bat-3: #B2C6CB;
  --energy-bat-4: #CFDBDE;
  --energy-gr-o: #46607E;
  --energy-gr-0: #6B8098;
  --energy-gr-1: #8C9CAF;
  --energy-gr-2: #AAB6C4;
  --energy-gr-3: #C4CCD6;
  --energy-gr-4: #DADFE5;
  --energy-grid-battery: var(--energy-gr-0);
  --energy-solar-export: repeating-linear-gradient(135deg, var(--c-solar) 0 2px, var(--paper) 2px 5px);
  --energy-battery-export: repeating-linear-gradient(135deg, var(--c-battery) 0 2px, var(--color-bg) 2px 5px);
  --hatch-ink: repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--color-bg) 2px 5px);
  --hatch-neutral: repeating-linear-gradient(135deg, var(--color-neutral-600) 0 2px, var(--color-bg) 2px 5px);

  /* per-home markers (up to 6 homes): lightness steps of ink, always with a letter and a shape so colour is never the only cue */
  --home-1: #1D3B35;
  --home-2: #38534D;
  --home-3: #586E6A;
  --home-4: #7C8D8A;
  --home-5: #A0ADAA;
  --home-6: #C0C8C6;
  --home-mark-1: "A";
  --home-mark-2: "B";
  --home-mark-3: "C";
  --home-mark-4: "D";
  --home-mark-5: "E";
  --home-mark-6: "F";

  /* type: Bricolage for headings, Figtree for body; seven sizes */
  --font-heading: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Figtree", "Figtree Fallback", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --fs-1: 0.875rem;
  --fs-2: 0.9375rem;
  --fs-3: 1.0625rem;
  --fs-4: 1.25rem;
  --fs-5: 1.5625rem;
  --fs-6: 2rem;
  --fs-7: 2.625rem;

  /* space and shape */
  --wire-pill: var(--paper);   /* persona wire pill and flow dash fills (were hard-coded white) */
  --wire-flow: var(--paper);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 12px;   /* controls */
  --radius-md: 20px;   /* cards */
  --radius-lg: 28px;   /* sheets and the hero card */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-md: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--ink) 35%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, var(--ink) 22%, transparent);

  /* safe areas (fixed bars pad by these) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* motion (the values motion.js and the CSS transitions share) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-tip: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-switch: cubic-bezier(0.2, 0, 0, 1);
  --dur-rise: 500ms;
  --dur-grow: 650ms;
  --dur-growx: 700ms;
  --dur-draw: 1400ms;
  --dur-count: 1100ms;
  --dur-pulse: 1600ms;
  --dur-sheet: 320ms;
  --dur-switch: 150ms;
  --dur-press: 100ms;

  /* responsive layout knobs (overridden below 760px, see layout.css) */
  --gut: 24px;
  --hero-h: 460px;
  --chart-up: 140px;
  --chart-down: 110px;
  --chart-axis: 270px;
  --chart-gap: 4px;
}

@media (max-width: 759.98px) {
  :root {
    --gut: 16px;
    --hero-h: 320px;
    --chart-up: 110px;
    --chart-down: 90px;
    --chart-axis: 220px;
    --chart-gap: 2px;
  }
}

/* Dark theme (A2). Values from /vault/Projects/Solar Split/Redesign 2026-10/Dark theme tokens 2026-10.md.
   Applied when the OS is dark and the visitor has not chosen Light, or when the toggle sets data-theme="dark" (src/design-system/theme.js).
   The two blocks below must stay identical (tests/design-fidelity/theme.spec.js checks it). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sky: #0E1D1A;
    --sky-2: #20403A;
    --paper: #152A26;
    --ink: #E6F0EC;
    --ink-2: #AFC5BE;
    --ink-3: #8FA8A1;
    --line: #2C4741;
    --sun: #F4B82E;
    --sun-soft: #A07C26;
    --sun-line: #F4B82E;
    --supply: #4F6A69;
    --grid: #7F9AC0;
    --landlord: #4DB894;
    --tenant: #8EC4F5;
    --agent: #9F84BB;
    --family: #FA5172;
    --strata: #9AA7AE;
    --c-battery: #BFE4EA;  /* pale teal: apart from grid blue and brand green under all three colour-vision simulations */
    --c-error: #F0705F;
    --c-warn: #F2994A;  /* the note's warn #F0B54A is deltaE 3.4 from sun, so it stays apart (tokens.spec.js A1-3) */
    --focus: #6DB6E6;
    --color-control-border: #6E8A86;
    --color-neutral-100: #142529;
    --color-neutral-200: #1C3036;
    --color-neutral-300: #2C444A;
    --color-neutral-400: #3F5A61;
    --color-neutral-500: #6E8A86;
    --color-neutral-600: #90A8A2;
    --color-neutral-700: #B0C3BE;
    --color-neutral-800: #CFDEDA;
    --color-neutral-900: #E8F2EF;
    --color-accent-100: #12332B;
    --color-accent-200: #18463A;
    --color-accent-300: #1F5C4C;
    --color-accent-400: #2C7E68;
    --color-accent-500: #0AA07D;
    --color-accent-600: #7DDDC0;
    --color-accent-700: #4FC9A5;
    --color-accent-800: #9BE6CF;
    --color-accent-900: #C4F2E3;
    --energy-sol-o: #D9A62B;
    --energy-sol-0: #F4B82E;
    --energy-sol-1: #C9962A;
    --energy-sol-2: #9A7424;
    --energy-sol-3: #6E5420;
    --energy-sol-4: #4A3A1C;
    --energy-bat-o: #BFE4EA;
    --energy-bat-0: #94BDC6;
    --energy-bat-1: #6E99A3;
    --energy-bat-2: #4F7882;
    --energy-bat-3: #3A5A63;
    --energy-bat-4: #2B434A;
    --energy-gr-o: #7F9AC0;
    --energy-gr-0: #6683A6;
    --energy-gr-1: #4F6B8C;
    --energy-gr-2: #3C5470;
    --energy-gr-3: #2E4157;
    --energy-gr-4: #24323F;
    --home-1: #E8F2EF;
    --home-2: #CBD9D5;
    --home-3: #AEBFBB;
    --home-4: #8FA19D;
    --home-5: #72837F;
    --home-6: #566663;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-md: 0 1px 0 rgb(0 0 0 / 0.3), 0 8px 24px -10px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sky: #0E1D1A;
  --sky-2: #20403A;
  --paper: #152A26;
  --ink: #E6F0EC;
  --ink-2: #AFC5BE;
  --ink-3: #8FA8A1;
  --line: #2C4741;
  --sun: #F4B82E;
  --sun-soft: #A07C26;
  --sun-line: #F4B82E;
  --supply: #4F6A69;
  --grid: #7F9AC0;
  --landlord: #4DB894;
  --tenant: #8EC4F5;
  --agent: #9F84BB;
  --family: #FA5172;
  --strata: #9AA7AE;
  --c-battery: #BFE4EA;  /* pale teal: apart from grid blue and brand green under all three colour-vision simulations */
  --c-error: #F0705F;
  --c-warn: #F2994A;  /* the note's warn #F0B54A is deltaE 3.4 from sun, so it stays apart (tokens.spec.js A1-3) */
  --focus: #6DB6E6;
  --color-control-border: #6E8A86;
  --color-neutral-100: #142529;
  --color-neutral-200: #1C3036;
  --color-neutral-300: #2C444A;
  --color-neutral-400: #3F5A61;
  --color-neutral-500: #6E8A86;
  --color-neutral-600: #90A8A2;
  --color-neutral-700: #B0C3BE;
  --color-neutral-800: #CFDEDA;
  --color-neutral-900: #E8F2EF;
  --color-accent-100: #12332B;
  --color-accent-200: #18463A;
  --color-accent-300: #1F5C4C;
  --color-accent-400: #2C7E68;
  --color-accent-500: #0AA07D;
  --color-accent-600: #7DDDC0;
  --color-accent-700: #4FC9A5;
  --color-accent-800: #9BE6CF;
  --color-accent-900: #C4F2E3;
  --energy-sol-o: #D9A62B;
  --energy-sol-0: #F4B82E;
  --energy-sol-1: #C9962A;
  --energy-sol-2: #9A7424;
  --energy-sol-3: #6E5420;
  --energy-sol-4: #4A3A1C;
  --energy-bat-o: #BFE4EA;
  --energy-bat-0: #94BDC6;
  --energy-bat-1: #6E99A3;
  --energy-bat-2: #4F7882;
  --energy-bat-3: #3A5A63;
  --energy-bat-4: #2B434A;
  --energy-gr-o: #7F9AC0;
  --energy-gr-0: #6683A6;
  --energy-gr-1: #4F6B8C;
  --energy-gr-2: #3C5470;
  --energy-gr-3: #2E4157;
  --energy-gr-4: #24323F;
  --home-1: #E8F2EF;
  --home-2: #CBD9D5;
  --home-3: #AEBFBB;
  --home-4: #8FA19D;
  --home-5: #72837F;
  --home-6: #566663;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 1px 0 rgb(0 0 0 / 0.3), 0 8px 24px -10px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.6);
}