/* Design tokens — Workflow Twin demo prototype.
   Sourced from DESIGN_GUIDELINES_Claude.md. Non-standard values that Tailwind
   doesn't carry cleanly (animation durations, custom spacings) live here. */

:root {
  /* ========================================================================
     Twin identity — amber.
     Reserved for twin-specific elements. Never use amber for generic emphasis.
     ======================================================================== */
  --color-amber-50:  #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;

  /* ========================================================================
     Twin actions / primary — blue.
     Used for twin action labels, data-entity pills, primary buttons.
     ======================================================================== */
  --color-blue-50:  #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;

  /* ========================================================================
     Confidence / success / connection — green.
     ======================================================================== */
  --color-green-50:  #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;

  /* Semantic colors — red, orange, yellow, purple. */
  --color-red-50:    #fef2f2;
  --color-red-100:   #fee2e2;
  --color-red-600:   #dc2626;
  --color-red-800:   #991b1b;

  --color-orange-50:  #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-600: #ea580c;
  --color-orange-800: #9a3412;

  --color-yellow-50:  #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-600: #ca8a04;
  --color-yellow-800: #854d0e;

  --color-purple-100: #f3e8ff;
  --color-purple-600: #9333ea;

  /* Neutrals. */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --color-white:    #ffffff;

  --color-app-bg: #f8f9fb;

  /* Swimlane pastels — for cross-workflow lane backgrounds. */
  --lane-soft-blue:  #eff6ff;
  --lane-cream:      #fef9e7;
  --lane-lavender:   #f5f3ff;
  --lane-mint:       #ecfdf5;
  --lane-soft-pink:  #fef2f2;

  /* ========================================================================
     Typography scale.
     Calibrated to the real product — earlier specs understated; size up.
     ======================================================================== */
  --text-hero:        2.25rem;   /* 36px — landing page titles */
  --text-section:     1.5rem;    /* 24px — section titles */
  --text-card-title:  1.125rem;  /* 18px — card titles */
  --text-body:        1rem;      /* 16px — body */
  --text-small:       0.875rem;  /* 14px — labels / secondary */
  --text-meta:        0.75rem;   /* 12px — metadata / timestamps */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* ========================================================================
     Animation durations.
     ======================================================================== */
  --pulse-investigating:    1s;       /* Investigating sparkle pulse cycle */
  --pulse-cycle:            2.5s;     /* slower ambient pulse */
  --materialize-fade:       300ms;    /* content phase fade-in */
  --materialize-stagger:    400ms;    /* between reasoning bullets */
  --materialize-generating: 1300ms;   /* generating phase duration */
  --transition-standard:    150ms;    /* default hover/state */
  --trace-card-fade:        350ms;

  /* ========================================================================
     Layout primitives.
     ======================================================================== */
  --radius-sm:  4px;
  --radius:     6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);

  /* Spine / divider widths. */
  --border-thin: 1px;
  --accent-stripe: 4px;     /* twin-output container left accent */
}