/* TomFlow design tokens — bold, vibrant, minimal.
   Loud color, quiet layout: one vivid orange on a warm cream canvas, ink for
   text and primary actions, acid lime used rarely. Components use these
   variables only — no raw colors.
   Light by default; dark when the user picks it with the theme toggle
   (data-theme="dark" on <html>). */

:root {
  color-scheme: light;

  /* Brand */
  --ink: #121110;
  --pop: #d4f55a;     /* acid lime: highlights only, always with ink text */
  --on-pop: #121110;

  /* Color — light */
  --bg: #fbf3e6;      /* warm cream canvas (a touch softer than #FFF7EC, easier on the eyes) */
  --surface: #ffffff;
  --surface-2: #f6ecdc;
  --border: #e9e1d4;
  --border-strong: #d8cdbb;
  --text: #121110;
  --text-muted: #6e6a63;

  --accent: #ff5a1f;            /* vivid orange: the one loud color (fills, not body text) */
  --accent-hover: #ff7340;
  --accent-soft: #ffe6d9;
  --accent-ring: rgb(255 90 31 / 0.35);
  --accent-text: #c2410c;       /* orange for text: #FF5A1F is too light on cream */
  --on-accent: #121110;         /* text on orange: ink passes AA, white does not */

  --primary-bg: var(--ink);     /* primary buttons and the active nav pill */
  --primary-text: #fbf3e6;
  --primary-hover: #2a2825;

  --success: #17803f;
  --success-soft: var(--pop);   /* "Sent" badges: lime with ink text */
  --success-on-soft: var(--on-pop);
  --warning: #9a5b00;
  --warning-soft: #fdf0cf;
  --danger: #c42f34;            /* #E5484D darkened for AA text */
  --danger-soft: #fde4e4;

  --overlay: rgb(18 17 16 / 0.4);
  --shadow-pop: 0 8px 24px rgb(18 17 16 / 0.1);
  --shadow-hard: 4px 4px 0 var(--ink);   /* tactile offset shadow: phone preview only */

  /* Type */
  --font-display: "Bricolage Grotesque", "Geist", sans-serif;
  --font-ui: "Geist", "Inter Tight", -apple-system, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Kept one step larger than the brief's 13/15 scale, per earlier feedback.
     Names keep their role: --text-14 is the base UI size. */
  --text-12: 13px;
  --text-13: 14px;
  --text-14: 16px;
  --text-16: 18px;
  --text-20: 24px;
  --text-28: 36px;
  --text-40: 56px;

  /* Shape */
  --line: 1.5px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Layout */
  --sidebar-width: 256px;
  --sidebar-collapsed: 68px;
  --content-max: 1440px;
  --control-height: 40px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 170ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #121110;
  --surface: #1b1a18;
  --surface-2: #24221f;
  --border: #2c2a27;
  --border-strong: #3d3a35;
  --text: #f5f1ea;
  --text-muted: #a39e94;

  --accent-soft: #3a1c10;
  --accent-text: #ff7a47;
  --on-accent: #121110;

  --primary-bg: #f5f1ea;        /* ink buttons would vanish on a dark canvas */
  --primary-text: #121110;
  --primary-hover: #ffffff;

  --success: #6fd38f;
  --warning: #f2b544;
  --warning-soft: #2e2410;
  --danger: #ff7b7f;
  --danger-soft: #3a1618;

  --overlay: rgb(0 0 0 / 0.55);
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.4);
  --shadow-hard: 4px 4px 0 var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
}