/* Kuadro — design tokens. The only file allowed to hold raw colors, font sizes and corner radii
   (Stylelint enforces it).
   Two layers:
   1. Palette: fixed colors, named by hue and lightness. They never change with the theme, so use them
      directly only for things that must look the same in light and dark (the QR canvas, device mockups,
      the ink panels on the marketing pages).
   2. Theme: what the interface reads (--bg, --text, --accent…). Light by default, dark when the OS asks
      for it or the person picks "Dark" in the theme switcher. The public landing pages always render light
      (see body.landing-body). */

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-300: #cccccc;
  --color-gray-500: #808080;

  /* Light-theme neutrals */
  --color-slate-50: #f3f4f8;
  --color-slate-100: #eef0f6;
  --color-slate-200: #dadde8;
  --color-slate-500: #80859c;
  --color-slate-700: #565b70;
  --color-slate-900: #14151f;

  /* Dark-theme neutrals */
  --color-night-50: #edeff8;
  --color-night-100: #c9cde0;
  --color-night-300: #a9afcb;
  --color-night-400: #9aa0ba;
  --color-night-500: #666c8c;
  --color-night-700: #2a2e45;
  --color-night-800: #1b1e2f;
  --color-night-900: #141622;
  --color-night-950: #0b0c13;

  /* Brand ink: the deep blue of the admin sidebar and the marketing panels */
  --color-ink-500: #2b2f57;
  --color-ink-600: #232861;
  --color-ink-700: #1f2350;
  --color-ink-800: #171a33;
  --color-ink-900: #0f1130;
  --color-ink-950: #0d0f1c;

  --color-coral-50: #fde7e0;
  --color-coral-300: #ff9a80;
  --color-coral-400: #ff7a5c;
  --color-coral-500: #ff5b3a;
  --color-coral-600: #e0573a;
  --color-coral-700: #c93a17;
  --color-coral-800: #b23212;
  --color-coral-900: #3a1c15;
  --color-coral-950: #1a0b06;

  --color-green-50: #ddf3ea;
  --color-green-300: #4adba8;
  --color-green-700: #0b7a57;
  --color-green-900: #10372b;

  --color-amber-50: #fdefd6;
  --color-amber-300: #f5b546;
  --color-amber-700: #8f5200;
  --color-amber-900: #3b2b0c;

  --color-red-50: #fde4e1;
  --color-red-300: #ff8a7e;
  --color-red-700: #b42318;
  --color-red-900: #40181a;
  --color-red-950: #2a0a08;

  /* Shadows that don't follow the theme */
  --shadow-pressed: 0 1px 2px rgba(20, 21, 31, .18);
  --shadow-tab: 0 1px 2px rgba(20, 21, 31, .12);
  --shadow-pop: 0 8px 24px rgba(20, 21, 31, .12);
  --shadow-float: 0 30px 60px rgba(20, 21, 31, .18), 0 2px 6px rgba(20, 21, 31, .08);
  --shadow-sheet: 0 -8px 24px rgba(20, 21, 31, .12);
  --shadow-glow: 0 0 18px 6px rgba(201, 58, 23, .55);

  /* Layers */
  --z-behind: -1;
  --z-base: 0;
  --z-raised: 2;
  --z-sticky: 20;
  --z-overlay: 60;

  /* Motion */
  --dur-fast: .15s;
  --dur-base: .2s;
  --dur-slow: .45s;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale. The body text is --text-base. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 22px;
  --text-4xl: 24px;
  --text-5xl: 28px;
  --text-6xl: 32px;
  --text-7xl: 36px;
  --text-8xl: 40px;
  --text-9xl: 44px;
  --text-10xl: 56px;
  --text-11xl: 72px;
  /* Fluid headings for the marketing and SEO pages: they grow with the viewport between two steps. */
  --text-fluid-xs: clamp(24px, 2.6vw, 34px);
  --text-fluid-sm: clamp(26px, 3vw, 40px);
  --text-fluid-md: clamp(32px, 3.8vw, 56px);
  --text-fluid-lg: clamp(40px, 5vw, 76px);
  --text-fluid-xl: clamp(40px, 5.6vw, 84px);
  /* The same curves with a different floor on phones, for headings that need it (the suffix is the floor). */
  --text-fluid-sm-30: clamp(30px, 3vw, 40px);
  --text-fluid-lg-34: clamp(34px, 5vw, 76px);
  --text-fluid-lg-36: clamp(36px, 5vw, 76px);
  --text-fluid-lg-48: clamp(48px, 5vw, 76px);

  /* Spacing scale for padding, margin and gap. The number is the size in px; the odd steps (10, 14) are kept
     as they were drawn and are candidates to merge into the 4px grid. */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-52: 52px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;

  /* Corner radius scale */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-6xl: 28px;
  --radius-7xl: 32px;
  --radius-8xl: 40px;
  --radius-full: 999px;
  --radius-circle: 50%;
}

