/* ============================================================
   SH3PHERD · Design tokens — TIER 1: PRIMITIVES
   ------------------------------------------------------------
   The raw palette. These are the ONLY place a literal colour
   value is allowed to live. They are theme-INVARIANT: the same
   ink/teal/cloud values in dark and light — it is the semantic
   layer (semantic.css) that decides which primitive a role
   points to per theme.

   Never reference a --fold-ref-* token from a component.
   Components consume the semantic layer only.
   ============================================================ */

:root {
  /* ── Ink — the dark chrome family (deep blue-black) ───────────
     Ordered by depth: 950 is the darkest, 850 the lightest.      */
  --fold-ref-ink-950: #0a0e14; /* header bar               */
  --fold-ref-ink-925: #090d13; /* rail 1 · app menu        */
  --fold-ref-ink-900: #0c1018; /* rail 2 · workspace menu  */
  --fold-ref-ink-850: #11161e; /* page background          */
  --fold-ref-ink-800: #1f2733; /* raised card surface      */
  --fold-ref-ink-700: #28323f; /* raised hover surface     */

  /* ── Cloud — the light chrome family ──────────────────────────
     Ordered by depth too: 50 is the lightest, 200 the darkest.   */
  --fold-ref-white: #ffffff; /* header bar                  */
  --fold-ref-cloud-50: #f9fafb; /* rail 2 · workspace menu   */
  --fold-ref-cloud-100: #f4f5f7; /* page background          */
  --fold-ref-cloud-150: #f0f1f3; /* rail 1 · app menu        */

  /* ── Teal — the brand / primary family ────────────────────── */
  --fold-ref-teal-400: #2dd4d4; /* lightest — hover on dark    */
  --fold-ref-teal-500: #06a4a4; /* brand base (dark theme)     */
  --fold-ref-teal-550: #069090; /* muted — brand on light      */
  --fold-ref-teal-600: #057a7a; /* darkest — hover on light    */

  /* ── Amber — the warning family ───────────────────────────── */
  --fold-ref-amber-300: #e8b84a; /* light tint (dark theme)     */
  --fold-ref-amber-500: #d4a017; /* base (dark theme)           */
  --fold-ref-amber-550: #d4940e; /* light tint (light theme)    */
  --fold-ref-amber-700: #8f6508; /* warning-text on paper (4.8:1)     */
  --fold-ref-amber-600: #b8860b; /* base (light theme)          */

  /* ── Red — the alert family ───────────────────────────────── */
  --fold-ref-red-400: #e06450; /* light tint (dark theme)       */
  --fold-ref-red-450: #d4493a; /* light tint (light theme)      */
  --fold-ref-red-500: #c44230; /* base (dark theme)             */
  --fold-ref-red-600: #b33a2a; /* base (light theme)            */

  /* ── Purple — the info family ─────────────────────────────── */
  --fold-ref-purple-300: #b794f4; /* light tint (dark theme)    */
  --fold-ref-purple-400: #9f7aea; /* surface/border base (dark) */
  --fold-ref-purple-500: #7c5bbf; /* base (dark) · text (light) */
  --fold-ref-purple-600: #6c4ab6; /* base (light theme)         */

  /* ── Green — the success family ───────────────────────────── */
  --fold-ref-green-300: #4bd6a0; /* light tint (dark theme)      */
  --fold-ref-green-500: #1a9e6a; /* base (both themes)           */
  --fold-ref-green-700: #146b48; /* success-text on paper (6.0:1)     */
  --fold-ref-green-550: #38a169; /* light tint (light theme)     */

  /* ── Slate — the neutral text family ──────────────────────── */
  --fold-ref-slate-50: #eef1ff; /* primary text (dark theme)   */
  --fold-ref-slate-350: #9ca3af; /* faded text (light theme)    */
  --fold-ref-slate-400: #8892b0; /* secondary text (dark)       */
  --fold-ref-slate-450: #7b8496; /* faded — a UI role, 3.5:1 on paper */
  --fold-ref-slate-500: #5e6a86; /* muted text (dark)           */
  --fold-ref-slate-550: #6b7280; /* muted text (light)          */
  --fold-ref-slate-600: #5f6b7a; /* secondary text (light)      */
  --fold-ref-slate-650: #4a5468; /* secondary — 7.0:1 on paper        */
  --fold-ref-slate-700: #4a5470; /* faded text (dark theme)     */
  --fold-ref-slate-900: #1a1d23; /* primary text (light theme)  */

  /* ── Azure — a cyan, BUBBLY's info family ──────────────────────
     Moved bubbly's info off its violet brand's hue, the way a status
     that collides with the brand always must.                        */
  --fold-ref-azure-500: #0ea5e9; /* base — bubbly info          */

  /* ── Navy — the NAVI theme family ─────────────────────────────
     One corporate midnight-blue family serving both jobs: the brand
     on the light page (500/600) and the dark chrome behind it
     (800→950), so rails, header and primary are visibly related.
     300/400 are the tints readable ON the dark chrome.             */

  /* Graphite — the navi chrome (low-chroma blue-graphite). `950` is also the
     DARK ink every theme puts on a light status fill: amber and green are too
     bright to carry white, and a near-black reads softer than pure black. */
  --fold-ref-graphite-950: #141b2b; /* header — the deepest chrome surface */
  --fold-ref-graphite-900: #1a2336; /* rail 1 · app menu                   */
  --fold-ref-graphite-850: #1f2a40; /* rail 2 · workspace                  */
  --fold-ref-graphite-800: #29344e; /* raised / hover on the chrome        */
  --fold-ref-graphite-700: #3a4870; /* surface-band on the chrome          */

  /* Paper — the navi page (cool white, three real steps of depth). */
  --fold-ref-paper-0: #ffffff; /* card                                     */
  --fold-ref-paper-50: #fafbfc; /* sunken                                  */
  --fold-ref-paper-100: #f3f5f8; /* page                                   */
  --fold-ref-paper-200: #e6e9ef; /* hairline (solid border)                */
  --fold-ref-paper-300: #d3d8e2; /* marked border (field, divider)         */

  /* Signal — the navi brand, in two polarities: the 600/700 pair reads on the
     light page, the 200/300 pair on the dark chrome. A brand chosen against
     one ground is not readable on the other. */
  --fold-ref-signal-700: #2643aa; /* hover on the page · primary-text      */
  --fold-ref-signal-600: #3357d4; /* base on the page                      */
  --fold-ref-signal-300: #8fabff; /* base on the chrome                    */
  --fold-ref-signal-200: #b6c9ff; /* hover · primary-text on the chrome    */

  /* Navyink — the text ramp on the navi chrome, four steps. */
  --fold-ref-navyink-50: #f2f5fb;
  --fold-ref-navyink-200: #b9c4da;
  --fold-ref-navyink-300: #9aa7c2;
  --fold-ref-navyink-400: #8f9cb8;

  /* ── Ivory — the NAVI page ────────────────────────────────────
     White, off by two points of blue. The opposition is the point: a
     cool page beside a cool rail is merely consistent, where warm-on-
     cool is what makes navy read as navy — and it works at a very low
     dose. Any warmer and the page starts looking like cream, a whole
     warm theme rather than a warm page.                              */

  /* ── Bubble / Grape — the BUBBLY theme families ────────────────
     Festive light: soft lavender-white chrome and a joyful violet
     brand, rounded off. Text reuses slate, info reuses azure (cyan)
     so it never blurs into the violet brand.                       */
  --fold-ref-bubble-0: #ffffff; /* header · card · text on solid */
  --fold-ref-bubble-50: #faf7ff; /* rail 2 · workspace menu      */
  --fold-ref-bubble-100: #f4eefe; /* page background             */
  --fold-ref-bubble-150: #ebe1fd; /* rail 1 · app menu           */

  --fold-ref-grape-500: #a855f7; /* brand base                  */
  --fold-ref-grape-600: #9333ea; /* hover / strong              */
  --fold-ref-grape-700: #7e22ce; /* readable brand text         */

  /* ── Steel / Titanium — the TITAN theme families ──────────────
     Brushed titanium, light: a cool near-neutral steel ramp for the
     brushed silver page, the header + rails at its own tint, and the
     bright polished cards that float on it — plus a HEAT-anodized
     titanium brand, the copper-orange the metal takes when torched. */
  --fold-ref-steel-900: #1b1f24; /* graphite body text              */
  --fold-ref-steel-600: #566069; /* secondary text                 */
  --fold-ref-steel-500: #7c8894; /* muted text                     */
  --fold-ref-steel-400: #9aa6b1; /* faded text                     */
  --fold-ref-steel-300: #c0c8d0; /* solid brushed-steel border     */
  --fold-ref-steel-200: #d4dae1; /* brushed page ground            */
  --fold-ref-steel-150: #e2e7ec; /* header · rail 2 · hover · divider */
  --fold-ref-steel-100: #eef1f5; /* raised rail plate · sunken     */
  --fold-ref-steel-50: #f8fafc; /* bright polished card             */

  --fold-ref-titanium-700: #863810; /* brand text (burnt copper)    */
  --fold-ref-titanium-600: #a5451a; /* hover / strong               */
  --fold-ref-titanium-500: #c2521b; /* brand base (copper-orange · AA w/ white) */

  /* ── Pure black — pairs with white for neutral alpha overlays */
  --fold-ref-black: #000000;
}