/* =============================================================
   Peak Body Coach · Colour System · tokens-colours.css
   v1.2 — Dark-surface rule colours added.
          Pill component classes formalised.
   Locked. Pair with tokens-type.css and tokens-spacing.css.
   ============================================================= */

:root {

  /* ---------- 1. Palette ---------- */

  /* Neutrals */
  --color-page:      #F2EFEA;   /* Reading surface — long-form, body, web body */
  --color-cream:     #ECE6D7;   /* Figure colour — headlines on dark, callouts */
  --color-ink:       #171717;   /* Everyday black — body text, dark surfaces */
  --color-slate:     #2D313C;   /* Evidence surface — charts, data, citations */

  /* Accents — flat, no tint scale */
  --color-red:       #BE3142;   /* Loud register — hooks, ads, thumbnails */
  --color-green:     #2F4A3B;   /* Calm register — long-form, book, editorial */
  --color-teal:      #479EA8;   /* Evidence register — charts, data */


  /* ---------- 2. Semantic aliases ---------- */
  /* Use these in components rather than direct palette values */

  --color-bg:               var(--color-page);
  --color-surface-dark:     var(--color-ink);
  --color-surface-evidence: var(--color-slate);

  --color-text:             var(--color-ink);
  --color-text-on-dark:     var(--color-cream);
  --color-text-quiet:       var(--color-ink);   /* paired with --opacity-quiet */

  /* Rule colours on dark surfaces (v1.2) */
  --color-rule-on-dark-standard:  rgba(236, 230, 215, 0.85);  /* Callout side-rules, emphatic marks */
  --color-rule-on-dark-quiet:     rgba(236, 230, 215, 0.4);   /* Chapter openers, structural dividers */


  /* ---------- 3. UI states ---------- */

  --color-link:             var(--color-ink);
  --color-link-underline:   var(--color-ink);

  --color-focus-ring:       var(--color-teal);  /* Deliberate WCAG 1.4.11 trade-off */
  --color-focus-glow:       rgba(71, 158, 168, 0.35);

  --color-state-error:      var(--color-red);
  --color-state-success:    var(--color-green);   /* used sparingly — see usage notes */
  --color-state-info:       var(--color-slate);


  /* ---------- 4. Opacity tokens ---------- */

  --opacity-quiet:     0.7;     /* Helper / placeholder text on Page */
  --opacity-disabled:  0.4;     /* Disabled UI — WCAG-exempt */
  --opacity-overlay-bottom: 0.85;  /* Photo hero gradient bottom */


  /* ---------- 5. Photography filters ---------- */
  /* Apply to <img> via filter property */

  --photo-tier-1: none;                                                       /* Cinematic — as shot */
  --photo-tier-2: saturate(0.88) contrast(1.04);                              /* Editorial — portrait correction */
  --photo-tier-3: saturate(0.65) contrast(1.05) brightness(0.98);             /* Context — default desaturation */
  --photo-tier-3-strong: saturate(0.50) contrast(1.05) brightness(0.97);      /* Context — heavy clash only */
  --photo-tier-4: grayscale(1) contrast(1.08) brightness(1.02);               /* Mono — reference / archive */


  /* ---------- 6. Photo hero overlay ---------- */
  /* Apply to a <div> sat above the photo, below the content */

  --photo-overlay-gradient: linear-gradient(
    180deg,
    rgba(23, 23, 23, 0.0)  0%,
    rgba(23, 23, 23, 0.25) 40%,
    rgba(23, 23, 23, 0.85) 100%
  );


  /* ---------- 7. Structural mark widths ---------- */

  --mark-rule-side:    3px;     /* Side rule — callouts, validation states */
  --mark-rule-top:     2px;     /* Top divider — section breaks */
  --mark-pill-padding: 5px 10px 4px;
}


/* =============================================================
   Pairing utilities — apply at section / component level
   ============================================================= */

.surface-page  { background: var(--color-page);  color: var(--color-ink); }
.surface-cream { background: var(--color-cream); color: var(--color-ink); }
.surface-ink   { background: var(--color-ink);   color: var(--color-cream); }
.surface-slate { background: var(--color-slate); color: var(--color-cream); }


/* =============================================================
   Photography classes — drop-in
   ============================================================= */

.photo-tier-1 { filter: var(--photo-tier-1); }
.photo-tier-2 { filter: var(--photo-tier-2); }
.photo-tier-3 { filter: var(--photo-tier-3); }
.photo-tier-3-strong { filter: var(--photo-tier-3-strong); }
.photo-tier-4 { filter: var(--photo-tier-4); }


/* =============================================================
   Form state classes — Option A discipline (mark only attention)
   ============================================================= */

.input {
  background: #FFFFFF;
  border: 1px solid rgba(23, 23, 23, 0.18);
  color: var(--color-ink);
}

.input:focus,
.input:focus-visible {
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 2px var(--color-focus-glow);
  outline: none;
}

.input--error {
  border-left: var(--mark-rule-side) solid var(--color-state-error);
}

.input--success { /* no class needed — successful fields stay neutral */ }


/* =============================================================
   Pill component classes (v1.2)
   Requires --font-mono from tokens-type.css
   ============================================================= */

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: var(--mark-pill-padding);
  border-radius: 0;
}

/* Filled colour variants — self-contained surfaces, work on any background */
.pill--red   { background: var(--color-red);   color: var(--color-cream); }
.pill--green { background: var(--color-green); color: var(--color-cream); }
.pill--teal  { background: var(--color-teal);  color: var(--color-ink); }
.pill--slate { background: var(--color-slate); color: var(--color-cream); }

/* Dark-surface default (v1.2) — cream fill, ink text */
.pill--cream { background: var(--color-cream); color: var(--color-ink); }

/* Outline variants — surface-paired */
.pill--outline-ink {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}

.pill--outline-cream {                         /* v1.2 — for use on Ink/Slate surfaces */
  background: transparent;
  color: var(--color-cream);
  border: 1px solid var(--color-cream);
}


/* =============================================================
   Notes
   =============================================================
   1. Three accents only — no celebratory or warning fourth.
      Use green or red by tone instead.

   2. Brand accents are FLAT. No tints or shades.
      For "softer" treatment, use a structural mark
      (side rule, top divider, pill) — never a tinted fill.

   3. Slate is teal's exclusive partner. Never red on slate
      (except sanctioned hero exception with mandatory cream subtitle).
      Never green on slate.

   4. Disabled state uses --opacity-disabled (0.4). Below WCAG AA
      contrast but exempt under WCAG 1.4.3 (inactive UI components).

   5. Focus ring is teal at 2.72:1 vs Page — below WCAG 1.4.11.
      Deliberate trade-off, documented in STYLE_GUIDE-colour.md §4.

   6. Print: red requires Pantone 200 C match for any client-facing
      print piece. Other colours convert on press without specification.

   7. Dark-surface rules (v1.2): use --color-rule-on-dark-standard
      (cream at 0.85) for emphatic side-rules — callouts, equivalent
      marks. Use --color-rule-on-dark-quiet (cream at 0.4) for
      structural dividers — chapter openers, section breaks. The
      hierarchy mirrors light: louder mark for emphasis, quieter
      mark for structure. Red rules stay red across surfaces (the
      red is a category signal, not a contrast tool).

   8. The "default" pill on any surface uses the surface's opposite
      as its fill: ink fill on Page, cream fill on Ink/Slate. The
      outline variant follows the same logic.
*/