/* =========================================================
   COLORS — Coastline / Moray Jewel
   A cooler "stone" palette (founder direction: less cream,
   more grey tint). Warm ember accent + cool sea counterpoint.
   Cinematic, calm, atmosphere-before-commerce.
   ========================================================= */
:root {
  /* ---- SURFACES ---------------------------------------- */
  --paper:      #e8e3d8;   /* cool stone — primary page bg */
  --paper-deep: #d8d2c5;   /* slightly deeper stone — wells, sketches */
  --paper-warm: #e2dcce;   /* subtle warm variant */
  --slate:      #23252a;   /* cool dark band — dark pages, cover */
  --slate-soft: #2f3238;   /* lifted dark surface */
  --void:       #161617;   /* near-black app/letterbox backdrop */

  /* On-dark off-whites */
  --bone:       #f0ebe1;   /* off-white text/marks on dark */
  --bone-soft:  rgba(240,235,225,0.78);
  --bone-faint: rgba(240,235,225,0.46);

  /* ---- INK (text on light) ----------------------------- */
  --ink:        #1a1c20;   /* primary text */
  --ink-soft:   rgba(26,28,32,0.74);  /* body copy */
  --ink-mid:    rgba(26,28,32,0.54);  /* secondary / captions */
  --ink-faint:  rgba(26,28,32,0.34);  /* page numbers, faint meta */

  /* ---- RULES / HAIRLINES ------------------------------- */
  --rule:        rgba(26,28,32,0.14);  /* default divider on light */
  --rule-strong: rgba(26,28,32,0.32);  /* emphasised divider */
  --rule-dark:   rgba(240,235,225,0.18); /* divider on dark */

  /* ---- ACCENTS ----------------------------------------- */
  --ember:      #b0451f;   /* warm signal — links, accents, the brand dot */
  --ember-soft: #c66e47;   /* lighter ember, for dark grounds */
  --ember-wash: rgba(176,69,31,0.08);  /* faint ember fill — warning wells */
  --sea:        #4a6470;   /* cool counterpoint — terrain icons, insight wells */
  --sea-wash:   rgba(74,100,112,0.25); /* faint sea fill — water in sketches */

  /* =======================================================
     SEMANTIC ALIASES — prefer these in components
     ======================================================= */
  --surface-page:      var(--paper);
  --surface-page-deep: var(--paper-deep);
  --surface-dark:      var(--slate);
  --surface-well:      var(--paper-deep);   /* inset wells, sketches, maps */
  --backdrop:          var(--void);

  --text-strong:   var(--ink);
  --text-body:     var(--ink-soft);
  --text-muted:    var(--ink-mid);
  --text-faint:    var(--ink-faint);
  --text-on-dark:        var(--bone);
  --text-on-dark-soft:   var(--bone-soft);
  --text-on-dark-faint:  var(--bone-faint);

  --accent:            var(--ember);
  --accent-on-dark:    var(--ember-soft);
  --accent-cool:       var(--sea);

  --border-hairline:   var(--rule);
  --border-strong:     var(--rule-strong);
  --border-on-dark:    var(--rule-dark);

  --selection-bg:   var(--ember);
  --selection-fg:   var(--paper);
}