/* =========================================================================
   DigiFlux — Design Tokens
   ========================================================================= */

:root {
  /* ---------- Brand Primary ---------- */
  --df-blue-deep:    #1B4DA8;   /* Logo "Digi" — primary */
  --df-blue-bright:  #2E86FF;   /* Accent, links */
  --df-orange:       #F47B20;   /* Logo "Flux" — accent */
  --df-amber:        #FFA94D;   /* Hover, warm accent */

  /* ---------- Stage Accents (5 phases) ---------- */
  --df-think:        #2E86FF;
  --df-dialogue:     #7DBA28;
  --df-do:           #F47B20;
  --df-research:     #1B4DA8;
  --df-reading:      #E74C3C;

  /* Stage accents — 10% opacity tints (for chip backgrounds) */
  --df-think-tint:     rgba(46, 134, 255, 0.10);
  --df-dialogue-tint:  rgba(125, 186, 40, 0.10);
  --df-do-tint:        rgba(244, 123, 32, 0.10);
  --df-research-tint:  rgba(27, 77, 168, 0.10);
  --df-reading-tint:   rgba(231, 76, 60, 0.10);

  /* ---------- Neutrals ---------- */
  --df-navy:         #0F1B3D;
  --df-navy-darker:  #0A1230;
  --df-gray-100:     #F4F6FB;
  --df-gray-200:     #E5E8F0;
  --df-gray-500:     #5A6280;
  --df-gray-700:     #2A3050;
  --df-white:        #FFFFFF;

  /* ---------- Typography ---------- */
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, sans-serif;

  --fs-body:      1rem;          /* mobile body */
  --fs-body-lg:   1.0625rem;     /* desktop body */
  --lh-body:      1.6;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: 1rem;
  --header-h:      72px;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 27, 61, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 27, 61, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 27, 61, 0.12);
  --shadow-header: 0 2px 12px rgba(15, 27, 61, 0.08);

  /* ---------- Easing & Transitions ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms var(--ease-out);
  --t-med:  250ms var(--ease-out);
  --t-slow: 400ms var(--ease-out);

  /* ---------- Z-Index ---------- */
  --z-header:   100;
  --z-overlay:  200;
  --z-modal:    300;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
  }
}