/*
  CandiBrows — Design Tokens
  Style: The Master Artisan

  Source of truth for literal values is tokens.json. This file mirrors it as CSS
  custom properties with the --cb- prefix.

  BRAND LAW — non-negotiable:
    phi = 1.618 governs the type scale, layout splits, and image aspect ratios.
    Spacing is Fibonacci ONLY: 5, 8, 13, 21, 34, 55, 89, 144. No other value.
    No text below 16px. Cormorant Garamond never below 29px or weight 500.
    Image ratios: 1:1.618, 1.618:1, 1:1. Nothing else.
    Asymmetric layout splits: 61.8 / 38.2. Nothing else.
    WCAG AA mandatory on every text pairing.
*/

:root {

  /* ============================================================
     COLOR — palette
     ============================================================ */
  --cb-ivory:     #FAF5F0; /* warm ivory — the default ground */
  --cb-blush:     #EBD0CB; /* secondary surfaces, rules, dividers */
  --cb-mauve:     #52393D; /* deep mauve — headings */
  --cb-ink:       #3B2A2C; /* espresso rose — body text */
  --cb-rose-gold: #B76E79; /* accents — NEVER body text on warm ivory (3.51:1) */

  /* ============================================================
     COLOR — semantic
     ============================================================ */
  --cb-bg:               var(--cb-ivory);
  --cb-bg-surface:       var(--cb-blush);
  --cb-bg-inverse:       var(--cb-mauve);
  --cb-text:             var(--cb-ink);       /* 12.48:1 on warm ivory — AAA */
  --cb-text-heading:     var(--cb-mauve);     /* 9.64:1 on warm ivory — AAA */
  --cb-text-inverse:     var(--cb-ivory);     /* 9.64:1 on deep mauve — AAA */
  --cb-rule-decorative:  var(--cb-blush);     /* 1.34:1 — decoration ONLY */
  --cb-rule-meaningful:  var(--cb-rose-gold); /* 3.51:1 — passes 3:1 for non-text */
  --cb-accent:           var(--cb-rose-gold);
  --cb-focus:            var(--cb-rose-gold);

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --cb-font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --cb-font-body:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --cb-weight-display-light: 500; /* floor — never go below */
  --cb-weight-display-bold:  600;
  --cb-weight-body:          400;
  --cb-weight-body-bold:     700;

  /* ============================================================
     TYPOGRAPHY — phi scale, base 18px, ratio 1.618
     18 x 1.618 = 29 -> 47 -> 76 -> 123
     ============================================================ */
  --cb-scale-ratio: 1.618;
  --cb-text-base:   18px;

  --cb-text-fine:    16px;  /* absolute floor — Lato only */
  --cb-text-body:    18px;  /* Lato 400 */
  --cb-text-h3:      29px;  /* Cormorant 600 — the display floor */
  --cb-text-h2:      47px;  /* Cormorant 600 */
  --cb-text-h1:      76px;  /* Cormorant 500 */
  --cb-text-display: 123px; /* Cormorant 500 */

  --cb-text-floor:    16px; /* no text below this, any medium */
  --cb-display-floor: 29px; /* hairline protection */

  /* Line-height — two values only */
  --cb-leading-body:    1.618;
  --cb-leading-display: 1.2;

  /* Label — the only permitted uppercase treatment */
  --cb-label-size:      16px;
  --cb-label-weight:    700;
  --cb-label-tracking:  0.08em;

  /* Measure */
  --cb-measure-min: 55ch;
  --cb-measure-max: 89ch;

  /* ============================================================
     SPACING — Fibonacci. These eight values are the complete set.
     ============================================================ */
  --cb-space-5:   5px;
  --cb-space-8:   8px;
  --cb-space-13: 13px;
  --cb-space-21: 21px;
  --cb-space-34: 34px;
  --cb-space-55: 55px;
  --cb-space-89: 89px;
  --cb-space-144: 144px;

  /* Semantic spacing — aliases only, never new values */
  --cb-gutter-mobile:  var(--cb-space-21);
  --cb-gutter-tablet:  var(--cb-space-34);
  --cb-gutter-desktop: var(--cb-space-55);
  --cb-section-mobile:  var(--cb-space-89);
  --cb-section-desktop: var(--cb-space-144);
  --cb-pad-component: var(--cb-space-21);
  --cb-pad-card:      var(--cb-space-34);
  --cb-pad-card-generous: var(--cb-space-55);

  /* ============================================================
     LAYOUT — phi splits and Fibonacci containers
     ============================================================ */
  --cb-split-content: 61.8%; /* 610px at the 987px container */
  --cb-split-sidebar: 38.2%; /* 377px at the 987px container */

  --cb-container-reading:    610px;  /* F15 — long-form single column */
  --cb-container-text:       987px;  /* F16 — default max width */
  --cb-container-full-bleed: 1597px; /* F17 — outer bound */

  --cb-bp-sm:  377px;
  --cb-bp-md:  610px;
  --cb-bp-lg:  987px;
  --cb-bp-xl: 1597px;

  --cb-hairline: 1px;
  --cb-radius:   0;
  --cb-radius-soft: 5px; /* the only non-zero radius */

  /* ============================================================
     IMAGE — three ratios, no others
     ============================================================ */
  --cb-ratio-portrait:  1 / 1.618;
  --cb-ratio-landscape: 1.618 / 1;
  --cb-ratio-square:    1 / 1;

  /* ============================================================
     LOGO — final artwork in /logo/; rules are locked
     ============================================================ */
  --cb-logo-clear-space: var(--cb-space-34);  /* 34px minimum, all sides */
  --cb-logo-min-width:   var(--cb-space-144); /* 144px; below this use CB monogram */
}

