/* ============================================================
   BIRCH DESIGN SYSTEM — CSS TOKENS
   Source: Figma "Birch website styleguide" (1tkZCzPxmdkHToeE32cUIz)
   Base: 1rem = 16px (browser default). The live site pages also load
   fluid-root.css, which scales the root like Webflow; dev pages do not.
   Font: TT Commons Pro Variable (Inter Bold as fallback)
   ============================================================ */

/* ============ FONT FACE ============ */
@font-face {
  font-family: "TT Commons Pro Variable";
  src: url("../fonts/TT_Commons_Pro_Variable.woff2") format("woff2-variations"),
       url("../fonts/TT_Commons_Pro_Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============ TOKENS ============ */
:root {

  /* ---- Font ---- */
  --font: "TT Commons Pro Variable", "Inter", Arial, sans-serif;

  /* ---- Colors: Primary ---- */
  --color-primary: #FFE243;  /* Figma: Primary */

  /* ---- Colors: Accent ---- */
  --color-accent-red:        #FF4747;  /* Figma: Accent/Red */
  --color-accent-green:      #04DE00;  /* Figma: Accent/Green */
  --color-accent-pink:       #FF21A6;  /* Figma: Accent/Pink */
  --color-accent-blue:       #1877F2;  /* Figma: Accent/Blue */
  --color-accent-light-blue: #59DBFF;  /* Figma: Accent/Light Blue */
  --color-accent-orange:     #FF7700;  /* Figma: Accent/Orange */
  --color-accent-purple:     #5B45CD;  /* Figma: Accent/Purple */
  --color-accent-indigo:     #4450F2;  /* Figma: Accent/Indigo */

  /* ---- Colors: Background ---- */
  --color-bg:       #0D0D12;   /* Figma: Background/Black */
  --color-bg-grey:  #2A2A2A;   /* Figma: Background/Grey */
  --color-bg-cta-grey: #3F3F3F; /* Figma: Background/CTA Grey — control on a dark grey card (bg-grey would merge with it) */
  --color-bg-white: #FFFFFF;   /* Figma: Background/White */

  /* ---- Colors: Surface (light greys for cards/chips on light pages) ---- */
  --color-surface:       #F1F0F7;  /* Figma: Background/Grey (Surface) · Background/Grey (surface) — card / tab / product-card fill */
  --color-surface-muted: #DBDAE2;  /* Figma: Background/Grey (Surface muted) · Background/Grey-muted (surface-muted) — chips on a surface */

  /* ---- Glass (menu pill and panel, legal edition dropdown) ---- */
  /* Fill = Figma Glass/Light | Glass/Dark, blur = effect style Glass/Blur.
     saturate()/brightness() exist only in CSS — Figma shows the glass slightly brighter.
     Blur stays in px on purpose: it matches the live site (30px) and should not grow with the fluid root. */
  --color-glass-light: rgba(211, 209, 224, 0.4);  /* Figma: Glass/Light */
  --color-glass-dark:  rgba(63, 63, 63, 0.6);  /* Figma: Glass/Dark */
  --glass-blur: 30px;
  --glass-filter-light: blur(var(--glass-blur)) saturate(0.8);
  --glass-filter-dark:  blur(var(--glass-blur)) saturate(0.8) brightness(1.15);

  /* ---- Colors: Border ---- */
  /* Translucent white so a stroke stays "a touch lighter" on any dark fill */
  --color-border-subtle: rgba(255, 255, 255, 0.14);  /* Figma: Various/Border subtle */
  /* Various/Border hairline — translucent black stroke for light surfaces */
  --color-border-hairline: #0D0D0D1F;  /* Figma: Various/Border hairline */

  /* ---- Colors: Text ---- */
  --color-text:          #FFFFFF;  /* Figma: Text/Base */
  --color-text-inverted: #000000;  /* Figma: Text/Inverted */
  --color-text-grey:     #909090;  /* Figma: Text/Grey — secondary text on dark backgrounds (6.1:1 on Background/Black) */
  --color-text-grey-inverted: #6B6B6B; /* Figma: Text/Grey (Inverted) · candidate (02.10.2026), not in the Figma library yet: secondary text on light
                                          backgrounds — Text/Grey there fails WCAG AA (3.2 on white, 2.8 on Surface);
                                          this one gives 5.3 on white and 4.7 on Surface */

  /* ---- Typography: Desktop scale ---- */
  /* All weights are 700 (Bold) per Figma spec */
  --text-display-size: 5rem;     /* 80px  */
  --text-display-lh:   0.92;
  --text-display-ls:  -0.02em;

  --text-h1-size: 6rem;          /* 96px  */
  --text-h1-lh:   1.0;
  --text-h1-ls:  -0.02em;

  --text-h2-size: 3.25rem;       /* 52px  */
  --text-h2-lh:   1.1;
  --text-h2-ls:  -0.02em;

  --text-h3-size: 2rem;          /* 32px  */
  --text-h3-lh:   1.0;
  --text-h3-ls:  -0.02em;

  --text-h4-size: 1.5rem;        /* 24px  */
  --text-h4-lh:   1;
  --text-h4-ls:   0em;

  --text-h5-size: 1.2rem;        /* 19.2px */
  --text-h5-lh:   1.2;           /* Birch/H5 in the Figma library is 1.2, not 1.4 */
  --text-h5-ls:   0em;

  --text-h6-size: 1rem;          /* 16px  */
  --text-h6-lh:   1.4;
  --text-h6-ls:   0em;

  --text-para-xl-size: 1.5rem;   /* 24px  */
  --text-para-xl-lh:   1.1;
  --text-para-xl-ls:   0em;

  --text-para-lg-size: 1.25rem;  /* 20px  */
  --text-para-lg-lh:   1.1;
  --text-para-lg-ls:   0em;

  --text-body-size: 0.9rem;      /* 14.4px */
  --text-body-lh:   1.2;
  --text-body-ls:   0em;

  --text-para-sm-size: 0.875rem; /* 14px  */
  --text-para-sm-lh:   1.3;
  --text-para-sm-ls:   0em;

  --text-eyebrow-size: 0.8rem;   /* 12.8px */
  --text-eyebrow-lh:   1.2;
  --text-eyebrow-ls:   0.10em;

  --text-btn-size: 1.5rem;       /* 24px  */
  --text-btn-lh:   1.0;
  --text-btn-ls:  -0.02em;

  --text-btn-xs-size: 0.9rem;    /* 14.4px — in-card buttons */

  /* ---- Typography: Pill/chip text (word-pill hero compositions, e.g. ai-promo, manage) ---- */
  /* Fluid: scales with viewport, plateaus at 52px once the 1280px design width is reached */
  --text-pill-size: clamp(1.625rem, 4.0625vw, 3.25rem); /* 52px @ 1280 */
  --text-pill-lh:   1.1;
  --text-pill-ls:  -0.02em;

  /* Mobile counterpart — 30px (design base) at the 320px narrowest phone, scaling
     continuously (no plateau anywhere in range) up to ~72px at the 767px ceiling */
  --text-pill-size-mobile: clamp(1.875rem, 9.375vw, 4.4941rem); /* 30px @ 320 → ~72px @ 767 */

  /* ---- Spacing — mirrors Figma "Spacing/*" variables ---- */
  --space-xxs: 0.25rem;  /* Figma: Spacing/Spacing XXS · 4px — Spacing XXS */
  --space-xs:  0.5rem;   /* Figma: Spacing/Spacing XS · 8px — Spacing XS */
  --space-sm:  1rem;     /* Figma: Spacing/Spacing SM · 16px — Spacing SM */
  --space:     1.5rem;   /* Figma: Spacing/Spacing · 24px — Spacing */
  --space-md:  2rem;     /* Figma: Spacing/Spacing MD · 32px — Spacing MD */
  --space-lg:  3rem;     /* Figma: Spacing/Spacing LG · 48px — Spacing L */
  --space-xl:  5rem;     /* Figma: Spacing/Spacing XL · 80px — Spacing XL */
  --space-2xl: 7.5rem;   /* Figma: Spacing/Spacing 2XL · 120px — candidate (02.10.2026): the section rhythm, ≈ live bir.ch's ~130 at 1440; not in the Figma library yet */

  /* ---- Gaps (column / flex gaps) ---- */
  --gap-sm:   0.5rem;   /* Figma: Grid/Gap SM · 8px */
  --gap-main: 1rem;     /* Figma: Grid/Gap Main · 16px */
  --gap-md:   1.5rem;   /* Figma: Grid/Gap MD · 24px */

  /* ---- Container max-widths ---- */
  --container-lg: 100rem;  /* Figma: Layout/Container Large · 1600px */
  --container-md:  80rem;  /* Figma: Layout/Container Medium · 1280px */
  --container-sm:  64rem;  /* Figma: Layout/Container Small · 1024px */

  /* ---- Padding: responsive tokens (desktop defaults) ---- */
  --pad-section:    1rem;   /* Figma: Layout/Padding/Section · 16px — same across all breakpoints */
  --pad-horizontal: 1.5rem; /* Figma: Layout/Padding/Horizontal · 24px desktop */
  --pad-card:       1.5rem; /* Figma: Layout/Padding/Card · 24px — same across all breakpoints (fixed: the home slider's height math uses it) */
  --pad-card-fluid: var(--space-md); /* Figma: Layout/Padding/Card fluid · 32px desktop → 24px phones: the inside of a card (docs/layout-rules.md), switched here once */
  /* Panel (a fill holding a whole section block, surface.css): section air on top and bottom, the card padding at the
     sides; on phones the bottom closes with the side padding (decisions 02.10.2026). */
  /* Panels keep their own 80 inside: air reads larger on a fill, 120 made them tall and empty (decision 02.10.2026). */
  --panel-pad-top:    var(--space-xl);  /* Figma: Layout/Padding/Panel */
  --panel-pad-bottom: var(--space-xl);  /* Figma: Layout/Padding/Panel */
  --pad-gutter:     1.5rem; /* Figma: Layout/Container/Gutter · 24px desktop */

  /* ---- Section rhythm ----
     Vertical space around every page section (.section in page.css): change it here and
     the whole site follows; a page can override it on its own root. Our own token
     (02.10.2026), not yet in the Figma library — candidate on the "Site components"
     page in Website-2026. */
  --section-space: var(--space-2xl); /* Figma: Spacing/Section · 120px (trial 02.10.2026; was space-xl 80) */
  /* The rhythm inside a section, one step below --section-space: heading → content, text → media, card ↔ card,
     step ↔ step (decision 02.10.2026). Desktop 48, phones 32. */
  --block-gap: var(--space-lg);  /* Figma: Spacing/Block gap */

  /* ---- Border widths (02.10.2026) ---- */
  --border-thin:  0.125rem; /* Figma: Border/Thin · 2px — chips, outlines */
  --border-thick: 0.25rem;  /* Figma: Border/Thick · 4px — hover frames, the dotted stroke button */

  /* Motion by role (05.10.2026, tuned by Liliya in the review tool's Motion panel on the case-card zoom).
     Hover: a quick start that settles softly. Components read these through their own --motion-* variables,
     so the Motion panel can still tune one component without touching the rest. */
  --duration-hover: 0.4s;  /* Figma: Motion/Hover duration */
  --ease-hover: cubic-bezier(0.11, 1.02, 0.68, 1);  /* Figma: Motion/Hover ease */

  /* ---- Button sizes ----
     Height is the only size knob: padding-inline and border-width are
     derived from it in button.css (0.48h / 0.05h), calibrated so that
     .btn-s keeps its current 48 / 5 rendering. Adding a size means
     adding a height here and nothing else. */
  --btn-h-xs: 3.375rem; /* Figma: Button/Height XS · 54px — inside cards, in a text row; = a chip's height at every width (05.10.2026; the Figma library still says 40) */
  --btn-h-s:  6.25rem;  /* Figma: Button/Height S · 100px — page CTA */
  --btn-h-m:  8.75rem;  /* Figma: Button/Height M · 140px */
  --btn-h-l:  10rem;    /* Figma: Button/Height L · 160px — hero */
  --btn-h-cta: 5.625rem; /* Figma: Button/Height CTA · 90px (05.10.2026, was 87 from the live home Intro — rounder; phones keep 80) — Size=CTA: the Intro-block button of the live home page, Hub, Stage (decided 02.10.2026) */

  /* ---- Border radius ---- */
  --radius-xs:   0.25rem;  /* Figma: Radius/Radius 4 · 4px */
  --radius-sm:   0.5rem;   /* Figma: Radius/Radius 8 · 8px */
  --radius-md:   0.75rem;  /* Figma: Radius/Radius 12 · 12px */
  --radius-lg:   1rem;     /* Figma: Radius/Radius 16 · 16px */
  --radius-xl:   1.5rem;   /* Figma: Radius/Radius 24 · 24px */
  --radius-2xl:  3.75rem;  /* Figma: Radius/Radius 60 · 60px */
  --radius-pill: 9999px;

  /* ---- Grid ---- */
  --grid-cols: 12;
  --grid-gap:  var(--gap-main);  /* Figma: Grid/Grid gap · 16px column gap */
}

/* ============ BREAKPOINT OVERRIDES ============ */

/* Large: 992–1279px */
@media (max-width: 1279px) {
  :root {
    --pad-horizontal: 1.25rem; /* 20px */
  }
}

/* Tablet: 768–991px */
@media (max-width: 991px) {
  :root {
    --pad-horizontal: 1rem; /* 16px */
    --pad-gutter:     1rem; /* 16px */
    --grid-gap:       1rem; /* 16px */
  }
}

/* Mobile: ≤767px */
@media (max-width: 767px) {
  :root {
    /* Phones only — the new site's rhythm (02.10.2026); tablets keep the desktop values. */
    --section-space:  var(--space-lg); /* 48px */
    --block-gap:      var(--space);    /* 24px — half the section gap, as on desktop (02.10.2026) */
    --pad-card-fluid: var(--space);    /* 24px */
    --panel-pad-top:    var(--space-md); /* 32px — top and bottom equal on phones too (05.10.2026: 48/24 read as too much air on top) */
    --panel-pad-bottom: var(--space-md); /* 32px */
    --btn-h-cta: 5rem;                 /* 80px — CTA on phones (decided 02.10.2026 after trying 60 and 70; = library size 80) */
    --pad-horizontal: 1rem; /* 16px */
    --pad-gutter:     1rem; /* 16px */
    --grid-gap:       1rem; /* 16px */

    /* Mobile type scale */
    --text-display-size: 2.375rem; /* 38px  */
    --text-display-lh:   0.92;

    --text-h1-size:      2.8rem;   /* 44.8px */
    --text-h1-lh:        1.0;

    --text-h2-size:      2rem;     /* 32px */
    --text-h2-lh:        1.1;

    --text-h3-size:      1.5rem;   /* 24px */
    --text-h3-lh:        1.0;

    --text-para-xl-size: 1.2rem;   /* 19.2px */
    --text-para-xl-lh:   1.1;

    --text-para-lg-size: 1.1rem;   /* 17.6px */
    --text-para-lg-lh:   1.1;
  }
}

/* ============ BASE RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; }

/* ============ TYPOGRAPHY UTILITY CLASSES ============ */
.t-display {
  font-family: var(--font);
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  font-weight: 600;
}
.t-h1 {
  font-family: var(--font);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  font-weight: 600;
}
.t-h2 {
  font-family: var(--font);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  font-weight: 600;
}
.t-h3 {
  font-family: var(--font);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 600;
}
.t-h4 {
  font-family: var(--font);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 600;
}
.t-h5 {
  font-family: var(--font);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  letter-spacing: var(--text-h5-ls);
  font-weight: 600;
}
.t-h6 {
  font-family: var(--font);
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-lh);
  letter-spacing: var(--text-h6-ls);
  font-weight: 600;
}
.t-para-xl {
  font-family: var(--font);
  font-size: var(--text-para-xl-size);
  line-height: var(--text-para-xl-lh);
  letter-spacing: var(--text-para-xl-ls);
  font-weight: 600;
}
.t-para-lg {
  font-family: var(--font);
  font-size: var(--text-para-lg-size);
  line-height: var(--text-para-lg-lh);
  letter-spacing: var(--text-para-lg-ls);
  font-weight: 600;
}
.t-body {
  font-family: var(--font);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  font-weight: 600;
}
.t-para-sm {
  font-family: var(--font);
  font-size: var(--text-para-sm-size);
  line-height: var(--text-para-sm-lh);
  letter-spacing: var(--text-para-sm-ls);
  font-weight: 600;
}
.t-eyebrow {
  font-family: var(--font);
  font-size: var(--text-eyebrow-size);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-ls);
  font-weight: 700; /* Birch/Eyebrow is Bold in Figma */
  text-transform: uppercase;
}
.t-btn {
  font-family: var(--font);
  font-size: var(--text-btn-size);
  line-height: var(--text-btn-lh);
  letter-spacing: var(--text-btn-ls);
  font-weight: 600;
}

