/* ------------------------------------------------------------------
   Coco Beauty Salon — Color tokens
   One cocoa accent. Warm creams and deep espressos. No gradients.
------------------------------------------------------------------ */

:root {
  /* --- Brand & accent --- */
  --color-primary: #6B3F2A;            /* Primary Cocoa — the single interactive color */
  --color-primary-focus: #C9A55C;      /* Champagne — keyboard focus ring only */
  --color-primary-on-dark: #E8C7BA;    /* Nude Blush — in-copy links on dark tiles */
  --color-on-primary: #FFF8F0;         /* text on the cocoa pill */

  /* --- Surface --- */
  --color-canvas: #FFF8F0;             /* Warm Cream — dominant canvas */
  --color-canvas-parchment: #F4E8DD;   /* Soft Beige Parchment — alt tiles, footer */
  --color-surface-pearl: #FFFCF8;      /* Pearl White — ghost button fill */
  --color-surface-tile-1: #24160F;     /* Deep Espresso Tile 1 — primary dark tile */
  --color-surface-tile-2: #2F1C13;     /* Deep Espresso Tile 2 — micro-lighter */
  --color-surface-tile-3: #1B100B;     /* Deep Espresso Tile 3 — micro-darker */
  --color-surface-black: #120A06;      /* Coco Black — nav bar, video void */
  --color-surface-chip-translucent: #E8C7BA; /* Nude chip base (used @ ~64% alpha) */

  /* --- Text --- */
  --color-ink: #24160F;                /* Deep Espresso Ink — headlines, body */
  --color-body: #24160F;               /* body (same as ink) */
  --color-body-on-dark: #FFF8F0;       /* text on dark tiles + nav */
  --color-body-muted: #E8C7BA;         /* secondary copy on dark tiles */
  --color-ink-muted-80: #4B2F21;       /* body on pearl button surface */
  --color-ink-muted-48: #9B7B68;       /* disabled text, legal fine-print */

  /* --- Hairlines & borders --- */
  --color-divider-soft: #EAD8CB;       /* secondary-button ring tone */
  --color-hairline: #D8BFAE;           /* 1px hairline on cards/chips */

  /* --- Production alpha values --- */
  --color-chip-fill: rgba(232, 199, 186, 0.64);  /* translucent nude chip */
  --color-border-faint: rgba(36, 22, 15, 0.08);  /* soft hairline border */
  --color-ring-soft: rgba(36, 22, 15, 0.04);      /* divider-soft as ring */
}