/* ── Peapod colour system ───────────────────────────────────────────────
   Modern, clean, photographic. Cool near-neutral greys carry the surfaces;
   a single calm slate-blue is the accent (drawn from sky / travel imagery);
   a dark "cinematic" canvas set powers full-bleed hero contexts. Warmth is
   held in reserve as an optional sand secondary. */
:root {
  /* Cool neutral ink — text, icons, solid CTA */
  --ink-900: #14161A;   /* near-black — primary text, solid buttons */
  --ink-800: #23262C;
  --ink-700: #363A42;
  --ink-600: #545A64;
  --ink-500: #6E747E;   /* secondary text */
  --ink-400: #909099;   /* muted labels, section headers */
  --ink-300: #B4B7BE;   /* placeholder, disabled ink */
  --ink-200: #D3D5DA;

  /* Paper & surfaces — clean cool off-whites */
  --paper:      #FFFFFF; /* card / raised surface */
  --canvas:     #FaFBFC; /* page background */
  --surface-1:  #F2F4F6; /* filled field / subtle panel */
  --surface-2:  #E9ECEF; /* nested fill, hover on surface-1 */
  --surface-3:  #DFE3E7;

  /* Hairlines */
  --border:        #E7EAEE; /* default hairline */
  --border-strong: #D3D8DD; /* emphasised divider, outlined control */

  /* Sky — the calm slate-blue brand accent (from the visa sky imagery) */
  --sky-700: #2B5C86;
  --sky-600: #356E9E;
  --sky-500: #4A86B8;  /* primary accent */
  --sky-400: #74A5CD;
  --sky-200: #BFD6E8;
  --sky-100: #DEEAF3;
  --sky-50:  #EEF4F9;

  /* Sand — optional warm secondary (hospitality warmth, NEOM gold) */
  --sand-600: #B0844A;
  --sand-500: #C79A5C;
  --sand-200: #E9D6B8;
  --sand-100: #F4E9D6;
  --sand-50:  #FAF4EA;

  /* Cinematic canvas — dark full-bleed hero / overlay context */
  --cine-900: #0E1013;   /* deepest dark bg */
  --cine-800: #16191E;
  --cine-700: #22262C;
  --cine-mist: rgba(255, 255, 255, 0.72); /* muted text on dark */

  /* Muted semantics */
  --success-600: #2F7357;
  --success-500: #3C8A69;
  --success-100: #E1EFE9;
  --danger-600:  #B23A38;
  --danger-500:  #C94643;
  --danger-100:  #F6E2E1;
  --warning-600: #B07C1E;
  --warning-500: #D0952E;
  --warning-100: #F7EBD4;

  /* Fixed */
  --white: #FFFFFF;
  --black: #0E1013;

  /* ── Legacy clay aliases → mapped to sand so old refs never break ──── */
  --clay-700: var(--sand-600);
  --clay-600: var(--sand-600);
  --clay-500: var(--sand-500);
  --clay-400: var(--sand-500);
  --clay-200: var(--sand-200);
  --clay-100: var(--sand-100);
  --clay-50:  var(--sand-50);

  /* ── Semantic aliases (prefer these in components) ─────────────────── */
  --bg-page:        var(--canvas);
  --bg-card:        var(--paper);
  --bg-field:       var(--surface-1);
  --bg-field-hover: var(--surface-2);
  --bg-cine:        var(--cine-900);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-inverse:   var(--white);
  --text-accent:    var(--sky-600);
  --text-on-cine:   var(--white);
  --text-on-cine-muted: var(--cine-mist);

  --border-hairline: var(--border);
  --border-control:  var(--border-strong);

  --accent:          var(--sky-500);
  --accent-hover:    var(--sky-600);
  --accent-soft:     var(--sky-100);

  --cta-bg:          var(--ink-900);
  --cta-bg-hover:    var(--ink-800);
  --cta-text:        var(--white);
}