/* ============ LAYOUT ============ */

/* Container — centers content with responsive horizontal padding */
.container {
  width: 100%;
  max-width: var(--container-lg); /* 1600px */
  margin-inline: auto;
  padding-inline: var(--pad-horizontal);
}
.container-lg { max-width: var(--container-lg); } /* 1600px */
.container-sm { max-width: var(--container-sm); } /* 1024px */

/* 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* Column helpers.
   .col-N    — span N columns;            .start-N    — begin at column N (instead of empty spacer blocks).
   .col-md-N / .start-md-N — tablet and down (≤991px).
   .col-sm-N / .start-sm-N — phones (≤767px), only inside .grid-12.
   On phones a plain .grid collapses to one column; .grid-12 keeps all 12 columns
   (e.g. the footer: label in 3 columns, links in 6). */
.col-1 { grid-column-end: span 1; }
.col-2 { grid-column-end: span 2; }
.col-3 { grid-column-end: span 3; }
.col-4 { grid-column-end: span 4; }
.col-5 { grid-column-end: span 5; }
.col-6 { grid-column-end: span 6; }
.col-7 { grid-column-end: span 7; }
.col-8 { grid-column-end: span 8; }
.col-9 { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }
.start-1 { grid-column-start: 1; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }

@media (max-width: 991px) {
  .col-md-1 { grid-column-end: span 1; }
  .col-md-2 { grid-column-end: span 2; }
  .col-md-3 { grid-column-end: span 3; }
  .col-md-4 { grid-column-end: span 4; }
  .col-md-5 { grid-column-end: span 5; }
  .col-md-6 { grid-column-end: span 6; }
  .col-md-7 { grid-column-end: span 7; }
  .col-md-8 { grid-column-end: span 8; }
  .col-md-9 { grid-column-end: span 9; }
  .col-md-10 { grid-column-end: span 10; }
  .col-md-11 { grid-column-end: span 11; }
  .col-md-12 { grid-column-end: span 12; }
  .start-md-1 { grid-column-start: 1; }
  .start-md-2 { grid-column-start: 2; }
  .start-md-3 { grid-column-start: 3; }
  .start-md-4 { grid-column-start: 4; }
  .start-md-5 { grid-column-start: 5; }
  .start-md-6 { grid-column-start: 6; }
  .start-md-7 { grid-column-start: 7; }
  .start-md-8 { grid-column-start: 8; }
  .start-md-9 { grid-column-start: 9; }
  .start-md-10 { grid-column-start: 10; }
  .start-md-11 { grid-column-start: 11; }
  .start-md-12 { grid-column-start: 12; }
}

