/* =====================================================================
   tokens.css  —  Brian Brixon
   Every color, font, size, space and timing on the site, in one place.
   Change a value here and it changes everywhere. brand.css only ever
   uses these names; it never has a color of its own.

   Contrast ratios were measured (WCAG 2.x formula) against the
   background named in each comment.
   ===================================================================== */

:root {
  color-scheme: dark;

  /* ---- Surfaces (dark) ---------------------------------------------- */
  --bb-bog-oak:        #0C1712; /* deepest: footer, overlays */
  --bb-forest:         #14221A; /* page ground, sampled from Brian's logo and banner */
  --bb-forest-raised:  #1B2E24; /* cards, condensed header */
  --bb-moss:           #24402F; /* borders, hover fills, dividers (decorative only: 1.45:1) */

  /* ---- Verdigris (the brand's voice) -------------------------------- */
  --bb-verdigris:       #3B7E6A; /* 3.4:1 on forest: large text, icons, ornament only */
  --bb-verdigris-light: #7DBBA3; /* links and small accents on dark: 7.5:1 on forest */
  --bb-verdigris-deep:  #2B5E4F; /* links on vellum: 6.5:1 */

  /* ---- Gilt bronze (the one action color) -------------------------- */
  --bb-bronze:       #C9965A; /* primary buttons (text = forest, 6.3:1), hairlines, monogram */
  --bb-bronze-light: #DDB27A; /* hover state: 8.4:1 on forest */
  --bb-bronze-deep:  #8A5A24; /* bronze text and focus ring on vellum: 5.1:1 */

  /* ---- Neutrals ------------------------------------------------------ */
  --bb-bone:     #ECE7DC; /* body text on dark: 13.4:1 on forest, 11.6:1 on forest-raised */
  --bb-lichen:   #A9B8AF; /* secondary text on dark: 8.0:1 on forest */
  --bb-vellum:   #F4EFE4; /* light "reading room" sections */
  --bb-vellum-2: #E9E1CF; /* vellum cards, table stripes */
  --bb-ink:      #17231D; /* iron-gall ink, text on vellum: 14.2:1 */
  --bb-sepia:    #624824; /* the warm darkening at a vellum section's top and bottom edges (decorative) */
  --bb-umber:    #2A2216; /* vellum in lamplight: the dim a light section comes up from as it scrolls in */

  /* ---- States -------------------------------------------------------- */
  --bb-sage:   #74B57C; /* success only: 6.8:1 on forest */
  --bb-danger: #E08A7A; /* form errors on dark: 6.4:1 on forest, 5.5:1 on forest-raised */

  /* ---- Added in Phase 2, for vellum sections and form fields ---------- */
  --bb-ink-soft:    #4D5C53; /* secondary text on vellum: 6.2:1 (5.4:1 on vellum-2) */
  --bb-danger-deep: #9E3A2A; /* form errors on vellum: 5.9:1 */
  --bb-sage-deep:   #2F6B3A; /* success on vellum: 5.6:1 */
  --bb-reed:        #6B8577; /* form-field borders on dark: 4.1:1 on forest (fields need 3:1) */
  --bb-flax:        #857E69; /* form-field borders on vellum: 3.5:1 */

  /* ---- Type families (Adobe Fonts kit puh2jtf, with fallbacks) -------- */
  /* "BB Runes" comes first but only covers the rune block (brand.css,
     section 2), so it's only ever downloaded on a page that shows a rune.
     Each "… Fallback" stands in until its Adobe font arrives: Georgia or
     Segoe UI, resized to take the same room (brand.css, section 2). */
  --bb-font-display: "BB Runes", "freight-big-pro", "Freight Big Fallback", Georgia, "Times New Roman", serif;
  --bb-font-text:    "BB Runes", "freight-text-pro", "Freight Text Fallback", Georgia, "Times New Roman", serif;
  --bb-font-ui:      "BB Runes", "gill-sans-nova", "Gill Sans Nova Fallback", "Gill Sans", "Gill Sans MT", "Segoe UI", system-ui, sans-serif;
  --bb-font-code:    "source-code-pro", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---- Type scale (fluid) -------------------------------------------- */
  --step--1: 0.875rem;                                  /* UI labels: Gill Sans Nova 600, uppercase, .12em */
  --step-0:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* body: never below 17px */
  --step-1:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* lead paragraphs, H4 */
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);         /* H3 */
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3rem);           /* H2: Freight Big Light */
  --step-4:  clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);     /* page H1 */
  --step-5:  clamp(3rem, 2rem + 5vw, 6.25rem);          /* home hero H1 */

  --bb-leading-body:    1.6;
  --bb-leading-display: 1.05;
  --bb-tracking-display: -0.01em;
  --bb-tracking-label:   0.12em;
  --bb-weight-ui: 600;   /* Gill Sans Nova SemiBold: navigation, buttons, labels */

  /* ---- Space ------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8.5rem); /* top and bottom of a major section */

  /* ---- Layout ----------------------------------------------------------- */
  --bb-measure: 65ch;   /* longest comfortable line of body text */
  --bb-gutter: clamp(1rem, 0.4rem + 2.5vw, 2.5rem);

  /* ---- Shape ------------------------------------------------------------- */
  --bb-radius-control: 2px;   /* buttons, inputs, chips */
  --bb-radius-card:    4px;   /* cards, frames */
  --bb-radius-pill:    999px; /* status pills only */

  /* ---- Motion ------------------------------------------------------------ */
  --bb-ease-draw: cubic-bezier(.65, 0, .35, 1);
  --bb-ease-out:  cubic-bezier(.22, 1, .36, 1);
  --bb-dur-hover:  200ms;
  --bb-dur-ui:     250ms;
  --bb-dur-reveal: 500ms;
  --bb-dur-draw:   1600ms;
  --bb-stagger:    60ms;

  /* ---- Header ------------------------------------------------------------ */
  --bb-header-h:           88px;
  --bb-header-h-condensed: 64px;

}

