/* ============================================================
   Cocoa — color tokens
   The pastel pixel-art palette shared by every Cocoa app.
   Ported verbatim from Reccoo's App.xaml ResourceDictionary.
   Rule from the source: "pick from these colors instead of
   inventing new ones."

   Every hue has up to three steps:
     base  — the flat fill
     deep  — the 1-shade-darker edge / pressed / bevel stripe
     soft  — the tinted wash for hover fills and highlight panels
   ============================================================ */

:root {
  /* ---- Ink (text + every border, in order of weight) ---- */
  --ink: #4a3c5c;         /* default ink            (InkColor)     */
  --ink-dark: #3a2f4a;    /* borders, shadows, body (InkDarkColor) */
  --ink-soft: #7a6a8a;    /* muted labels, meta     (InkSoftColor) */

  /* ---- Cream / paper (warm backgrounds) ---- */
  --cream: #f6ecd6;       /* app body background    (CreamColor)     */
  --cream-deep: #ecdcb8;  /* empty meter cells, wells (CreamDeepColor) */
  --paper: #fff8e7;       /* panel + card surface   (PaperColor)     */

  /* ---- Coral — the PRIMARY accent ---- */
  --coral: #f5a598;       /* title bars, primary btn (CoralColor)    */
  --coral-deep: #e87f6e;  /* pressed edge, hot bars (CoralDeepColor) */
  --coral-soft: #ffd6cc;  /* highlight panels, hover (CoralSoftColor) */

  /* ---- Mint — positive actions + data viz ---- */
  --mint: #b9e4c9;        /* positive fills, tape   (MintColor)      */
  --mint-deep: #87caa4;   /* waveform base, progress (MintDeepColor) */
  --mint-soft: #dcf2e4;   /* mint wash              (MintSoftColor)  */

  /* ---- Lilac — toggles + selection ---- */
  --lilac: #c9b8e8;       /* selected segment, tape (LilacColor)     */
  --lilac-deep: #a48dd0;  /* selected edge, paused  (LilacDeepColor) */
  --lilac-soft: #e8dff5;  /* lilac wash             (LilacSoftColor) */

  /* ---- Gold — small highlights + mid data ---- */
  --gold: #ffd97a;        /* sparkles, mid meter    (GoldColor)      */
  --gold-deep: #e8b94a;   /* gold edge              (GoldDeepColor)  */

  /* =========================================================
     Semantic aliases — reach for these in components.
     ========================================================= */

  /* Accent = coral throughout the brand */
  --accent: var(--coral);
  --accent-deep: var(--coral-deep);
  --accent-soft: var(--coral-soft);

  /* Surfaces */
  --bg: var(--cream);              /* window / screen background   */
  --surface: var(--paper);         /* panels, cards                */
  --surface-sunken: var(--cream);  /* wells, list backdrops        */
  --surface-well: var(--cream-deep); /* deepest recessed fills     */

  /* Text */
  --text: var(--ink-dark);         /* headings + body              */
  --text-muted: var(--ink-soft);   /* labels, meta, hints          */
  --text-on-accent: var(--ink-dark); /* ink reads on every pastel  */

  /* Lines */
  --border: var(--ink-dark);       /* every hard pixel border      */

  /* Roles */
  --positive: var(--mint);         /* go / confirm / record-ready  */
  --positive-deep: var(--mint-deep);
  --selection: var(--lilac);       /* toggles, chosen state        */
  --selection-deep: var(--lilac-deep);
  --paused: var(--lilac-deep);     /* paused status                */
  --highlight: var(--gold);        /* accents, stars               */
  --highlight-deep: var(--gold-deep);

  /* Meter gradient — low -> mid -> hot (mint -> gold -> coral).
     Used by waveforms and level meters across the family. */
  --meter-low: var(--mint-deep);
  --meter-mid: var(--gold);
  --meter-hot: var(--coral-deep);

  /* The 50%-white top-edge highlight stripe that sits inside
     every raised surface (2-3px tall). */
  --edge-highlight: rgba(255, 255, 255, 0.5);
}