/* ── Peapod colour system ───────────────────────────────────────────────
   Warm stone neutrals with a single terracotta accent, taken from the
   Claude Design artboards (Admin Console, Personalization Flow, During
   Stay, Post Stay). Every neutral in those files is warm — #E6E5E1 is the
   most-used colour in the whole design — so a cool blue-grey ramp made
   every surface, hairline and label read at the wrong temperature on every
   screen, however well-shaped the components were.

   Token NAMES are unchanged so nothing has to be re-pointed; only the
   values move. `--sky-*` and `--sand-*` are kept as aliases onto the one
   accent, because the design has one. */
:root {
  /* Warm ink — text, icons, solid CTA */
  --ink-900: #1E1D1B;   /* primary text (design: 41 uses) */
  --ink-800: #262421;   /* INK — dark fills, avatars, active nav */
  --ink-700: #37352F;
  --ink-600: #4A4844;   /* secondary text */
  --ink-500: #6B6862;
  --ink-400: #8B8983;   /* MUT — muted labels, meta */
  --ink-300: #A9A7A1;   /* eyebrows, placeholders */
  --ink-200: #BFBDB7;

  /* Paper & surfaces — warm off-whites */
  --paper:      #FFFFFF; /* card / raised surface */
  --canvas:     #FAFAF9; /* page background */
  --surface-1:  #FAFAF9; /* hover fill, subtle panel */
  --surface-2:  #F1F0ED; /* chips, nested fill */
  --surface-3:  #EDECE9; /* dividers inside a surface */

  /* Hairlines */
  --border:        #E6E5E1; /* default hairline — the design's commonest colour */
  --border-strong: #DCDBD7; /* emphasised divider, outlined control */

  /* Terracotta — the one accent (design: ACC = #A2603C) */
  --sky-700: #7E4A2E;
  --sky-600: #A2603C;
  --sky-500: #A2603C;
  --sky-400: #C08A66;
  --sky-200: #E6CDBB;
  --sky-100: #F6EEE8;   /* the accent tint behind selected nav and chips */
  --sky-50:  #FBF6F2;

  /* Sand — kept as an alias of the accent; the design has no second warm. */
  --sand-600: #96731C;
  --sand-500: #B08F35;
  --sand-200: #E8DCB4;
  --sand-100: #FBF1DC;
  --sand-50:  #FDF9EF;

  /* Cinematic canvas — the guest portal's dark hero */
  --cine-900: #14120F;
  --cine-800: #1E1D1B;
  --cine-700: #2A2724;
  --cine-mist: rgba(255, 255, 255, 0.72);

  /* Muted semantics, from the design's own status colours */
  --success-600: #5F7A52;   /* "Delivered", positive sentiment */
  --success-500: #6E8A60;
  --success-100: #EDF1EA;
  --danger-600:  #A5453F;
  --danger-500:  #B85751;
  --danger-100:  #F5E7E5;
  --warning-600: #96731C;   /* VIP gold */
  --warning-500: #B08F35;
  --warning-100: #FBF1DC;

  /* Fixed */
  --white: #FFFFFF;
  --black: #14120F;

  /* ── Legacy clay aliases → mapped to the accent so old refs never break ── */
  --clay-700: var(--sky-700);
  --clay-600: var(--sky-600);
  --clay-500: var(--sky-500);
  --clay-400: var(--sky-400);
  --clay-200: var(--sky-200);
  --clay-100: var(--sky-100);
  --clay-50:  var(--sky-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-600);
  --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-600);
  --accent-hover:    var(--sky-700);
  --accent-soft:     var(--sky-100);

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