/*
Theme Name:   Voolcano Digital Theme
Theme URI:    https://voolcano.ca
Description:  Voolcano's GeneratePress child theme. Holds the agency fluid root engine and base element styling. Per-client brand tokens (colour, type, spacing) live in theme.json; reusable component styles live as GenerateBlocks Global Styles (gblocks_styles), not in this file. See BUILD-NOTES.md.
Author:       Team Voolcano
Author URI:   https://voolcano.ca
Template:     generatepress
Version:      0.1
*/

:root {
  --max-container: 120rem; /* 1200px content at 10px root */
  --wide-container: 128rem;

  /* BRAND COLOURS (mirror theme.json palette; theme.json is the source of truth) */
  --brand-primary: #111827;   /* near-black charcoal - headings */
  --brand-secondary: #1f2937; /* charcoal */
  --brand-accent: #dc2626;    /* lion red - primary CTA */
  --brand-accent-600: #b91c1c;/* red hover/pressed */
  --brand-navy: #1a365d;      /* body text + links */
  --brand-white: #ffffff;
  --brand-surface: #f9fafb;   /* light section backgrounds */
  --brand-border: #e5e7eb;    /* hairlines, card borders */
  --brand-muted: #6b7280;     /* secondary/meta text */

  /* BORDER (brand radius = 8px = 0.8rem) */
  --radius: 0.8rem;
  --rounded-sm: 0.4rem;
  --rounded: 0.8rem;
  --rounded-md: 1.2rem;
  --rounded-lg: 1.6rem;
  --rounded-xl: 2.4rem;
  --rounded-2xl: 3.2rem;
  --rounded-full: 9999px;

  /* SPACING (4px base unit) */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2rem;
  --space-6: 2.4rem;
  --space-8: 3.2rem;
  --space-10: 4rem;
  --space-12: 4.8rem;
  --space-16: 6.4rem;

  /* SECTION rhythm */
  --section-py: clamp(4rem, 3.125vw + 3rem, 7rem);
  --section-px: clamp(1.6rem, 1.667vw + 1.067rem, 3.2rem);

  /* FLUID TYPE (root = 10px; h1 caps at 60px, h2 at 36px, body 16px).
     The "-c" token holds the clamp(); the consumed token carries a static
     rem fallback used if the clamp token ever fails to resolve. */
  --fs-h1-c: clamp(3.6rem, 1.607vw + 3.086rem, 6rem);
  --fs-h2-c: clamp(2.8rem, 0.714vw + 2.571rem, 3.6rem);
  --fs-h3-c: clamp(2rem, 0.357vw + 1.886rem, 2.4rem);
  --fs-h4-c: clamp(1.8rem, 0.179vw + 1.743rem, 2rem);

  --fs-h1: var(--fs-h1-c, 3.6rem);
  --fs-h2: var(--fs-h2-c, 2.8rem);
  --fs-h3: var(--fs-h3-c, 2rem);
  --fs-h4: var(--fs-h4-c, 1.8rem);
  --fs-lead: 1.8rem;
  --fs-body: 1.6rem;
  --fs-small: 1.4rem;

  --t-snap: cubic-bezier(0.2, 1, 0.2, 1);
  --t-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* TYPEFACE - Poppins for headings + body (loaded via functions.php) */
  --font-body: var(--gp-font--hanken-grotesk);
  --font-headline: var(--gp-font--big-shoulders);
  --ff--heading: var(--font-headline);
  --ff--body: var(--font-body);
  --ff--sub-heading: var(--font-headline);
}

html {
  font-size: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 0.85vw;
  }
}

@media only screen and (min-width: 1441px) {
  html {
    font-size: 0.6945759vw;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--brand-navy);
  background-color: var(--brand-white);
}

p {
  margin-bottom: 2.4rem;
}

h1,
h2,
h3,
h4,
.heading--h1,
.heading--h2,
.heading--h3,
.heading--h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  color: var(--brand-primary);
}

h1, .heading--h1 { font-size: var(--fs-h1); }
h2, .heading--h2 { font-size: var(--fs-h2); }
h3, .heading--h3 { font-size: var(--fs-h3); }
h4, .heading--h4 { font-size: var(--fs-h4); }

a {
  color: var(--brand-navy);
  text-decoration: none;
  transition: color 0.2s var(--t-ease);
}

a:hover,
a:focus {
  color: var(--brand-accent);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/*
  NOTE: component + utility classes (.button-primary, .card, .grid-*, .eyebrow,
  text utilities, etc.) intentionally do NOT live here. They are authored once as
  GenerateBlocks Global Styles (post type `gblocks_styles`) and applied to blocks
  via the block `globalClasses` attribute, so the team can edit them in the GB
  Styles panel and the editor renders them live. See BUILD-NOTES.md → "Use GB
  Global Styles, do not regenerate components in theme files".
*/