:root {
  /* Mobile-first density: 1 on phones, bigger on wide screens */
  --density: 1;

  /* Tap targets */
  --tap: 44px;

  /* Derived spacing */
  --pad-card: calc(var(--space-4) * var(--density));
  --pad-page: calc(var(--space-4) * var(--density));

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fw-500: 500;
  --fw-600: 600;
  --fw-650: 650;
  --fw-700: 700;
  --fw-800: 800;

  --bg-primary: #0a0a12;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-tertiary: rgba(255, 255, 255, 0.4);
  --accent: #8b5cf6;
  --accent-2: #06b6d4;
  --bg-glass: rgba(255, 255, 255, 0.06);
  --bg-card-hover: rgba(255, 255, 255, 0.1);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --bg-secondary: #0a0a12;
  --bg-card: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.12);
  --text-muted: rgba(255, 255, 255, 0.2);
  --accent-3: #10b981;
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.15);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.15);
  --blue: #06b6d4;
  --blue-soft: rgba(6, 182, 212, 0.15);
  --pink: #8b5cf6;
  --pink-soft: rgba(139, 92, 246, 0.15);
  --cyan: #06b6d4;
  --cyan-soft: rgba(6, 182, 212, 0.15);

  --shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  --shadow2: 0 8px 24px rgba(0, 0, 0, 0.22);
  --gradient-main: linear-gradient(135deg, var(--accent), var(--accent-2));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Extra visual gap above the iOS home indicator (tune 6–14px) */
  --home-gap: 12px;
  --page-max: 1400px;
  --page-gutter: var(--pad-page);
  --page-gutter-lg: calc(var(--space-7) * var(--density));
  --hdr-pad-top: calc(var(--safe-top) + var(--space-4));
  --hdr-pad-btm: 12px;
  --hdr-control: 42px;
  --hdr-height: calc(
    var(--hdr-pad-top) + var(--hdr-control) + var(--hdr-pad-btm)
  );
  --app-top-gap: 18px;

  --bg0: #070b14;
  --bg1: #0b1222;
  --t: #e5e7eb;
  --mut: rgba(229, 231, 235, 0.55);
  --mut2: rgba(229, 231, 235, 0.75);
  --glass: rgba(255, 255, 255, 0.07);
  --glass2: rgba(255, 255, 255, 0.05);
  --br: rgba(255, 255, 255, 0.12);
  --br2: rgba(255, 255, 255, 0.08);
  --acc: #38bdf8;
  --acc2: #2563eb;
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --side: 260px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --auth-accent: linear-gradient(
    135deg,
    rgba(124, 92, 255, 0.95),
    rgba(34, 211, 238, 0.95)
  );
  --auth-accentShadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --modal-flow-max-h: calc(var(--vh, 100dvh) - 24px);
  --fn-primary: #818cf8;
  --fn-accent: #22d3ee;
  --fn-success: #34d399;
  --fn-danger: #fb7185;
  --fn-warn: #fbbf24;
  --fn-text: rgba(248, 250, 252, 0.92);
  --fn-text-secondary: rgba(248, 250, 252, 0.7);
  --fn-text-muted: rgba(248, 250, 252, 0.4);
  --fn-success-bg: rgba(52, 211, 153, 0.12);
  --fn-danger-bg: rgba(251, 113, 133, 0.12);
  --fn-warn-bg: rgba(251, 191, 36, 0.12);
  --fn-card-bg: rgba(255, 255, 255, 0.035);
  --fn-card-bd: rgba(255, 255, 255, 0.08);
  --fn-card-hover: rgba(255, 255, 255, 0.055);
  --fn-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --fn-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.2);
  --fn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fn-fs-xs: 0.7rem;
  --fn-fs-sm: 0.78rem;
  --fn-fs-base: 0.88rem;
  --fn-fs-md: 0.95rem;
  --fn-fs-lg: 1.1rem;
  --fn-fs-xl: 1.35rem;
  --fn-fs-2xl: 2.6rem;
  --fn-weight-normal: 450;
  --fn-weight-medium: 520;
  --fn-weight-semibold: 580;
  --fn-weight-bold: 650;
  --gCard: rgba(255, 255, 255, 0.038);
  --gCardH: rgba(255, 255, 255, 0.07);
  --gBrd: rgba(255, 255, 255, 0.065);
  --gBrdH: rgba(255, 255, 255, 0.12);
  --gT8: rgba(255, 255, 255, 0.82);
  --gT5: rgba(255, 255, 255, 0.5);
  --gT3: rgba(255, 255, 255, 0.3);
  --gT1: rgba(255, 255, 255, 0.07);
  --gGreen: #22d3a7;
  --gGreenG: linear-gradient(135deg, #22d3a7, #0ea5e9);
  --gGreenBg: rgba(34, 211, 167, 0.1);
  --gPurple: #8b5cf6;
  --gPurpleG: linear-gradient(135deg, #8b5cf6, #c084fc);
  --gPurpleBg: rgba(139, 92, 246, 0.1);
  --gPink: #f472b6;
  --gPinkG: linear-gradient(135deg, #f472b6, #fb7185);
  --gPinkBg: rgba(244, 114, 182, 0.1);
  --gYellow: #fbbf24;
  --gYellowG: linear-gradient(135deg, #fbbf24, #fb923c);
  --gYellowBg: rgba(251, 191, 36, 0.1);
  --gOk: #34d399;
  --gOkBg: rgba(52, 211, 153, 0.12);
  --gErr: #f87171;
  --gErrBg: rgba(248, 113, 113, 0.12);
  --gR: 20px;
  --gRs: 14px;
  --gRx: 10px;

  /* ===== System tokens (migrated from /css/core/tokens.css) ===== */
  --border-0: rgba(255, 255, 255, 0.06);
  --border-1: rgba(255, 255, 255, 0.10);
  --border-2: rgba(255, 255, 255, 0.14);
  --border-3: rgba(255, 255, 255, 0.20);
  --bottom-nav-h: 72px;
  /* Space reserved for fixed bottom navigation on mobile.
     Keep it tight to avoid a visible "blank" area at the end of scroll. */
  --content-pad-bottom: calc(var(--bottom-nav-h, 72px) + var(--safe-bottom) + 16px);
  --focus-border: rgba(139, 92, 246, 0.38);
  --focus-ring: rgba(139, 92, 246, 0.18);
  --fs-10: var(--fs-12);
  --fs-17: var(--fs-18);
  --fs-19: var(--fs-20);
  --fs-24: 24px;
  --fs-26: var(--fs-24);
  --fs-28: var(--fs-32);
  --fs-32: 32px;
  --fs-36: var(--fs-32);
  --fs-40: var(--fs-48);
  --fs-42: var(--fs-48);
  --fs-44: var(--fs-48);
  --fs-48: 48px;
  --fs-56: var(--fs-48);
  --fs-8: var(--fs-12);
  --fs-9: var(--fs-12);
  --shadow-float: 0 10px 26px rgba(0, 0, 0, 0.22);
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.35);
  --surface-0: rgba(255, 255, 255, 0.00);
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.10);
  --vh: 100dvh;

  /* ===== Preferred typographic scale (single source of truth) =====
     Keep values limited + reusable across all tabs.
     Tasks tab is the reference; other tabs should consume these aliases.
  */
  --fs-2xs: 0.6875rem; /* 11px */
  --fs-xs: var(--fs-12); /* 12px */
  --fs-sm: var(--fs-14); /* 14px */
  --fs-md: var(--fs-16); /* 16px */
  --fs-lg: var(--fs-18); /* 18px */
  --fs-xl: var(--fs-20); /* 20px */
  --fs-2xl: var(--fs-24); /* 24px */
  --fs-3xl: var(--fs-32); /* 32px */
}



/* Desktop density only (typography scale stays the same) */
@media (min-width: 768px) {
  :root {
    --density: 1.25;
  }
}

/* Compatibility aliases (legacy code expects these) */
:root {
  --modal-max-h: var(--modal-flow-max-h);
  --error-border: rgba(239, 68, 68, 0.35);
  --error-ring: rgba(239, 68, 68, 0.22);
}