/* =============================================================================
 * 1Gesture Page & Email Builder — shared brand tokens (CSS custom properties)
 * GENERATED MIRROR of brand-tokens.json (P0 task 0.1). Single source of truth.
 *
 * DO NOT hard-code hex in renderers — link this file (web target + editor) and
 * reference var(--color-*) / var(--step-*) / var(--space-*) / var(--radius-*).
 * The EMAIL target cannot use custom properties in many clients; it reads the
 * RESOLVED values from brand-tokens.json and inlines them. See tokens.README.md.
 *
 * Fonts: the 8 Libre Franklin weights (Impallari Type, SIL OFL 1.1) are ALREADY declared
 * via @font-face in the
 * brand-kit source (1g_brand/brand-kit/index.html, compiled to
 * output/1gesture/branding/index.html) and served from /branding/fonts. DO NOT
 * re-declare them here — keep one font-loading site. If a render target is used
 * standalone (outside /branding chrome), import the kit's @font-face block or add
 * one pointing at the same /branding/fonts/*.woff2 files. (See README "fonts".)
 * ===========================================================================*/

:root {
  /* --- Colour (EXTRACTED, authoritative — brand-kit :root line 28) --------- */
  --color-ink:      #232824;
  --color-green:    #00552b;
  --color-teal:     #004555;
  --color-burgundy: #7d0037;
  --color-amber:    #a35e00;
  --color-paper:    #fafafa;
  --color-lime:     #b3ff7a;
  --color-cyan:     #66efeb;
  --color-blush:    #ffbcc6;
  --color-gold:     #ffd65c;

  /* --- Semantic colour (DERIVED — kit body defaults) ---------------------- */
  --color-text:       var(--color-ink);
  --color-background: var(--color-paper);
  --color-primary:    var(--color-green);
  --color-accent:     var(--color-lime);

  /* --- Type family + weights (EXTRACTED) ---------------------------------- */
  --font-family: "Libre Franklin", "Arial Narrow", system-ui, -apple-system, sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --font-weight-thin:       100;
  --font-weight-extralight: 200;
  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-bold:       700;
  --font-weight-heavy:      800;
  --font-weight-black:      900;

  /* --- Fluid type scale (DERIVED from kit clamp() usage) ------------------ */
  /* typeStep knob = integer offset into this ladder; base body = --step-0.    */
  --step--2: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* caption  12->13 */
  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);  /* small    14->15 */
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);        /* body     16->18 */
  --step-1:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);    /* lead     18->22 */
  --step-2:  clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);      /* h4       22->28 */
  --step-3:  clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);     /* h3       26->36 */
  --step-4:  clamp(1.875rem, 1.4rem + 2.4vw, 3rem);         /* h2       30->48 */
  --step-5:  clamp(2.25rem, 1.5rem + 3.75vw, 4rem);         /* h1       36->64 */
  --step-6:  clamp(2.75rem, 1.6rem + 5.75vw, 5rem);         /* display  44->80 */

  /* --- Line heights (DERIVED) -------------------------------------------- */
  --leading-tight:   1.06;
  --leading-heading: 1.15;
  --leading-body:    1.5;

  /* --- Spacing (DERIVED, LOCKED ~8pt baseline) --------------------------- */
  --space-3xs: 0.25rem; /* 4  */
  --space-2xs: 0.5rem;  /* 8  */
  --space-xs:  0.75rem; /* 12 */
  --space-s:   1rem;    /* 16 */
  --space-m:   1.5rem;  /* 24 */
  --space-l:   2rem;    /* 32 */
  --space-xl:  3rem;    /* 48 */
  --space-2xl: 4rem;    /* 64 */
  --space-3xl: 6rem;    /* 96 */

  /* --- Radii (DERIVED from kit radius tallies) --------------------------- */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --- Layout: site-wide content column cap (CONTRACT) -------------------- */
  /* Max width of the boxed CONTENT column inside a full-bleed artboard (free)
   * section — the renderer's .pb-section__cap wrapper reads it as
   * max-width:var(--pb-content-max,1200px). Section backgrounds/textures stay
   * full-bleed; only the content boxes at this cap (the industry
   * full-bleed-background / boxed-content pattern). The 1200px default
   * deliberately matches BOTH --pb-nav-max (so artboard content aligns with
   * the nav column) AND the editor's desktop canvas frame (FRAME_WIDTH_PX
   * .desktop = 1200), which makes built pages at >=1200px viewports
   * pixel-identical to the editor canvas. Override by redefining this token
   * (keep it in step with --pb-nav-max if page-wide alignment matters). */
  --pb-content-max: 1200px;
}