/* 1DevTool Stoic Light (1devtool-stoic-light) — generated by design-kit/scripts/tokens.mjs
   Mood: focused, technical, quiet, confident
   Signature: Ink type on warm paper-grey with one blue action; big framed real app screenshots carry every section; mono eyebrows, labels and numbers; 1px grey hairlines instead of cards.
   Fonts: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap">
   Use ONLY these variables for color, type, space, radius, shadow, motion. */
/* Light theme — explicit toggle wins; otherwise the OS preference applies. */
[data-theme="light"] {
  color-scheme: light;

  /* color roles */
  --color-bg: #F7F7F5;
  --color-surface: #E2E3E5;
  --color-text: #242628;
  --color-muted: #565E68;
  --color-border: #C7CACE;
  --color-accent: #2563EB;          /* fills: primary buttons, selected states */
  --color-on-accent: #FFFFFF;         /* text on accent fills */
  --color-accent-text: #2563EB;     /* links and accent-colored text on bg */
  --color-accent-soft: #E1ECFE;     /* tinted backgrounds */
  --color-success: #1C59E0;
  --color-warning: #915809;
  --color-danger: #B42318;
  --color-on-danger: #FFFFFF;
  --color-deepest: #FDFDFC;        /* brand: elevated paper (frame chrome) */
  --color-elevated: #FDFDFC;       /* brand: raised surface */
  --color-accent-hover: #1D4ED8;   /* brand: Stoic Light accent hover */
  --color-focus: #2563EB;
  --accent-50: #F3F7FE;
  --accent-100: #E1ECFE;
  --accent-200: #C4D8FF;
  --accent-300: #9CBEFF;
  --accent-400: #6F9FFE;
  --accent-500: #407DFE;
  --accent-600: #2662E5;
  --accent-700: #174CBF;
  --accent-800: #0D3896;
  --accent-900: #06266D;

  /* type */
  --font-heading: "Space Grotesk", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: "Space Grotesk", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: "Fira Code", ui-monospace, Menlo, monospace;
  --step-n2: 0.75rem;   /* 12px */
  --step-n1: 0.8125rem;   /* 13px */
  --step-0: 1rem;   /* 16px */
  --step-1: 1.25rem;   /* 20px */
  --step-2: 1.5625rem;   /* 25px */
  --step-3: 1.9375rem;   /* 31px */
  --step-4: 2.4375rem;   /* 39px */
  --step-5: 3.0625rem;   /* 49px */
  --step-6: 3.8125rem;   /* 61px */
  --weight-heading: 700;
  --tracking-heading: -0.03em;
  --leading-body: 1.55;
  --leading-heading: 1.12;
  --measure: 65ch;

  /* space (use only these) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* shape and depth */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --radius-phone: 44px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 32px rgb(0 0 0 / 0.08);

  /* controls */
  --control-sm: 40px;
  --control-md: 44px;
  --control-lg: 52px;

  /* motion */
  --dur-fast: 160ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;

  /* color roles */
  --color-bg: #F7F7F5;
  --color-surface: #E2E3E5;
  --color-text: #242628;
  --color-muted: #565E68;
  --color-border: #C7CACE;
  --color-accent: #2563EB;          /* fills: primary buttons, selected states */
  --color-on-accent: #FFFFFF;         /* text on accent fills */
  --color-accent-text: #2563EB;     /* links and accent-colored text on bg */
  --color-accent-soft: #E1ECFE;     /* tinted backgrounds */
  --color-success: #1C59E0;
  --color-warning: #915809;
  --color-danger: #B42318;
  --color-on-danger: #FFFFFF;
  --color-deepest: #FDFDFC;        /* brand: elevated paper (frame chrome) */
  --color-elevated: #FDFDFC;       /* brand: raised surface */
  --color-accent-hover: #1D4ED8;   /* brand: Stoic Light accent hover */
  --color-focus: #2563EB;
  --accent-50: #F3F7FE;
  --accent-100: #E1ECFE;
  --accent-200: #C4D8FF;
  --accent-300: #9CBEFF;
  --accent-400: #6F9FFE;
  --accent-500: #407DFE;
  --accent-600: #2662E5;
  --accent-700: #174CBF;
  --accent-800: #0D3896;
  --accent-900: #06266D;

  /* type */
  --font-heading: "Space Grotesk", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: "Space Grotesk", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: "Fira Code", ui-monospace, Menlo, monospace;
  --step-n2: 0.75rem;   /* 12px */
  --step-n1: 0.8125rem;   /* 13px */
  --step-0: 1rem;   /* 16px */
  --step-1: 1.25rem;   /* 20px */
  --step-2: 1.5625rem;   /* 25px */
  --step-3: 1.9375rem;   /* 31px */
  --step-4: 2.4375rem;   /* 39px */
  --step-5: 3.0625rem;   /* 49px */
  --step-6: 3.8125rem;   /* 61px */
  --weight-heading: 700;
  --tracking-heading: -0.03em;
  --leading-body: 1.55;
  --leading-heading: 1.12;
  --measure: 65ch;

  /* space (use only these) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* shape and depth */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --radius-phone: 44px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 32px rgb(0 0 0 / 0.08);

  /* controls */
  --control-sm: 40px;
  --control-md: 44px;
  --control-lg: 52px;

  /* motion */
  --dur-fast: 160ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}
}