/*
 * tokens.css
 * ==========
 * Design tokens for ShiftTidy — "Phase Bands" redesign (cool slate + blue).
 *
 * These CSS custom properties are the single source of truth for colours, radii
 * and shadows. Every component stylesheet references them via var(--token), so
 * retheming is a one-file edit. Values come straight from the design handoff
 * (DESIGN_HANDOFF / the Phase-Bands README) so fidelity is exact.
 *
 * Two naming systems coexist on purpose:
 *   1. The codebase's semantic names (--bg, --primary, --confirmed-*, --morning-*…)
 *      — every existing screen already references these, so remapping their VALUES
 *      reskins the whole app at once without touching that CSS.
 *   2. The handoff's short aliases (--ink, --line, --accent, --mAcc, --cAcc…) used
 *      by the new band components. Both point at the same hexes.
 */

:root {
  /* ===== Handoff aliases (new components reference these) ===== */
  --ink: #1C2433;
  --line: #E4E8EE;
  --line2: #EEF1F5;
  /* Week-view day-column divider: a darker cool-gray alpha tint so it stays
     visible on every phase band's tint while reading as a clean hairline. */
  --wk-divider: rgba(40, 55, 85, .16);
  --accent: #2F5BD7;
  --accentD: #2348B8;
  --accentT: #EAF0FC;
  /* phase: accent / tint / text / border-tint */
  --mAcc: #C9790F; --mTint: #FBEACE; --mText: #7E4A06; --mBorder: #F2DBB0;
  --nAcc: #1E83C7; --nTint: #D8EAF8; --nText: #125982; --nBorder: #BFDCF1;
  --eAcc: #7A4ED2; --eTint: #E8DCFB; --eText: #43269A; --eBorder: #D9C5F3;
  --gAcc: #3C5599; --gTint: #DEE6F5; --gText: #26396F; --gBorder: #C9D3EA;
  /* phase rail gradients (135°, light→dark so white text stays legible) */
  --mGrad: linear-gradient(135deg, #F2A81C 0%, #CE7A0E 100%);
  --nGrad: linear-gradient(135deg, #33A0E0 0%, #1773B8 100%);
  --eGrad: linear-gradient(135deg, #C0689E 0%, #7A4ED2 58%, #5A3BA8 100%);
  --gGrad: linear-gradient(135deg, #3E4F8C 0%, #222F5C 100%);
  /* status: accent / tint / text */
  --cAcc: #1F9D6B; --cTint: #E7F4EE; --cText: #1A7A52;
  --pAcc: #DD9322; --pTint: #FBF1DD; --pText: #896010;
  --rAcc: #3B73D8; --rTint: #E8F0FC; --rText: #2A57AE;
  --sAcc: #DA5B4D; --sTint: #FBEAE6; --sText: #A8412C;

  /* ===== Surfaces & borders (semantic) ===== */
  --bg: #F3F5F8;            /* page background (cool light gray) */
  --surface: #FFFFFF;       /* cards, header, grids, drawers */
  --surface-warm: #F3F5F8;  /* input/control fills (now cool, not warm) */
  --border: #E4E8EE;        /* primary hairline border */
  --border-2: #EEF1F5;      /* inner/lighter grid border */
  --border-3: #EEF1F5;      /* faint divider */

  /* ===== Text ===== */
  --text: #1C2433;          /* strong text */
  --muted: #6B7585;         /* secondary text, times */
  --faint: #9AA3B2;         /* labels */
  --faint-2: #9AA3B2;       /* very faint */
  --placeholder: #9AA3B2;   /* placeholders / empty-state text */

  /* ===== Primary / accent (brand blue) ===== */
  --primary: #2F5BD7;
  --primary-hover: #2348B8;
  --primary-soft: #EAF0FC;
  --primary-shadow: rgba(47, 91, 215, .25);

  /* ===== Status: confirmed (green) ===== */
  --confirmed-dot: #1F9D6B;
  --confirmed-bg: #E7F4EE;
  --confirmed-border: #C2E6D4;
  --confirmed-text: #1A7A52;

  /* ===== Status: pending (amber) ===== */
  --pending-dot: #DD9322;
  --pending-bg: #FBF1DD;
  --pending-border: #F2DCA8;
  --pending-text: #896010;

  /* ===== Status: requested (blue) ===== */
  --requested-dot: #3B73D8;
  --requested-bg: #E8F0FC;
  --requested-border: #C3D8F5;
  --requested-text: #2A57AE;

  /* ===== Status: swap (coral) ===== */
  --swap-dot: #DA5B4D;
  --swap-bg: #FBEAE6;
  --swap-border: #F3C8BF;
  --swap-text: #A8412C;

  /* ===== Day-phase accents (morning / noon / evening / night) ===== */
  /* Each phase ships a solid accent, a tint (band/cell bg), text colour and a
     135° gradient for the band rail. Values from the Phase-Bands handoff. */
  /* Morning — amber */
  --morning-dot: #C9790F;
  --morning-bg: #FBEACE;
  --morning-border: #F2DBB0;
  --morning-text: #7E4A06;
  --morning-pill: #FBEACE;
  --morning-count: #7E4A06;
  --morning-grad: linear-gradient(135deg, #F2A81C 0%, #CE7A0E 100%);

  /* Noon — blue */
  --noon-dot: #1E83C7;
  --noon-bg: #D8EAF8;
  --noon-border: #BFDCF1;
  --noon-text: #125982;
  --noon-pill: #D8EAF8;
  --noon-count: #125982;
  --noon-grad: linear-gradient(135deg, #33A0E0 0%, #1773B8 100%);

  /* Evening — violet */
  --evening-dot: #7A4ED2;
  --evening-bg: #E8DCFB;
  --evening-border: #D9C5F3;
  --evening-text: #43269A;
  --evening-pill: #E8DCFB;
  --evening-count: #43269A;
  --evening-grad: linear-gradient(135deg, #C0689E 0%, #7A4ED2 58%, #5A3BA8 100%);

  /* Night — slate */
  --night-dot: #3C5599;
  --night-bg: #DEE6F5;
  --night-border: #C9D3EA;
  --night-text: #26396F;
  --night-pill: #DEE6F5;
  --night-count: #26396F;
  --night-grad: linear-gradient(135deg, #3E4F8C 0%, #222F5C 100%);

  /* ===== Danger (destructive actions) ===== */
  --danger-text: #A8412C;
  --danger-border: #F3C8BF;
  --danger-bg: #FBEAE6;

  /* ===== Radii ===== */
  --r-pill: 6px;        /* status pills / phase chips: 5–7 */
  --r-input: 9px;       /* inputs / buttons: 8–10 */
  --r-card: 9px;        /* cards */
  --r-section: 11px;    /* phase sections in drawers */
  --r-container: 13px;  /* popovers */
  --r-modal: 16px;      /* drawers / modal */

  /* ===== Shadows ===== */
  --shadow-card: 0 1px 2px rgba(20, 30, 50, .05);
  --shadow-card-hover: 0 4px 13px rgba(20, 30, 50, .11);
  --shadow-primary: 0 2px 8px rgba(47, 91, 215, .25);
  --shadow-modal: 0 24px 70px rgba(20, 30, 50, .30);
  --shadow-popover: 0 16px 44px rgba(20, 30, 50, .16);
  --shadow-drawer: 14px 0 44px rgba(20, 30, 50, .20);

  /* ===== Type ===== */
  --font: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
}