/* =====================================================================
   DIGITAL FLOW — BRAND SYSTEM 2026: CANONICAL DESIGN TOKENS
   Specification: brand-system/brand-book/machine/design-tokens.json
   Expression Mode: DARK-FIRST (Carbon Dominant Foundation)
   ===================================================================== */

:root {
  /* Canonical Foundation + Signal Palette */
  --df-cream: #F4F0E7;
  --df-ink: #1D1D1B;
  --df-carbon: #1C1D1B;
  --df-warm-white: #F2EEE6;
  --df-electric-yellow: #F2FF24;
  --df-acid-green: #B6FF2E;
  --df-electric-orange: #FF6A1A;
  --df-hot-pink: #FF3D9A;

  /* Global Foundations (Carbon #1C1D1B as Dominant Global Base) */
  --df-surface-base: #1C1D1B;          /* Pure Carbon (dominant global foundation) */
  --df-surface-ink: #1D1D1B;           /* Ink base */
  --df-surface-inset: #161715;         /* Recessed frame / input / deep backing */
  --df-surface-deep: #181917;          /* Deep Carbon floor */
  --df-surface-footer: #141412;        /* Grounding footer floor */
  --df-surface-card: #252623;          /* Raised Mineral card */
  --df-surface-card-hover: #2E2F2B;    /* Raised card hover */
  --df-surface-elevated: #282926;      /* Active / Elevated container */
  --df-surface-dossier: #20211E;       /* Mineral Dossier surface (Meet Digital Flow) */

  /* Text Color System (Zero Pure White: Warm White & Cream Hierarchy) */
  --df-text-headline: #F2EEE6;         /* Warm White (headlines) */
  --df-text-primary: #F2EEE6;          /* Warm White (primary copy) */
  --df-text-secondary: #F4F0E7;        /* Cream (secondary copy & labels) */
  --df-text-muted: rgba(244, 240, 231, 0.76); /* Cream muted (support copy) */
  --df-text-faint: rgba(244, 240, 231, 0.48); /* Cream faint (microcopy & captions) */

  /* Subtle Borders & Dividers */
  --df-border: rgba(244, 240, 231, 0.12);
  --df-border-frame: rgba(244, 240, 231, 0.12);
  --df-border-active: rgba(244, 240, 231, 0.28);
  --df-border-subtle: rgba(244, 240, 231, 0.08);

  /* Canonical Brand Signals */
  --df-signal-green: #B6FF2E;
  --df-signal-yellow: #F2FF24;
  --df-signal-orange: #FF6A1A;
  --df-signal-pink: #FF3D9A;

  /* Contrast-Safe Link/Text Tokens */
  --df-signal-green-contrast: #477300;
  --df-signal-yellow-contrast: #756A00;
  --df-signal-orange-contrast: #A43A00;
  --df-signal-pink-contrast: #A8165C;

  /* Typography Families */
  --df-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --df-font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
}