/* ============================================================================
 * Valley Solar — Colors & Type
 * ----------------------------------------------------------------------------
 * Single source of truth for color + type tokens used in design artifacts.
 * Mirrors the production WordPress theme tokens, simplified for HTML mocks.
 * Reference: reference/design_system.md
 * ========================================================================== */

/* Fonts. Outfit is the primary face. Shadows Into Light Two and Satisfy are
 * the decorative faces. All three are bundled locally in `fonts/`. */
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shadows Into Light Two";
  src: url("fonts/ShadowsIntoLightTwo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satisfy";
  src: url("fonts/Satisfy-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand primitives ---------------------------------------------------- */
  --vs-orange: #fab221;            /* primary brand orange — CTAs, accent */
  --vs-orange-light: #ffebc2;      /* hover / disabled tint */
  --vs-orange-dark: #eba71f;       /* active / pressed */
  --vs-orange-extra-dark: #594212; /* deep accent for borders + text on light */

  --vs-orange-100: #fff4db;
  --vs-orange-200: #ffe7b3;
  --vs-orange-300: #ffd27a;
  --vs-orange-400: #fab221;
  --vs-orange-500: #e89a14;
  --vs-orange-600: #c87400;
  --vs-orange-700: #9f5e00;
  --vs-orange-800: #6f4100;

  --vs-navy: #11203d;              /* primary brand navy — emphasis */
  --vs-dark-blue: #060e1f;         /* near-black navy — dark surfaces */
  --vs-sky: #dce5f7;               /* soft blue-gray — gradient ends */
  --vs-sky-light: #f2f4f7;         /* very light blue-gray — flat cards */
  --vs-sun-yellow: #fdc700;        /* warm sun yellow */

  /* SunAlert product accent */
  --sunalert-yellow: #ffe53b;
  --sunalert-navy: #11203d;
  --sunalert-dark-navy: #060e1f;

  /* Brand neutrals */
  --brand-black: #1a1918;
  --brand-black-light: #2e2d2c;
  --brand-black-dark: #0a0a0a;
  --brand-white: #ffffff;
  --brand-gray-light: #e9edf2;

  /* --- Semantic roles (light theme default) ------------------------------- */
  --fg-1: var(--brand-black);              /* primary text */
  --fg-2: var(--brand-black-light);        /* muted/secondary text */
  --fg-inverse: var(--brand-white);        /* text on dark fills */
  --fg-accent: var(--vs-orange);           /* accent text */
  --fg-link: var(--brand-black);           /* link color light theme */

  --bg-default: var(--brand-white);        /* canvas */
  --bg-alt: var(--brand-gray-light);       /* alternate section */
  --bg-emphasis: var(--vs-navy);           /* dark contrast section */
  --bg-inverse: var(--brand-black);        /* near-black panel */
  --bg-card-flat: var(--vs-sky-light);     /* surface-0 */

  --border-subtle: rgba(10, 10, 10, 0.12);
  --border-default: rgba(10, 10, 10, 0.20);
  --border-strong: rgba(10, 10, 10, 0.25);

  /* --- Gradients ---------------------------------------------------------- */
  --gradient-primary: linear-gradient(to bottom, rgba(255,255,255,0.88) 0%, rgba(220,229,247,0.72) 100%); /* @kind color */
  --gradient-highlight: linear-gradient(to right, #fab221 0%, #ffe53b 100%); /* @kind color */
  --gradient-sunalert: radial-gradient(circle at top center, rgba(255,229,59,0.25) 0%, rgba(255,229,59,0.10) 40%, #11203d 100%); /* @kind color */
  --gradient-surface-0: linear-gradient(to bottom, rgba(242,244,247,1) 0%, rgba(242,244,247,1) 100%);
  --gradient-surface-1: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(220,229,247,0.30) 100%);
  --gradient-surface-2: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(220,229,247,0.80) 100%);
  --gradient-glass: linear-gradient(to bottom, rgba(255,255,255,0.88) 0%, rgba(220,229,247,0.72) 100%); /* @kind color */

  /* --- Shadows ------------------------------------------------------------ */
  --shadow-container: 0 0 8px rgba(10, 10, 10, 0.12);
  --shadow-image: 0 5px 20px rgba(10, 10, 10, 0.12);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-cta: 0 4px 16px rgba(10, 10, 10, 0.12);
  --shadow-button: 0 2px 6px rgba(0,0,0,0.18);
  --shadow-button-hover: 0 4px 10px rgba(0,0,0,0.22);

  /* --- Radii -------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;
  --radius-card: 24px;

  /* --- Spacing (px on a 4px base grid) ----------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Semantic spacing — desktop values */
  --space-block-xs: 8px;
  --space-block-sm: 24px;
  --space-block-md: 40px;
  --space-block-lg: 64px;
  --space-block-xl: 96px;
  --space-section-xs: 32px;
  --space-section-sm: 48px;
  --space-section-md: 80px;
  --space-section-lg: 128px;

  /* Button padding */
  --space-btn-sm: 8px 16px;
  --space-btn-md: 16px 32px;
  --space-btn-lg: 48px 64px;

  /* --- Type families ----------------------------------------------------- */
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-decorative: "Shadows Into Light Two", "Outfit", cursive; /* primary decorative — stats, step numbers */
  --font-alt: "Satisfy", "Shadows Into Light Two", cursive;       /* secondary decorative — rare accent script */

  /* --- Type scale (rem; Outfit at 16px base) ----------------------------- */
  --text-display-lg: 4.86rem;  /* 78px */
  --text-display-base: 4.21rem;/* 67px */
  --text-display-sm: 3.65rem;  /* 58px */
  --text-heading-2xl: 3.16rem; /* 51px */
  --text-heading-xl: 2.73rem;  /* 44px — h1 desktop */
  --text-heading-lg: 2.37rem;  /* 38px — h2 desktop */
  --text-heading-base: 2.05rem;/* 33px — h3 desktop */
  --text-heading-sm: 1.78rem;  /* 28px — h4 */
  --text-heading-xs: 1.54rem;  /* 25px */
  --text-heading-2xs: 1.33rem; /* 21px */
  --text-heading-3xs: 1.15rem; /* 18px */
  --text-body-2xl: 1.602rem;   /* 26px */
  --text-body-xl: 1.424rem;    /* 23px */
  --text-body-lg: 1.266rem;    /* 20px — lead */
  --text-body-base: 1.125rem;  /* 18px — default body */
  --text-body-sm: 1rem;        /* 16px */
  --text-body-xs: 0.889rem;    /* 14px — eyebrow */
  --text-body-2xs: 0.75rem;    /* 12px — caption */

  /* Weights — Valley Solar leans LIGHT for display, BOLD for accents */
  --weight-thin: 100;
  --weight-extra-light: 200;   /* h1, h2 (signature voice) */
  --weight-light: 300;         /* body text, lead */
  --weight-normal: 400;
  --weight-medium: 500;        /* h3 */
  --weight-semibold: 600;      /* eyebrows, CTAs in some cases */
  --weight-bold: 700;          /* h4 */

  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.8;

  --tracking-tighter: -0.05em; /* h1 */
  --tracking-tight: -0.025em;  /* h2, h3, h4 */
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;    /* eyebrow */
  --tracking-widest: 0.10em;
}

/* Dark theme override — flip canvas to near-black + lift fg to white */
:root[data-theme="dark"],
.dark {
  --fg-1: var(--brand-white);
  --fg-2: var(--brand-gray-light);
  --fg-link: var(--brand-white);
  --fg-inverse: var(--brand-black);
  --bg-default: var(--brand-black);
  --bg-alt: var(--vs-dark-blue);
  --bg-card-flat: #0d1a32;
  --border-subtle: rgba(250, 178, 33, 0.10);
  --border-default: rgba(250, 178, 33, 0.20);
  --gradient-primary: linear-gradient(to bottom, rgba(17,32,61,1) 0%, rgba(6,14,31,1) 100%); /* @kind color */
}

/* --- Type role classes ---------------------------------------------------- */

.vs-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-extra-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}
.vs-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-heading-lg);
  font-weight: var(--weight-extra-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.vs-h2-small,
.vs-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-body-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.vs-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-heading-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.vs-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
}
.vs-lead {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
}
.vs-body {
  font-family: var(--font-body);
  font-size: var(--text-body-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
}
.vs-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
}
.vs-caption {
  font-family: var(--font-body);
  font-size: var(--text-body-2xs);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
}
.vs-decorative {
  font-family: var(--font-decorative);
  font-weight: var(--weight-normal);
}