/* Solar Split design system: tokens.
   Ported from the approved Modernist mockup (docs/mockups/_ds, modernist styles.css).
   Every colour, size, space and timing used anywhere in the product comes from here. */

@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/archivo-latin-800-normal.woff2") format("woff2"); }

:root {
  /* colour roles */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* tonal ramps */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2: #e15b47;
  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  /* energy roles: the colour rule lives here so charts, legends, 3D and tables cannot drift */
  --energy-solar-flat: var(--color-accent);
  --energy-solar-house: var(--color-accent-300);
  --energy-solar-battery: var(--color-accent-800);
  --energy-battery-flat: var(--color-accent-900);
  --energy-battery-house: var(--color-accent-700);
  --energy-grid-flat: var(--color-neutral-900);
  --energy-grid-house: var(--color-neutral-400);
  /* by colour slot: o = the home that owns the battery, 0/1/2 = the other homes in order (2-4 homes) */
  --energy-sol-o: var(--color-accent);
  --energy-sol-0: var(--color-accent-300);
  --energy-sol-1: var(--color-accent-400);
  --energy-sol-2: var(--color-accent-200);
  --energy-bat-o: var(--color-accent-900);
  --energy-bat-0: var(--color-accent-700);
  --energy-bat-1: var(--color-accent-600);
  --energy-bat-2: var(--color-accent-500);
  --energy-gr-o: var(--color-neutral-900);
  --energy-gr-0: var(--color-neutral-400);
  --energy-gr-1: var(--color-neutral-500);
  --energy-gr-2: var(--color-neutral-300);
  --energy-solar-export: repeating-linear-gradient(135deg, var(--color-accent) 0 2px, var(--color-accent-100) 2px 5px);
  --energy-battery-export: repeating-linear-gradient(135deg, var(--color-accent-800) 0 2px, var(--color-bg) 2px 5px);
  --hatch-ink: repeating-linear-gradient(135deg, var(--color-text) 0 2px, var(--color-bg) 2px 5px);
  --hatch-neutral: repeating-linear-gradient(135deg, var(--color-neutral-600) 0 2px, var(--color-bg) 2px 5px);

  /* type */
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  /* space (the mockup scale has no 5 or 7) and shape */
  --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: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* 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;

  /* 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;
  }
}