/* ---- Roles ------------------------------------------------------------------
   Components use these, never the raw colors above. Each section type sets
   its own full set, so a forest panel inside a vellum section (or the other
   way round) gets the right colors. */

/* Dark: the page ground, and any .bb-section--forest / .bb-on-forest. */
:root,
.bb-section--forest,
.bb-on-forest,
.bb-section--bog {
  color-scheme: dark;
  --bb-bg:          var(--bb-forest);
  --bb-surface:     var(--bb-forest-raised);
  --bb-text:        var(--bb-bone);
  --bb-text-muted:  var(--bb-lichen);
  --bb-heading:     var(--bb-bone);
  --bb-voice:       var(--bb-verdigris-light); /* italic accent word, eyebrows */
  --bb-link:        var(--bb-verdigris-light);
  --bb-link-hover:  var(--bb-bone);
  --bb-rule:        var(--bb-moss);            /* borders and dividers */
  --bb-field-bg:    var(--bb-bog-oak);
  --bb-field-line:  var(--bb-reed);
  --bb-accent:      var(--bb-bronze);          /* buttons, active nav, focus */
  --bb-accent-hover: var(--bb-bronze-light);
  --bb-accent-ink:  var(--bb-forest);          /* text on a bronze button */
  --bb-accent-text: var(--bb-bronze);          /* bronze used as text */
  --bb-ornament:    var(--bb-verdigris);
  --bb-focus:       var(--bb-bronze);
  --bb-error:       var(--bb-danger);
  --bb-success:     var(--bb-sage);
  /* The mottled texture, 4–6% per the brief. The same tile twice at
     unrelated sizes, so its repeat can't be seen. (Root-relative URLs, so
     they work wherever these variables are used.) */
  --bb-grain-image:   url("/assets/img/brand/grain.png"), url("/assets/img/brand/grain.png");
  --bb-grain-size:    256px 256px, 421px 421px;
  --bb-grain-pos:     0 0, 97px 53px;
  --bb-grain-opacity: 0.06;

  /* Font Awesome duotone icons */
  --fa-primary-color:     var(--bb-verdigris-light);
  --fa-secondary-color:   var(--bb-verdigris);
  --fa-secondary-opacity: 0.6;
}

/* Light "reading room" sections: case studies, the custom-order process, About. */
.bb-section--vellum,
.bb-on-vellum {
  color-scheme: light;
  --bb-bg:          var(--bb-vellum);
  --bb-surface:     var(--bb-vellum-2);
  --bb-text:        var(--bb-ink);
  --bb-text-muted:  var(--bb-ink-soft);
  --bb-heading:     var(--bb-ink);
  --bb-voice:       var(--bb-verdigris-deep);
  --bb-link:        var(--bb-verdigris-deep);
  --bb-link-hover:  var(--bb-ink);
  --bb-rule:        var(--bb-vellum-2);
  --bb-field-bg:    var(--bb-vellum);
  --bb-field-line:  var(--bb-flax);
  --bb-accent:      var(--bb-bronze);
  --bb-accent-hover: var(--bb-bronze-light);
  --bb-accent-ink:  var(--bb-forest);
  --bb-accent-text: var(--bb-bronze-deep);
  --bb-ornament:    var(--bb-verdigris);
  --bb-focus:       var(--bb-bronze-deep);
  --bb-error:       var(--bb-danger-deep);
  --bb-success:     var(--bb-sage-deep);
  /* Parchment: warm mottling, flecks and a fine grain (vellum.png, from
     tools/build-vellum.mjs), laid twice at unrelated sizes like the dark grain. */
  --bb-grain-image:   url("/assets/img/brand/vellum.png"), url("/assets/img/brand/vellum.png");
  --bb-grain-size:    320px 320px, 533px 533px;
  --bb-grain-pos:     0 0, 149px 87px;
  --bb-grain-opacity: 0.08;
  --fa-primary-color:   var(--bb-verdigris-deep);
  --fa-secondary-color: var(--bb-verdigris);
}

/* The deepest ground: footer and full-bleed bands. */
.bb-section--bog {
  --bb-bg:      var(--bb-bog-oak);
  --bb-surface: var(--bb-forest);
  --bb-field-bg: var(--bb-forest);
}