/* Mersama — Color tokens
   Warm, quiet, premium. Sand + ivory surfaces, charcoal text,
   terracotta as the single confident accent. */
:root {
  /* ---- Base palette ---- */
  --sand:            #F5EFE7; /* Warm Sand — primary background */
  --ivory:           #FFFDF8; /* Ivory — cards & raised surfaces */
  --charcoal:        #242321; /* Deep Charcoal — text & logo */
  --terracotta:      #C9795A; /* Terracotta Soft — primary accent / CTA */
  --clay:            #B96D54; /* Clay — alternate human accent, terracotta pressed */
  --olive:           #8B9078; /* Olive Grey — secondary accent */
  --gold:            #B89B5E; /* Muted Gold — premium detail */
  --gold-light:      #C9A98B; /* Sand Gold — hairlines & accents on dark */
  --stone:           #D9D2C7; /* Stone Line — borders & dividers */

  /* ---- Charcoal / dark surfaces ---- */
  --charcoal-800:    #2E2C29; /* raised surface on dark */
  --charcoal-700:    #3D3A35; /* dividers on dark */
  --charcoal-600:    #59554E; /* faint hairline on dark */

  /* ---- Warm neutrals (text tints) ---- */
  --ink-700:         #514D46; /* strong body on light */
  --ink-500:         #6E6A63; /* secondary text */
  --ink-400:         #7E786E; /* muted text on dark */
  --ink-300:         #8B9078; /* olive-tinted captions / labels */
  --ink-200:         #B0A896; /* faint "powered by" text */
  --ink-100:         #C4BDB0; /* body text on charcoal */

  /* ---- Surface tints ---- */
  --line-soft:       #EFE9E0; /* softest inner divider */
  --line:            #E0D9CD; /* card inner border */
  --tint-peach:      #FBF4EC; /* faint terracotta wash (table highlight) */

  /* ---- Semantic ---- */
  --success:         #5E7A5C; /* muted green */
  --warning:         #C79049; /* warm amber */
  --error:           #B0524A; /* muted red */

  /* ---- Semantic aliases (use these in product UI) ---- */
  --bg-page:         var(--sand);
  --surface-card:    var(--ivory);
  --surface-inverse: var(--charcoal);
  --surface-raised-inverse: var(--charcoal-800);

  --text-primary:    var(--charcoal);
  --text-body:       var(--ink-700);
  --text-secondary:  var(--ink-500);
  --text-muted:      var(--ink-300);
  --text-on-dark:    var(--ink-100);
  --text-on-accent:  var(--ivory);

  --accent:          var(--terracotta);
  --accent-hover:    var(--clay);
  --border:          var(--stone);
  --border-inner:    var(--line-soft);
  --focus-ring:      var(--terracotta);
}