/* Collapse to single column on mobile — except .grid-12 */
@media (max-width: 47.9375rem) {
  .grid:not(.grid-12) { grid-template-columns: 1fr; }
  .grid:not(.grid-12) > [class^="col-"], .grid:not(.grid-12) > [class*=" col-"],
  .grid:not(.grid-12) > [class^="start-"], .grid:not(.grid-12) > [class*=" start-"] { grid-column: span 1; }
  .grid-12 > .col-sm-1 { grid-column-end: span 1; }
  .grid-12 > .col-sm-2 { grid-column-end: span 2; }
  .grid-12 > .col-sm-3 { grid-column-end: span 3; }
  .grid-12 > .col-sm-4 { grid-column-end: span 4; }
  .grid-12 > .col-sm-5 { grid-column-end: span 5; }
  .grid-12 > .col-sm-6 { grid-column-end: span 6; }
  .grid-12 > .col-sm-7 { grid-column-end: span 7; }
  .grid-12 > .col-sm-8 { grid-column-end: span 8; }
  .grid-12 > .col-sm-9 { grid-column-end: span 9; }
  .grid-12 > .col-sm-10 { grid-column-end: span 10; }
  .grid-12 > .col-sm-11 { grid-column-end: span 11; }
  .grid-12 > .col-sm-12 { grid-column-end: span 12; }
  .grid-12 > .start-sm-1 { grid-column-start: 1; }
  .grid-12 > .start-sm-2 { grid-column-start: 2; }
  .grid-12 > .start-sm-3 { grid-column-start: 3; }
  .grid-12 > .start-sm-4 { grid-column-start: 4; }
  .grid-12 > .start-sm-5 { grid-column-start: 5; }
  .grid-12 > .start-sm-6 { grid-column-start: 6; }
  .grid-12 > .start-sm-7 { grid-column-start: 7; }
  .grid-12 > .start-sm-8 { grid-column-start: 8; }
  .grid-12 > .start-sm-9 { grid-column-start: 9; }
  .grid-12 > .start-sm-10 { grid-column-start: 10; }
  .grid-12 > .start-sm-11 { grid-column-start: 11; }
  .grid-12 > .start-sm-12 { grid-column-start: 12; }
}
}