/* ================================================================
   BASE — the legibility mandate applied
   ================================================================ */

html {
  font-size: var(--cb-text-base);
}

body {
  background: var(--cb-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-body);
  font-weight: var(--cb-weight-body);
  line-height: var(--cb-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--cb-font-display);
  color: var(--cb-text-heading);
  line-height: var(--cb-leading-display);
  margin: 0 0 var(--cb-space-21);
}

h1 { font-size: var(--cb-text-h1); font-weight: var(--cb-weight-display-light); }
h2 { font-size: var(--cb-text-h2); font-weight: var(--cb-weight-display-bold); }
h3 { font-size: var(--cb-text-h3); font-weight: var(--cb-weight-display-bold); }

/* Hero display — the top of the scale */
.cb-display {
  font-family: var(--cb-font-display);
  font-size: var(--cb-text-display);
  font-weight: var(--cb-weight-display-light);
  line-height: var(--cb-leading-display);
  color: var(--cb-text-heading);
}

/* h4-h6 do not exist as display type. Below 29px, use Lato. */
h4, h5, h6 {
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-body);
  font-weight: var(--cb-weight-body-bold);
  line-height: var(--cb-leading-body);
  color: var(--cb-text-heading);
  margin: 0 0 var(--cb-space-13);
}

p {
  margin: 0 0 var(--cb-space-21);
  max-width: var(--cb-measure-max);
}

strong, b { font-weight: var(--cb-weight-body-bold); }

small, .cb-fine {
  font-size: var(--cb-text-fine); /* 16px — the floor, not smaller */
  line-height: var(--cb-leading-body);
}

.cb-label {
  font-family: var(--cb-font-body);
  font-size: var(--cb-label-size);
  font-weight: var(--cb-label-weight);
  letter-spacing: var(--cb-label-tracking);
  text-transform: uppercase;
  color: var(--cb-text-heading);
}

a {
  color: var(--cb-text-heading);
  text-decoration-color: var(--cb-rose-gold);
  text-underline-offset: var(--cb-space-5);
}

a:focus-visible {
  outline: 2px solid var(--cb-focus); /* rose gold — 3.51:1 on warm ivory, passes 3:1 */
  outline-offset: var(--cb-space-5);
}

/* ================================================================
   SURFACES & RULES
   ================================================================ */

.cb-surface {
  background: var(--cb-bg-surface); /* blush — body text on it holds 9.28:1 */
  padding: var(--cb-pad-card);
  border-radius: var(--cb-radius);
}

