/* Canonical design tokens. See docs/design-system.md. */
:root {
  --hero-windmills-position: 25% 20%;
  --hero-windmills-width: 108%;
  --color-primary: #00425f;
  --color-deep: #00374f;
  --color-text: #163d4e;
  --color-muted: #506772;
  --color-accent: #027592;
  --color-field-focus: var(--color-accent);
  --color-mint: #cde9e7;
  --color-chart-low: #588f6c;
  --color-chart-low-tariffs: #9bc1ad;
  --color-chart-high: #ca7040;
  --color-chart-high-tariffs: #f0be91;
  --color-chart-energy: var(--color-primary);
  --color-chart-tariffs: #57999c;
  --color-surface: #f2f5f5;
  --color-white: #fff;
  --color-hover: #e4f0ef;
  --color-border: #dce5e8;
  --color-border-hover: #a9c6c5;
  --color-on-dark: #fff;
  --color-on-dark-secondary: #d8e6eb;
  --color-on-dark-muted: #adc7d1;
  --color-border-on-dark: rgb(255 255 255 / 15%);
  --color-border-on-mint: rgb(0 66 95 / 15%);
  --color-overlay-dark: rgb(0 55 79 / 90%);
  --color-overlay-light: rgb(255 255 255 / 94%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --section-space: var(--space-10);
  --section-space-compact: var(--space-9);
  --layout-gap: var(--space-9);
  --card-gap: var(--space-6);
  --card-padding: var(--space-6);
  --heading-gap: var(--space-5);
  --action-gap: var(--space-6);
  --panel-inset: var(--space-7);
  --panel-padding: var(--space-7);
  --hero-copy-max-width: 480px;
  --hero-panel-shift: max(calc(var(--page-gutter) - var(--panel-inset)), calc((100% - var(--content-width)) / 2));
  --page-gutter: 56px;
  --content-width: 1280px;
  --media-width: 1120px;
  --chart-height: 360px;
  --chart-height-mobile: 320px;
  --font-hero: clamp(2.5rem, 3.5vw, 3.5rem);
  --font-section: clamp(2rem, 3.2vw, 2.75rem);
  --font-product-detail: var(--font-caption);
  --font-product-price: 2.5rem;
  --product-card-max-width: 22.5rem;
  --product-card-padding: var(--space-5);
  --font-card: 1.5rem;
  --font-body: 1rem;
  --font-small: .875rem;
  --font-caption: .75rem;
  --leading-body: 1.65;
  --leading-heading: 1.15;
  --control-height: 48px;
  --control-height-compact: 44px;
  --radius-control: 4px;
  --radius-card: 8px;
  --radius-media: 16px;
  --motion-fast: 160ms;
  --navy: var(--color-primary);
  --deep: var(--color-deep);
  --ink: var(--color-text);
  --teal: var(--color-accent);
  --mint: var(--color-mint);
  --light: var(--color-surface);
  --line: var(--color-border);
  --muted: var(--color-muted);
  --max: var(--content-width);
}
@media (max-width: 1000px) and (min-width: 761px) {
  :root { --layout-gap: var(--space-7); }
}
@media (max-width: 760px) {
  :root {
    --section-space: var(--space-8);
    --section-space-compact: var(--space-7);
    --layout-gap: var(--space-6);
    --card-gap: var(--space-5);
    --card-padding: var(--space-5);
    --heading-gap: var(--space-4);
    --action-gap: var(--space-5);
    --panel-inset: var(--space-5);
    --panel-padding: var(--space-5);
    --page-gutter: var(--space-5);
  }
}