/* ============================================================
   Quayside — Colour tokens
   Full reset: ONE brand colour (Stone) plus true neutrals. No warm
   earth tones, no second accent, no orange. Base leans bright/cool —
   glass and window light, not paper.
   ============================================================ */

:root {
  /* ---- Base palette (brand-defined) ---- */
  --qs-black: #16171a;  /* Primary — type, dark panels */
  --qs-stone: #7b8474;  /* The one accent — muted grey-green stone */
  --qs-white: #ffffff;  /* Base ground — bright, not paper */

  /* ---- Ink scale (cool near-blacks → greys, neutral — no warmth) ---- */
  --ink-900: #16171a;
  --ink-800: #212226;
  --ink-700: #34363a;
  --ink-600: #4a4c50;
  --ink-500: #65676b;
  --ink-400: #85878a; /* neutral grey */
  --ink-300: #acadaf;
  --ink-200: #d2d3d3;
  --ink-100: #e9e9e9;

  /* ---- Mist scale (bright, cool base — a hint of glass, not beige) ---- */
  --mist-50:  #fbfbfa;
  --mist-100: #f3f4f1; /* applied ground */
  --mist-200: #e6e8e3;
  --mist-300: #cfd2c9;
  --mist-400: #aeb2a6;

  /* ---- Stone scale (the ONE accent — tints/shades of #7B8474) ---- */
  --stone-900: #20241e;
  --stone-800: #293026;
  --stone-700: #495044;
  --stone-600: #5e6757;
  --stone-500: #7b8474; /* brand stone */
  --stone-400: #96a18d;
  --stone-300: #b3bcab;
  --stone-200: #cfd8c8;
  --stone-100: #e5ebe0;
  --stone-50:  #f2f6ef;

  /* ---- Functional (utility only — never used as brand accent) ---- */
  --success: var(--stone-600);
  --warning: #b8842e;
  --danger:  #b0392f;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--qs-white);
  --surface-raised:   var(--qs-white);
  --surface-card:     var(--qs-white);
  --surface-sunken:   var(--mist-100);
  --surface-inverse:  var(--ink-900);
  --surface-accent:   var(--stone-500); /* the one accent, used sparingly */

  /* Text */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-subtle:    var(--ink-300);
  --text-inverse:   var(--qs-white);
  --text-on-accent: var(--qs-white);
  --text-accent:    var(--stone-600);
  --text-link:      var(--stone-600);

  /* Borders / lines */
  --border-strong:  var(--ink-900);
  --border-default: var(--ink-200);
  --border-subtle:  var(--ink-100);
  --border-accent:  var(--stone-500);
  --border-on-dark: rgba(255,255,255,0.18);

  /* Interaction */
  --focus-ring:   var(--stone-500);
  --selection-bg: var(--stone-200);
}