/* ==========================================================================
   TodoXMock — shared design tokens
   Extracted verbatim from css/landing.css so every page (landing, setup,
   dashboard) renders from exactly one source of truth. landing.css is NOT
   modified and does not load this file.
   ========================================================================== */

:root {
  --primary: #2563EB;
  --primary-600: #1D4ED8;
  --primary-700: #1E40AF;
  --primary-400: #3B82F6;
  --primary-soft: #EFF6FF;
  --primary-line: rgba(37, 99, 235, .20);
  --blue-border: #BFDBFE;

  --ink: #0F172A;          /* headings  */
  --muted: #475569;        /* secondary */
  --muted-2: #64748B;      /* tertiary  */
  --bg: #F8FAFC;
  --bg-alt: #F1F5F9;
  --card: #FFFFFF;
  --line: #E2E8F0;         /* card border */
  --line-2: #EEF2F7;
  --chip: #F1F5F9;

  --btn-a: #2563EB;          /* primary button gradient (white label) */
  --btn-b: #1D4ED8;
  --btn-a-h: #1D4ED8;        /* primary button gradient — hover */
  --btn-b-h: #1E40AF;

  --accent-text: #2563EB;    /* blue used as TEXT on light surfaces */
  --accent-strong: #1D4ED8;  /* darker blue for small blue text     */
  --outline-fg: #1D4ED8;     /* secondary button label              */

  --ok: #059669;
  --warn: #F59E0B;
  --err: #EF4444;

  --r-btn: 10px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 16px;
  --r-xl: 22px;
  --pill: 999px;

  --sh-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --sh-sm: 0 2px 8px rgba(15, 23, 42, .05);
  --sh: 0 4px 20px rgba(15, 23, 42, .06);      /* card */
  --sh-md: 0 10px 28px rgba(15, 23, 42, .08);
  --sh-lg: 0 16px 40px rgba(15, 23, 42, .10);
  --sh-xl: 0 28px 64px rgba(15, 23, 42, .14);  /* device */
  --sh-blue: 0 10px 26px rgba(37, 99, 235, .28);

  --grid-line: rgba(15, 23, 42, .045);
  --glow-1: rgba(37, 99, 235, .13);
  --glow-2: rgba(59, 130, 246, .10);

  --ease: cubic-bezier(.2, .7, .25, 1);
  --nav-h: 72px;
  --wrap: 1160px;

  --hand: "Segoe Script", "Bradley Hand", "Comic Sans MS", "Apple Chancery", cursive;
}

html[data-theme="dark"] {
  --primary: #3B82F6;
  --primary-600: #2563EB;
  --primary-400: #60A5FA;
  --primary-soft: rgba(59, 130, 246, .13);
  --primary-line: rgba(96, 165, 250, .30);
  --blue-border: rgba(96, 165, 250, .40);

  --ink: #F1F5F9;
  --muted: #A3B3C9;
  --muted-2: #8B9BB4;
  --bg: #0A1020;
  --bg-alt: #0C1424;
  --card: #0F1728;
  --line: #1F2B44;
  --line-2: #182338;
  --chip: #16223A;

  --btn-a: #2563EB;
  --btn-b: #1D4ED8;
  --btn-a-h: #1D4ED8;
  --btn-b-h: #1E40AF;

  --accent-text: #7DAEF7;
  --accent-strong: #7DAEF7;
  --outline-fg: #7DAEF7;
  --primary-700: #BFDBFE;

  --ok: #34D399;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --sh: 0 4px 20px rgba(0, 0, 0, .40);
  --sh-md: 0 10px 28px rgba(0, 0, 0, .42);
  --sh-lg: 0 16px 40px rgba(0, 0, 0, .48);
  --sh-xl: 0 28px 64px rgba(0, 0, 0, .55);
  --sh-blue: 0 10px 26px rgba(37, 99, 235, .45);

  --grid-line: rgba(148, 180, 255, .07);
  --glow-1: rgba(59, 130, 246, .18);
  --glow-2: rgba(37, 99, 235, .12);
}