/* The Branch Design System v1.0
   Token layer. Every value below traces back to the Brand Book (Mar. 2026)
   or is derived from it for interface work. Nothing else in the system
   may hardcode a colour, a duration or a curve. */

:root {
  /* ---------------------------------------------------------------
     Colour: brand (from the Brand Book)
     --------------------------------------------------------------- */
  --green:            #236925;  /* Primary Green */
  --blue:             #182A7D;  /* Accent Blue  */
  --gold:             #E7BC00;  /* Accent Yellow */
  --green-accent:     #E3F0E3;  /* Accent Green */

  /* ---------------------------------------------------------------
     Colour: extended (derived for interface work)
     --------------------------------------------------------------- */
  --ink:              #0F1A11;
  --green-700:        #17491A;
  --green-400:        #4E8F50;
  --green-50:         #F4F9F4;
  --blue-100:         #E4E7F3;
  --gold-100:         #FBF1CC;
  --paper:            #FBFAF7;
  --line:             #E2E0D8;
  --muted:            #6E6B5E;
  --live:             #C0342B;

  /* ---------------------------------------------------------------
     Colour: support (states, reversed surfaces, hairlines)
     --------------------------------------------------------------- */
  --surface:          #FFFFFF;
  --body:             #3A3D36;  /* long-form text on paper */
  --faint:            #8A8778;  /* section numbers, eyebrow labels */

  --line-soft:        #EDECE6;  /* the select's chevron rule */
  --line-hover:       #B8C7B9;  /* input hover */
  --disabled-bg:      #F4F3EE;
  --disabled-ink:     #8A8778;
  --chevron-disabled: #B5B2A6;

  --live-hover:       #9C2A22;
  --gold-hover:       #FFD426;

  --on-green:         #C9DFCA;  /* secondary text on Primary Green */
  --on-green-tint:    #3A5A3B;  /* secondary text on Accent Green */
  --on-ink:           #9FB3A0;  /* secondary text on Ink */
  --ink-line:         #2B3A2C;  /* hairline on Ink */
  --ink-faint:        #6E7C6F;  /* tertiary text on Ink */
  --gold-ink:         #6B5600;  /* text on Gold 100 */
  --gold-ink-strong:  #5A4A00;  /* secondary text on Accent Yellow */

  /* ---------------------------------------------------------------
     Typography
     --------------------------------------------------------------- */
  --font-sans:    "Helvetica Neue", Helvetica, Archivo, Arial, sans-serif;
  --font-display: "Libre Caslon Display", Georgia, serif;
  --font-mono:    ui-monospace, Menlo, monospace;

  --size-display-xl: 72px;   --lh-display-xl: 1.02;  --ls-display-xl: -.015em;
  --size-display-l:  48px;   --lh-display-l:  1.08;
  --size-display-m:  38px;   --lh-display-m:  1.1;
  --size-heading:    28px;   --lh-heading:    1.25;  --ls-heading:    -.01em;
  --size-subhead:    20px;   --lh-subhead:    1.5;
  --size-body:       17px;   --lh-body:       1.6;
  --size-small:      15px;
  --size-fine:       13px;
  --size-label:      11px;   --ls-label:      .2em;
  --ls-label-tight:  .16em;
  --ls-badge:        .14em;

  --measure: 64ch;  /* never wider for long-form copy */

  /* ---------------------------------------------------------------
     Space & shape
     --------------------------------------------------------------- */
  --gutter:        72px;
  --section-gap:   112px;
  --sidebar-w:     268px;
  --main-max:      1180px;

  --radius:        4px;
  --radius-sm:     3px;
  --radius-pill:   999px;

  --control-h:     48px;   /* inputs */
  --control-h-sm:  44px;   /* minimum touch target */

  /* Button heights. Nothing may go below --btn-h-sm: that is the touch
     minimum, not a style choice. */
  --btn-h-sm:      44px;   /* compact, for headers */
  --btn-h:         48px;   /* default */
  --btn-h-lg:      52px;   /* a view's leading call to action */
  --header-h:      76px;
  --header-h-sm:   64px;

  --shadow-menu: 0 10px 28px rgba(15, 26, 17, .12);

  /* ---------------------------------------------------------------
     Motion: three durations, one curve
     --------------------------------------------------------------- */
  --ease:           cubic-bezier(.2, .7, .3, 1);
  --instant:        160ms;   /* focus rings, input borders, small colour shifts */
  --considered:     240ms;   /* buttons, card borders, image scale on hover */
  --arriving:       420ms;   /* section reveals, menu open, player expanding */
}

/* ==================================================================
   Landing-page tokens
   Tints and hairlines the landing needs on its own coloured grounds,
   still derived from the four brand colours above, never new hues.
   ================================================================== */
:root {
  --a-on-ink:      #C9D6CA;  /* body text on Ink */
  --a-ink-faint:   #8A9A8B;  /* times, captions on Ink */
  --a-ink-rule:    #3B4A3C;  /* button outline on Ink */
  --a-live-bright: #FF6B5F;  /* the announcement bar's live label */
  --a-on-tint:     #2F4630;  /* body text on Accent Green */

  /* Measurements */
  --l-max:    1280px;
  --l-pad:    32px;
  --l-gap:    104px;   /* section rhythm */
  --l-header: 76px;
}