/* BINAL colour system — muted architectural neutrals + one sage brand
   accent + one ochre interaction accent. Keep saturation low and calm. */
:root {
  /* ---- Base palette ---- */
  --binal-charcoal: #1d2024;   /* near-black, slightly warm */
  --binal-ink-2:    #3a3f44;   /* softened charcoal for secondary text */
  --binal-sage:     #5b6e5a;   /* brand accent (the N & solid diamond) */
  --binal-sage-light:#8aa085;  /* sage lifted for dark backgrounds */
  --binal-ochre:    #b8954f;   /* interaction accent — web only */
  --binal-ochre-soft:#d9c79a;  /* ochre underline / hairline */
  --binal-sand:     #cdc6b8;   /* dividers, secondary surfaces */
  --binal-stone:    #f5f3ee;   /* primary calm background */
  --binal-stone-2:  #f6f4ef;   /* card / inset stone */
  --binal-paper:    #ffffff;   /* surface white */
  --binal-cloud:    #f3f1ec;   /* light foreground on charcoal */
  --binal-line:     #ecebe7;   /* hairline divider on light */
  --binal-line-2:   #e4e0d6;   /* slightly warmer hairline */
  --binal-muted:    #5e6267;   /* muted body text */
  --binal-label:    #8a8f96;   /* mono label grey */
  --binal-label-2:  #b0a896;   /* warm mono label on stone */

  /* ---- Semantic aliases (use these in product UI) ---- */
  --color-bg:          var(--binal-stone);
  --color-surface:     var(--binal-paper);
  --color-surface-alt: var(--binal-stone-2);
  --color-text:        var(--binal-charcoal);
  --color-text-muted:  var(--binal-muted);
  --color-text-faint:  #6b6f76;               /* a11y: darkened from #8a8f96 to clear 4.5:1 on stone */
  --color-brand:       var(--binal-sage);     /* identity, never CTAs */
  --color-accent:      var(--binal-ochre);    /* buttons bg, focus, underlines (decorative) */
  --color-accent-soft: var(--binal-ochre-soft);
  --color-link:        #7e5f24;               /* a11y: deeper bronze for link TEXT — 5.3:1 on stone */
  --color-border:      var(--binal-sand);
  --color-divider:     var(--binal-line);
  --color-on-accent:   var(--binal-charcoal); /* a11y: dark text on ochre buttons = 5.8:1 (was white 2.82:1) */
}

/* Reversed / dark surfaces. Apply .binal-dark (or [data-theme="dark"]). */
.binal-dark,
[data-theme="dark"] {
  --color-bg:          var(--binal-charcoal);
  --color-surface:     var(--binal-charcoal);
  --color-surface-alt: #24272c;
  --color-text:        var(--binal-cloud);
  --color-text-muted:  #9aa0a6;
  --color-text-faint:  #868d97;               /* a11y: lightened from #6f7782 to clear 4.5:1 on charcoal */
  --color-link:        var(--binal-ochre);    /* dark: ochre already 5.8:1 */
  --color-brand:       var(--binal-sage-light);
  --color-accent:      var(--binal-ochre);
  --color-border:      #2c3036;
  --color-divider:     #2c3036;
}