/* SolarPrograms.com : Design Tokens
   One canonical :root block. No hardcoded hex anywhere else.
   Text on dark: --ivory (never pure white).
   Primary accent: --accent (forest green, sustainability + trust).
   Sun accent: --sun (amber, used only for the logo sunburst icon).
   Updated by editing this file only.
*/

:root {
  /* === COLOUR === */
  --ink:         #16201b;       /* headings: near-black, faint green cast (16.9:1) */
  --ink-2:       #222c26;       /* body text (14.6:1): solid, never grey */
  --ink-3:       #3b4640;       /* captions, labels (10.1:1) */
  --ivory:       var(--on-volt);       /* text on dark surfaces */
  --ivory-2:     var(--on-volt);       /* kept as an alias: all text on dark is one ivory (M 2026-10-19) */
  --ink-warn:    #7a3f06;       /* warning text (8.3:1) */
  --ink-danger:  #9a2416;       /* error/expired text (8.0:1) */
  --bg:          #ffffff;       /* page background */
  --bg-2:        #eefaf3;       /* mint rhythm band */
  --bg-dark:     var(--volt);       /* the one green surface: footer, panels (ivory on it 5.0:1) */
  --bg-dark-2:   color-mix(in srgb, var(--volt) 55%, var(--bg));       /* card on the green surface */
  --bg-dark-3:   var(--volt);       /* footer: same green */
  --accent:      #007a38;       /* vivid green for text and surfaces on light (ivory on it 5.0:1, on white 5.4:1) */
  --accent-mid:  #1fbf67;       /* bright green, decoration only */
  --accent-deep: #00632d;       /* deep green */
  --accent-dim:  #005a28;       /* green text on pale tints */
  --accent-pale: #dcf7e8;       /* pale green tint */
  --sun:         #e8900a;       /* solar amber: logo sunburst only */
  --sun-pale:    #fdf2de;       /* sun tint if needed */
  --line:        #cfe9da;       /* hairlines */
  --line-dark:   color-mix(in srgb, var(--on-volt) 28%, var(--volt));       /* hairlines on green */
  --focus:       #007a38;       /* 3px focus ring */
  --danger:      #c0392b;       /* error states */
  --success:     #007a38;       /* success states */

  --line-ink:    #c9d3cd;       /* light hairline between ruled rows */
  --volt:        #2cf08a;       /* electric green: button and highlight fills, always with ink text (ink on it 11:1) */
  --on-volt:     #04120a;       /* text on volt */

  /* === TYPOGRAPHY === */
  --font-sans: "Satoshi", "Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace,
               "Courier New", monospace;

  /* Type scale: fluid between 390px and 1280px */
  --step--1: clamp(0.75rem,  0.70rem + 0.27vw, 0.875rem);
  --step-0:  clamp(0.9375rem, 0.88rem + 0.31vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.02rem + 0.54vw, 1.375rem);
  --step-2:  clamp(1.35rem,  1.19rem + 0.84vw, 1.75rem);
  --step-3:  clamp(1.62rem,  1.36rem + 1.3vw, 2.25rem);
  --step-4:  clamp(1.95rem,  1.56rem + 2.0vw, 2.875rem);
  --step-5:  clamp(2.34rem,  1.76rem + 2.9vw, 3.625rem);
  --step-6:  clamp(2.6rem,   1.55rem + 4.9vw, 5.25rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --tracking-tight: -0.025em;
  --tracking-snug:  -0.015em;
  --tracking-wide:  0.06em;
  --tracking-wider: 0.1em;

  /* === SPACING (8px base grid) === */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px */

  /* === LAYOUT === */
  --maxw:        1140px;
  --gutter:      clamp(1rem, 4vw, 2rem);
  --header-h:    60px;

  /* === RADII === */
  --r-sm:   8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-full: 999px;

  /* === SHADOWS === */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);

  /* === MOTION === */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0);

  --dur-micro: 160ms;
  --dur-state: 280ms;
  --dur-enter: 520ms;

  /* === Z-INDEX === */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-header:  300;
  --z-toast:   400;
}