/*
 * Homer design tokens for homertime.com.
 * Same values as homer/packages/core/public/homer.css (the app) so site and
 * app stay one brand. Light only for now.
 */

@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}

:root {
  --h-color-primary:        #2a5f5f;
  --h-color-primary-light:  #3a7575;
  --h-color-primary-dark:   #1e4747;
  --h-color-primary-deep:   #163535;

  --h-color-bg:             #faf9f7;
  --h-color-surface:        #ffffff;
  --h-color-surface-dim:    #f5f4f2;
  --h-color-surface-raised: #fdfcfb;
  --h-color-surface-tint:   #eef2f1;

  --h-color-text:           #2c3338;
  --h-color-text-secondary: #4d5459;
  --h-color-text-muted:     #6b7280;
  --h-color-text-inverse:   #faf9f7;

  --h-color-accent:         #c17f4a;
  --h-color-accent-light:   #d4956a;

  --h-color-success:        #3d6a4b;
  --h-color-warning:        #92690a;
  --h-color-error:          #943538;
  --h-color-info:           #3d5d8c;

  --h-color-border:         #e2e0dc;
  --h-color-border-strong:  #c9c6c0;

  --h-energy-sun:     #b88a2e;
  --h-energy-grid:    #5b6770;
  --h-energy-battery: #3d6a4b;
  --h-energy-heat:    #a85f38;
  --h-energy-water:   #3d5d8c;
  --h-energy-load:    #2a5f5f;
  --h-energy-export:  #7d9a6a;

  --h-phase-l1: #8a6240;
  --h-phase-l2: #3a4044;
  --h-phase-l3: #8b9096;

  --h-space-xs:  0.25rem;
  --h-space-sm:  0.5rem;
  --h-space-md:  1rem;
  --h-space-lg:  1.5rem;
  --h-space-xl:  2rem;
  --h-space-2xl: 3rem;

  --h-font-family: 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --h-font-mono:   'SF Mono', 'Roboto Mono', Consolas, monospace;

  --h-text-xs:   0.75rem;
  --h-text-sm:   0.875rem;
  --h-text-base: 1rem;
  --h-text-lg:   1.125rem;
  --h-text-xl:   1.25rem;
  --h-text-2xl:  1.5rem;
  --h-text-3xl:  1.75rem;
  --h-text-display: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem);
  --h-text-data:    clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

  --h-radius-sm:  4px;
  --h-radius-md:  6px;
  --h-radius-lg:  8px;
  --h-radius-xl:  12px;
  --h-radius-full: 9999px;

  --h-elevation-1: 0 1px 1px rgba(44, 51, 56, 0.04), 0 1px 6px rgba(44, 51, 56, 0.05);
  --h-elevation-2: 0 1px 2px rgba(44, 51, 56, 0.06), 0 4px 14px rgba(44, 51, 56, 0.07);
  --h-elevation-3: 0 2px 4px rgba(44, 51, 56, 0.07), 0 10px 28px rgba(44, 51, 56, 0.10);

  --h-transition-fast:   150ms ease;
  --h-transition-normal: 250ms ease;

  --h-content-width: 1200px;
}