/* tokens.css — Design tokens for Stucco Stone Construction
 * Brand colors, typography scale, spacing, and utility values.
 * Edit this file to update colors/fonts site-wide.
 */

:root {
  /* Brand colors */
  --primary:            #c3921c;
  --primaryLight:       #ffba43;
  --secondary:          #ffba43;

  /* Neutral palette */
  --dark:               #082032;
  --medium:             #2c394b;
  --accent:             #334756;
  --sectionBg:          #f7f7f7;

  /* Text */
  --headerColor:        #1a1a1a;
  --bodyTextColor:      #4e4b66;
  --bodyTextColorWhite: #fafbfc;

  /* Typography */
  --headerFont:         'Roboto', Arial, sans-serif;
  --bodyFont:           'Roboto', Arial, sans-serif;
  --bodyFontSize:       1rem;
  --topperFontSize:     clamp(0.75rem, 1.3vw, 0.875rem);
  --headerFontSize:     clamp(1.875rem, 3.5vw, 3rem);

  /* Spacing */
  --sectionPadding:     clamp(3.75rem, 7vw, 6.25rem) 1rem;

  /* Layout */
  --containerMax:       80rem;
  --containerSm:        34.375rem;

  /* Shape */
  --radius-sm:          0.25rem;
  --radius-md:          0.5rem;
  --radius-lg:          1rem;
  --radius-xl:          1.5rem;

  /* Motion */
  --transition:         0.3s ease;

  /* Shadows */
  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:          0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.18);
}

/* Dark mode — swaps surface and background tokens */
body.dark-mode {
  --sectionBg: var(--medium);
  background-color: var(--dark);
}