/* ============================================================
   Pillar Clinic — Color Tokens
   Primary white · secondary cream/beige · black accent
   with a single champagne-gold line accent.
   ============================================================ */
:root {
  /* ---- Base palette ------------------------------------- */
  /* Paper / whites */
  --white:        #ffffff;
  --paper:        #fcf9f5;   /* warm off-white, default page */
  --paper-soft:   #faf5ef;

  /* Cream / beige — the brand's signature warmth */
  --cream-50:     #f6efe6;
  --cream-100:    #f0e6da;
  --cream-200:    #ecdfd6;   /* poster mid-tone */
  --cream-300:    #e2d3c4;
  --sand:         #d8c7b5;
  --taupe:        #c9bdb5;   /* soft shadow beige */

  /* Ink — black accent */
  --ink-900:      #1a1a1a;   /* primary black */
  --ink-800:      #232323;
  --ink-700:      #3a3735;
  --ink-500:      #6c655e;   /* muted body / captions */
  --ink-400:      #938a80;   /* disabled / placeholder */
  --ink-200:      #d7cec4;   /* hairline on cream */

  /* Champagne gold — accent line only, never fills */
  --gold-700:     #9a7e4e;
  --gold-500:     #c2a878;   /* primary accent */
  --gold-300:     #d9c6a3;
  --gold-100:     #efe5d3;

  /* Support — quiet status hues, desaturated to fit the palette */
  --success:      #5e7a5b;
  --success-soft: #e7ede4;
  --warning:      #b08a3e;
  --warning-soft: #f4ebd8;
  --danger:       #9a5b54;
  --danger-soft:  #f0e2df;

  /* ---- Semantic aliases --------------------------------- */
  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-cream:   var(--cream-100);
  --surface-inverse: var(--ink-900);
  --surface-sunken:  var(--cream-50);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-ink:   var(--paper);
  --text-on-cream: var(--ink-900);
  --text-accent:   var(--gold-700);

  /* Lines & borders */
  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-900);
  --border-gold:     var(--gold-500);
  --divider:         var(--ink-200);

  /* Accent */
  --accent:        var(--gold-500);
  --accent-strong: var(--gold-700);
  --focus-ring:    var(--gold-500);
}