/* tokens.css — design tokens. Warm "paper" palette, Outfit/Figtree type, deep-green primary and
   soft layered shadows, adapted from the project's Lovable UI study. Light theme only; every other
   stylesheet reads these custom properties. Colours are sRGB hex (converted from the study's oklch)
   so they render everywhere and are testable. */
:root {
  color-scheme: light;

  /* Quadrant soft fills / strong borders (border = the icon/accent colour).
     Fills are the exact Lovable card backgrounds: Do now / Schedule / Delegate / Drop. */
  --red-fill: #fdede8;
  --red: #d13e38;
  --yellow-fill: #fef2de;
  --yellow: #e1901f;
  --blue-fill: #e8f4fb;
  --blue: #2382ba;
  --gray-fill: #f5f3ed;
  --gray: #877f73;

  /* Calendar green (one stripe per done task) + today + trays */
  --green-fill: #79d3a1;
  --green-stripe: #2ba162;
  --green: #1f8f57;
  --today: #3d8bff;
  --tray: #eceae1;
  --border: #e2ded3;

  /* Text & surfaces (warm paper) */
  --ink: #241e16;
  --muted: #6f685c;
  --card-border: #d9d4c8;
  --bg: #f8f7f1;
  --surface: #fefdfa;
  --surface-2: #f2f0e7;
  --line: #e8e5db;
  --line-strong: #d8d3c8;
  --hover: #f2f0e7;
  --accent: #005c44;
  --focus: #2ba162;
  --warning-bg: #fff4dc;
  --warning-line: #f0d79a;

  /* Primary action (deep green) */
  --primary: #005c44;
  --primary-hover: #0070534d; /* only used via color-mix fallbacks */
  --primary-fg: #fbfaf6;

  /* Speech bubbles (verbatim board elements) */
  --bubble-khaki: #b9b098;
  --bubble-green: #cdf4d3;
  --bubble-green-border: #4cd964;
  --bubble-dark: #33302a;

  /* Action buttons (fast organize) */
  --play: #2ba162;
  --forward: #e1901f;

  /* Typography */
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Radii (soft, rounded) */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows (warm, layered) */
  --shadow-sm: 0 1px 2px rgba(36, 30, 22, 0.05), 0 8px 24px -14px rgba(36, 30, 22, 0.16);
  --shadow-md: 0 2px 4px rgba(36, 30, 22, 0.06), 0 18px 40px -20px rgba(36, 30, 22, 0.24);
  --shadow-lg: 0 8px 20px rgba(36, 30, 22, 0.10), 0 30px 60px -24px rgba(36, 30, 22, 0.30);

  /* Motion */
  --dur: 250ms;
  --dur-fast: 120ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Layout */
  --content-max: 1040px;
  --header-h: 60px;
  --touch: 44px;

  /* Layers (tips stay below the sticky header so a scrolled bubble never paints over it) */
  --z-bubble: 10;
  --z-header: 20;
  --z-popover: 40;
  --z-toast: 50;
  --z-modal: 60;
}