/* ==========================================================================
   Telegram Multi-Account Scheduler — Design Tokens
   Neutral, premium operator palette (Apple/Shopify-admin inspired) with a
   single system-blue accent. All UI values derive from these custom props.
   Semantic text colors are darkened for AA contrast on their sub surfaces.
   ========================================================================== */

:root {
  /* ---------------- Typography ---------------- */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, "Cascadia Code", monospace;

  --type-1-xxs: 11.5px;  --type-1-xs: 13px;  --type-1-sm: 14.5px;
  --type-1-md: 16px;   --type-1-lg: 18px;  --type-1-xl: 21px;
  --type-1-2xl: 25px;  --type-1-3xl: 30px; --type-1-4xl: 38px;

  --lh-tight: 1.2;  --lh-snug: 1.3;  --lh-normal: 1.5;  --lh-relaxed: 1.65;

  --fw-normal: 400;  --fw-medium: 500;  --fw-semibold: 600;
  --tracking-tight: -0.014em;

  /* ---------------- Radius ---------------- */
  --radius-1: 6px;   --radius-2: 8px;   --radius-3: 12px;
  --radius-4: 16px;  --radius-full: 9999px;

  /* ---------------- Transition ---------------- */
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 150ms var(--ease-out-quart);
  --transition-base: 200ms var(--ease-out-quart);
  --transition-slow: 300ms var(--ease-out-quart);

  /* ---------------- Elevation (dark-tinted, offset + soft blur) -------- */
  --shadow-sm:  0 1px 2px 0 rgba(15, 19, 24, 0.06);
  --shadow-md:  0 1px 2px 0 rgba(15, 19, 24, 0.05), 0 4px 12px -2px rgba(15, 19, 24, 0.08);
  --shadow-lg:  0 4px 10px -2px rgba(15, 19, 24, 0.08), 0 16px 32px -8px rgba(15, 19, 24, 0.14);

  /* ---------------- Layout ---------------- */
  --max-width-narrow: 640px;
  --max-width-wide: 1120px;
  --nav-height: 56px;
  --sidebar-width: 248px;
  --gap-1: 4px;  --gap-2: 8px;  --gap-3: 12px;  --gap-4: 16px;
  --gap-5: 20px; --gap-6: 24px; --gap-8: 32px;

  /* ---------------- Z ---------------- */
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
}