/* MAJACLOUD design tokens. Light is the default; dark is opted into with
   [data-theme="dark"] (set by the inline theme script, honouring the OS
   preference when nothing is stored). Breakpoints: phone ≤640, tablet ≤1024.

   One ground, one ink, one accent. The accent is the logo's blue and marks the
   action and the current item; success keeps its own green so a "Connected"
   badge never reads as a button. Surfaces are told apart by a tone step, and
   only things that float (menus, dialogs, toasts) carry a shadow. */
:root {
  --bg: #F6F7F9;
  --panel: #FFFFFF;
  --panel-2: #ECEFF3;
  --border: #E1E5EA;
  --border-strong: #C9CFD7;
  --text: #0D1626;
  --text-2: #4A5565;
  --text-3: #687280;
  --accent: #1A63DE;
  --accent-ink: #1452BA;
  --accent-soft: #E7EFFC;
  --on-accent: #FFFFFF;
  --btn-primary-bg: #1A63DE;
  --btn-primary-hover: #1452BA;
  --link: #1452BA;
  --link-soft: #E7EFFC;
  --success: #247B50;
  --success-ink: #1B6440;
  --success-soft: #DCF5E6;
  --warning: #F59E0B;
  --warning-ink: #92400E;
  --warning-soft: #FFF8E6;
  --danger: #C4242A;
  --danger-ink: #A11D22;
  --danger-soft: #FDECEA;
  --focus-ring: 0 0 0 3px rgba(26, 99, 222, 0.32);
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(13, 22, 38, 0.12);
  --shadow-lg: 0 14px 36px rgba(13, 22, 38, 0.16);
  --backdrop: rgba(8, 12, 20, 0.5);

  /* The public pages' own fields: an ink field for the dark chapters and the logo's navy. */
  --field-ink: #0D1626;
  --field-ink-text: #F2F4F7;
  --field-ink-muted: #AEB6C2;
  --field-ink-surface: #18233A;

  --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --lh-text: 1.5;
  --lh-heading: 1.2;

  /* Public pages: three sizes do the work (display, lead, body), far apart. */
  --step-small: 14px;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  --step-display: clamp(3rem, 1.2rem + 7vw, 8.25rem);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  --z-sticky: 10;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-dropdown: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;

  --sidebar-w: 248px;
  --topbar-h: 56px;
  --content-max: 1200px;
  --page-max: 1440px;
  --gutter: clamp(20px, 3.2vw, 48px);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0F1013;
  --panel: #16181C;
  --panel-2: #1F2227;
  --border: #272B31;
  --border-strong: #3B4048;
  --text: #F2F3F5;
  --text-2: #B4B9C1;
  --text-3: #959BA5;
  --accent: #5590F8;
  --accent-ink: #8DB4FF;
  --accent-soft: #172440;
  --on-accent: #07101F;
  --btn-primary-bg: #5590F8;
  --btn-primary-hover: #7AA8FA;
  --link: #8DB4FF;
  --link-soft: #172440;
  --success: #3FC07A;
  --success-ink: #5CD493;
  --success-soft: #172A1D;
  --warning: #FBBF24;
  --warning-ink: #FCD34D;
  --warning-soft: #2E2410;
  --danger: #E5566F;
  --danger-ink: #F58B9C;
  --danger-soft: #2C1A20;
  --focus-ring: 0 0 0 3px rgba(85, 144, 248, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --backdrop: rgba(0, 0, 0, 0.7);

  --field-ink: #050608;
  --field-ink-text: #F2F3F5;
  --field-ink-muted: #A3A9B3;
  --field-ink-surface: #15171B;
  color-scheme: dark;
}