/* Bollant Industries — Brand System v3.0 digital tokens.
   Single source: mirrored 1:1 in the Brand Guidelines v3.0 design system (tokens.json).
   Brand constants never change; semantic tokens change between the Paper (light) and Forest (dark) surfaces. */
:root {
  /* brand constants */
  /* v3.9: every colour comes from the Bollant logo ring and wordmark */
  --forest: #1D5440;        /* Primary: deepened logo green. Authority surfaces, primary buttons, headings on paper (white on it 8.8:1). */
  --forest-deep: #123829;   /* Deepest ground: hero shade, footer band. */
  --forest-700: #246C48;    /* Logo deep green. Hover state of forest surfaces. */
  --teal: #189C9C;          /* Logo teal. Accent marks: active indicators, rules, annotations. Not for small text. */
  --teal-ink: #0B6E6E;      /* Teal as text on paper/white (5.5:1). */
  --leaf: #48A848;          /* Logo leaf green. Illustration fills, data, highlights. */
  --lime: #D8D824;          /* Logo lime. Accent and focus on forest (5.8:1); highlights. Never text on paper. */
  --yellow-green: #90C03C;  /* Logo yellow-green. Illustration fills only. */
  --mineral: #2F7A6F;       /* Secondary: teal-green for diagrams, data, rules. Large text (24px+) on paper (4.6:1). */
  --mineral-tint: #D9EBE5;  /* Diagram fills, selected rows. */
  --paper: #F5F3EC;         /* Editorial ground. */
  --paper-deep: #E9ECE2;    /* Alternate band on paper pages. */
  --graphite: #2B3A33;      /* Logo wordmark, darkened for body text. Technical bands; footer. */
  --graphite-muted: #56645D;/* Secondary text on paper and white. */
  /* legacy names kept so older rules follow the logo palette */
  --copper: var(--teal);
  --copper-ink: var(--teal-ink);
  --copper-light: var(--lime);
  --white: #FFFFFF;

  /* semantic: paper surface (default) */
  --bg: var(--paper);
  --bg-alt: var(--paper-deep);
  --bg-raised: var(--white);
  --fg: var(--graphite);
  --fg-muted: var(--graphite-muted);
  --fg-strong: var(--forest);
  --accent: var(--copper);
  --accent-ink: var(--copper-ink);
  --rule: rgba(41, 45, 43, .16);
  --rule-strong: rgba(41, 45, 43, .42);
  --focus: var(--copper-ink);

  /* type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-display: clamp(2.75rem, 1.55rem + 4.3vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 1.45rem + 2.9vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.12rem + .5vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-body-lg: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-caption: .8125rem;
  --fs-eyebrow: .75rem;
  --fs-tech: .6875rem;
  --fs-button: .9375rem;

  /* space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(4.5rem, 2.8rem + 6vw, 9rem);
  --gutter: clamp(1rem, .4rem + 3vw, 3rem);
  --container: 1320px;
  --container-narrow: 880px;
  --measure: 66ch;

  /* shape */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --shadow-menu: 0 28px 56px -28px rgba(15, 42, 30, .45);
  --shadow-raise: 0 1px 0 rgba(41, 45, 43, .08), 0 12px 32px -20px rgba(15, 42, 30, .35);

  /* motion */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 640ms; --dur-4: 1100ms;

  /* layers */
  --z-base: 1; --z-sticky: 20; --z-header: 50; --z-menu: 60; --z-overlay: 80; --z-skip: 100;
}

/* Forest surface: apply .on-forest to any band; the same components re-colour. */
.on-forest {
  --bg: var(--forest);
  --bg-alt: var(--forest-deep);
  --bg-raised: var(--forest-700);
  --fg: var(--paper);
  --fg-muted: #B9C4BC;
  --fg-strong: var(--paper);
  --accent: var(--copper-light);
  --accent-ink: var(--copper-light);
  --rule: rgba(245, 243, 236, .16);
  --rule-strong: rgba(245, 243, 236, .42);
  --focus: var(--copper-light);
}
/* Graphite surface: technical and engineering bands, footer. */
.on-graphite {
  --bg: var(--graphite);
  --bg-alt: #222624;
  --bg-raised: #343937;
  --fg: var(--paper);
  --fg-muted: #A9B0AB;
  --fg-strong: var(--paper);
  --accent: var(--copper-light);
  --accent-ink: var(--copper-light);
  --rule: rgba(245, 243, 236, .14);
  --rule-strong: rgba(245, 243, 236, .4);
  --focus: var(--copper-light);
}