/* ==========================================================================
 * WattWisely design tokens
 *
 * GENERATED FROM config.json — DO NOT EDIT BY HAND.
 * Change a value in config.json, then run: php tools/build-tokens.php
 * ========================================================================== */

@layer tokens {
:root {

  /* Semantic colour */
  --ww-primary: #0E7490;
  --ww-primary-hover: #0B5C73;
  --ww-primary-bright: #27C0D8;
  --ww-accent: #00BC7D;
  --ww-accent-deep: #047857;
  --ww-ink: #0F1417;
  --ww-ink-soft: #1A2327;
  --ww-body: #3B474C;
  --ww-muted: #5C6B70;
  --ww-border: #E3EBED;
  --ww-border-input: #74848A;
  --ww-surface: #F2FAFC;
  --ww-white: #FFFFFF;
  --ww-focus: #0891B2;
  --ww-success: #047857;
  --ww-warning: #EDA100;
  --ww-error: #DE3437;
  --ww-info: #0E7490;

  /* Colour ramps */
  --ww-teal-50: #ECFAFD;
  --ww-teal-100: #CFF3F9;
  --ww-teal-200: #A5E8F3;
  --ww-teal-300: #5FD3E6;
  --ww-teal-400: #27C0D8;
  --ww-teal-500: #119FBA;
  --ww-teal-600: #0F8AAB;
  --ww-teal-700: #0E7490;
  --ww-teal-800: #0B5C73;
  --ww-teal-900: #083F50;
  --ww-green-50: #E6FAF2;
  --ww-green-100: #C3F3DF;
  --ww-green-200: #8FE8C3;
  --ww-green-300: #4FD9A3;
  --ww-green-400: #00BC7D;
  --ww-green-500: #00A36B;
  --ww-green-600: #047857;
  --ww-green-700: #065F46;
  --ww-amber-50: #FFF6E5;
  --ww-amber-100: #FFE7B8;
  --ww-amber-200: #FFD483;
  --ww-amber-300: #FFC14E;
  --ww-amber-400: #EDA100;
  --ww-amber-500: #C98800;
  --ww-amber-600: #9E6B00;
  --ww-amber-700: #7A5200;

  /* Gradients */
  --ww-gradient-mark: linear-gradient(135deg, #0E7490 0%, #27C0D8 55%, #7CE05C 100%);

  /* Typography */
  --ww-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ww-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  --ww-weight-normal: 400;
  --ww-weight-medium: 500;
  --ww-weight-semibold: 600;
  --ww-weight-bold: 700;
  --ww-step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem);
  --ww-step-0: clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem);
  --ww-step-1: clamp(1.20rem, 1.12rem + 0.39vw, 1.41rem);
  --ww-step-2: clamp(1.44rem, 1.32rem + 0.61vw, 1.76rem);
  --ww-step-3: clamp(1.73rem, 1.54rem + 0.92vw, 2.20rem);
  --ww-step-4: clamp(2.07rem, 1.80rem + 1.37vw, 2.75rem);
  --ww-step-5: clamp(2.49rem, 2.09rem + 2.00vw, 3.43rem);
  --ww-step-6: clamp(2.99rem, 2.41rem + 2.88vw, 4.29rem);
  --ww-leading-tight: 1.15;
  --ww-leading-snug: 1.35;
  --ww-leading-normal: 1.6;
  --ww-measure: 68ch;

  /* Spacing and measure */
  --ww-space-1: 0.25rem;
  --ww-space-2: 0.5rem;
  --ww-space-3: 0.75rem;
  --ww-space-4: 1rem;
  --ww-space-5: 1.5rem;
  --ww-space-6: 2rem;
  --ww-space-7: 2.5rem;
  --ww-space-8: 3rem;
  --ww-space-9: 4rem;
  --ww-space-10: 5rem;
  --ww-space-11: 6rem;
  --ww-space-12: 8rem;
  --ww-gutter: clamp(1rem, 4vw, 2rem);
  --ww-container: 1320px;
  --ww-container-narrow: 760px;
  --ww-section-y: clamp(3rem, 8vw, 7rem);

  /* Radius */
  --ww-radius-sm: 6px;
  --ww-radius-md: 10px;
  --ww-radius-lg: 16px;
  --ww-radius-xl: 24px;
  --ww-radius-full: 999px;

  /* Shadow */
  --ww-shadow-sm: 0 1px 2px rgba(10, 31, 28, 0.06);
  --ww-shadow-md: 0 4px 16px rgba(10, 31, 28, 0.08);
  --ww-shadow-lg: 0 12px 40px rgba(10, 31, 28, 0.12);

  /* Motion */
  --ww-motion-fast: 120ms;
  --ww-motion-base: 200ms;
  --ww-motion-slow: 360ms;
  --ww-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ww-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* Breakpoints (literal values — @media cannot read custom properties):
 *   sm  480px
 *   md  768px
 *   lg  1024px
 *   xl  1280px
 */
}