:root, body.landing-body {
  --bg: var(--color-slate-50);
  --surface: var(--color-white);
  --surface-2: var(--color-slate-100);
  --line: var(--color-slate-200);
  --edge: var(--color-slate-500);
  --text: var(--color-slate-900);
  --muted: var(--color-slate-700);
  --accent: var(--color-coral-700);
  --accent-text: var(--color-coral-800);
  --accent-soft: var(--color-coral-50);
  --on-accent: var(--color-white);
  --ok: var(--color-green-700);
  --ok-soft: var(--color-green-50);
  --warn: var(--color-amber-700);
  --warn-soft: var(--color-amber-50);
  --bad: var(--color-red-700);
  --bad-soft: var(--color-red-50);
  --on-bad: var(--color-white);
  --shadow: 0 1px 2px rgba(20, 21, 31, .06), 0 8px 24px rgba(20, 21, 31, .06);
  --focus: var(--color-coral-700);
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Dark palette, declared once; the two selectors below only assign it. */
  --dark-bg: var(--color-night-950);
  --dark-surface: var(--color-night-900);
  --dark-surface-2: var(--color-night-800);
  --dark-line: var(--color-night-700);
  --dark-edge: var(--color-night-500);
  --dark-text: var(--color-night-50);
  --dark-muted: var(--color-night-400);
  --dark-accent: var(--color-coral-400);
  --dark-on-accent: var(--color-coral-950);
  --dark-accent-text: var(--color-coral-300);
  --dark-accent-soft: var(--color-coral-900);
  --dark-ok: var(--color-green-300);
  --dark-ok-soft: var(--color-green-900);
  --dark-warn: var(--color-amber-300);
  --dark-warn-soft: var(--color-amber-900);
  --dark-bad: var(--color-red-300);
  --dark-bad-soft: var(--color-red-900);
  --dark-on-bad: var(--color-red-950);
  --dark-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --dark-focus: var(--color-coral-300);
  color-scheme: light;
}
/* Dark palette: the OS asks for it (no explicit choice) or the person picks "Dark" in the theme switcher
   (data-theme on <html>, from the theme cookie). "Light" pins the light palette even on a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --line: var(--dark-line);
    --edge: var(--dark-edge);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --accent: var(--dark-accent);
    --on-accent: var(--dark-on-accent);
    --accent-text: var(--dark-accent-text);
    --accent-soft: var(--dark-accent-soft);
    --ok: var(--dark-ok);
    --ok-soft: var(--dark-ok-soft);
    --warn: var(--dark-warn);
    --warn-soft: var(--dark-warn-soft);
    --bad: var(--dark-bad);
    --bad-soft: var(--dark-bad-soft);
    --on-bad: var(--dark-on-bad);
    --shadow: var(--dark-shadow);
    --focus: var(--dark-focus);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --line: var(--dark-line);
  --edge: var(--dark-edge);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --accent: var(--dark-accent);
  --on-accent: var(--dark-on-accent);
  --accent-text: var(--dark-accent-text);
  --accent-soft: var(--dark-accent-soft);
  --ok: var(--dark-ok);
  --ok-soft: var(--dark-ok-soft);
  --warn: var(--dark-warn);
  --warn-soft: var(--dark-warn-soft);
  --bad: var(--dark-bad);
  --bad-soft: var(--dark-bad-soft);
  --on-bad: var(--dark-on-bad);
  --shadow: var(--dark-shadow);
  --focus: var(--dark-focus);
  color-scheme: dark;
}