.cb-inverse {
  background: var(--cb-bg-inverse);
  color: var(--cb-text-inverse);
  padding: var(--cb-pad-card-generous);
}

.cb-inverse h1, .cb-inverse h2, .cb-inverse h3 { color: var(--cb-text-inverse); }

/* Decorative hairline — 1.34:1. Never a focus ring, never carries meaning. */
.cb-rule {
  border: 0;
  border-top: var(--cb-hairline) solid var(--cb-rule-decorative);
  margin: var(--cb-space-55) 0;
}

/* Meaningful rule — 3.51:1, passes the 3:1 non-text threshold. */
.cb-rule--accent {
  border-top-color: var(--cb-rule-meaningful);
}

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

.cb-container {
  max-width: var(--cb-container-text);
  margin-inline: auto;
  padding-inline: var(--cb-gutter-mobile);
}

.cb-container--reading   { max-width: var(--cb-container-reading); }
.cb-container--fullbleed { max-width: var(--cb-container-full-bleed); }

.cb-section {
  padding-block: var(--cb-section-mobile);
}

/*
  The canonical phi split.

  Columns are fr units in the golden ratio, NOT 61.8% / 38.2%. Percentage
  columns already consume the whole content box, so the 55px gap is added on top
  of them and the grid overflows its container by exactly one gutter. With fr
  units the gutter is subtracted from the available width first and the two
  columns stay in an exact 1.618:1 ratio — "taken from the container, not added
  to it", per proportions.md §3.

  --cb-split-content / --cb-split-sidebar in :root still state the ratio as
  percentages, and remain correct for any context that is not a gapped grid.
*/
.cb-split {
  display: grid;
  gap: var(--cb-gutter-desktop);
  grid-template-columns: 1fr;
}

@media (min-width: 610px) {
  .cb-container { padding-inline: var(--cb-gutter-tablet); }
}

@media (min-width: 987px) {
  .cb-container { padding-inline: var(--cb-gutter-desktop); }
  .cb-section   { padding-block: var(--cb-section-desktop); }
  /* phi in fr units — 508 / 314 inside the 987px container, gutter included */
  .cb-split     { grid-template-columns: 1.618fr 1fr; }
}

/* ================================================================
   IMAGES — one of three ratios, always
   ================================================================ */

.cb-img          { width: 100%; height: auto; display: block; object-fit: cover; }
.cb-img--portrait  { aspect-ratio: var(--cb-ratio-portrait); }
.cb-img--landscape { aspect-ratio: var(--cb-ratio-landscape); }
.cb-img--square    { aspect-ratio: var(--cb-ratio-square); }

/* ================================================================
   BUTTONS — built from Fibonacci padding, not fixed heights
   ================================================================ */

.cb-btn {
  display: inline-block;
  font-family: var(--cb-font-body);
  font-size: var(--cb-text-body);
  font-weight: var(--cb-weight-body-bold);
  line-height: var(--cb-leading-body);
  padding: var(--cb-space-13) var(--cb-space-34);
  border: var(--cb-hairline) solid var(--cb-mauve);
  border-radius: var(--cb-radius);
  background: transparent;
  color: var(--cb-mauve); /* 9.64:1 on warm ivory */
  cursor: pointer;
}

.cb-btn--primary {
  padding: var(--cb-space-21) var(--cb-space-55);
  background: var(--cb-mauve);
  color: var(--cb-ivory); /* 9.64:1 */
  border-color: var(--cb-mauve);
}

/*
  NOTE: there is no rose-gold-filled button with body-size text.
  Warm ivory on rose gold is 3.51:1 — AA only at >=29px. A rose gold fill may
  carry display type at 29px or larger; it may never carry 18px button text.
*/

.cb-btn:focus-visible {
  outline: 2px solid var(--cb-focus);
  outline-offset: var(--cb-space-5);
}

/* ================================================================
   LOGO
   ================================================================ */

.cb-logo {
  display: inline-block;
  min-width: var(--cb-logo-min-width); /* 144px — below this, use the monogram */
  margin: var(--cb-logo-clear-space);  /* 34px clear space, all sides */
}