/*
 * Swavo design tokens. Plain CSS custom properties, no build step.
 *
 * Theme: follows the system (prefers-color-scheme). Force one with <html data-theme="light"> or
 * <html data-theme="dark">. Components use only the semantic tokens (--bg, --surface, --text, --accent, ...);
 * the raw palette (--ink-*, --cream-*, --ember-*, ...) is for illustrations and the rare special case.
 *
 * Brand idea: the barn swallow (Schwalbe) — night-blue ink, cream, and the ember-red of its throat.
 * Ember is the brand accent: highlights, the logo dot, focus, primary marketing calls to action.
 * Everyday primary buttons in the apps are ink-on-cream (--primary); ember is used sparingly.
 */

:root {
  /* ---------- Raw palette ---------- */
  /* Ink: blue-black neutrals (text, dark surfaces) */
  --ink-950: #0a0c13;
  --ink-900: #0f121c;
  --ink-850: #141826;
  --ink-800: #1b2030;
  --ink-750: #222839;
  --ink-700: #2c3346;
  --ink-600: #3d4559;
  --ink-500: #5a6176;
  --ink-400: #7c8296;
  --ink-300: #a3a8b8;
  --ink-200: #c9ccd6;
  /* Cream: warm light neutrals (page, surfaces, lines) */
  --cream-0: #ffffff;
  --cream-50: #fcfbf8;
  --cream-100: #f8f6f1;
  --cream-200: #f1eee6;
  --cream-300: #e8e3d8;
  --cream-400: #dad3c4;
  --cream-500: #c4bba8;
  /* Ember: brand accent */
  --ember-50: #fff4ee;
  --ember-100: #ffe4d5;
  --ember-200: #ffc6a8;
  --ember-300: #ff9f74;
  --ember-400: #ff7a45;
  --ember-500: #ff6a2b; /* logo dot, illustrations, large display accents */
  --ember-600: #e3521a;
  --ember-700: #c8430e; /* fills with white text (4.9:1) */
  --ember-800: #a1360c;
  --ember-900: #7a2a0d;
  /* Sky: the swallow's steel-blue back; secondary hue (info, calendar, links in charts) */
  --sky-100: #e6ecff;
  --sky-300: #a9bbff;
  --sky-400: #8ea6ff;
  --sky-500: #5a78e8;
  --sky-600: #3a57c8;
  --sky-700: #2b45a8;
  /* Moss / Amber / Rose: status hues */
  --moss-100: #e2f5ea;
  --moss-400: #4ade94;
  --moss-500: #22a565;
  --moss-700: #157347;
  --amber-100: #fff3d6;
  --amber-400: #f5b544;
  --amber-500: #e09a14;
  --amber-700: #8f5300;
  --rose-100: #fde8e9;
  --rose-400: #ff7a80;
  --rose-500: #e5414b;
  --rose-700: #b4232c;
  /* Illustration extras */
  --lilac-400: #b49cff;
  --lilac-600: #7656e0;

  /* ---------- Typography ---------- */
  --font-display: 'Bricolage Grotesque Variable', 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif; /* italic accents only */
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale (1.2 at small sizes, wider for display). App UI mostly lives at --text-sm/--text-md. */
  --text-2xs: 0.6875rem; /* 11px: badges, meta */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px: dense lists (webmail) */
  --text-md: 0.9375rem; /* 15px: default UI text */
  --text-lg: 1.0625rem; /* 17px: reading text (mail body, docs) */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px: page titles in apps */
  --text-3xl: 2rem; /* 32px */
  --text-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 1.6rem + 4.8vw, 5rem);
  --text-6xl: clamp(3.1rem, 1.4rem + 7vw, 7.25rem); /* marketing hero */

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --tracking-display: -0.035em;
  --tracking-tight: -0.015em;
  --tracking-wide: 0.08em; /* uppercase eyebrows */

  /* ---------- Spacing (4px grid) ---------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem; /* 2 */
  --space-1: 0.25rem; /* 4 */
  --space-1-5: 0.375rem; /* 6 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */
  --space-32: 8rem; /* 128 */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem); /* page side padding */
  --section: clamp(4rem, 2.5rem + 6vw, 8rem); /* vertical rhythm between marketing sections */

  /* Layout */
  --width-prose: 68ch;
  --width-narrow: 40rem;
  --width-content: 72rem;
  --width-wide: 84rem;
  --header-height: 3.5rem;
  --sidebar-width: 15rem;
  --tap-target: 2.75rem; /* 44px minimum touch target */
  --control-height: 2.5rem; /* inputs and buttons */
  --control-height-sm: 2rem;
  --control-height-lg: 3rem;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px; /* buttons, inputs */
  --radius-lg: 14px; /* cards */
  --radius-xl: 20px; /* panels, dialogs */
  --radius-2xl: 28px; /* marketing tiles */
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --duration-slower: 800ms;

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-dialog: 400;
  --z-toast: 500;

  /* ---------- Semantic colours: light (default) ---------- */
  color-scheme: light;
  --bg: var(--cream-100); /* page background */
  --bg-subtle: var(--cream-200); /* sidebars, wells */
  --surface: var(--cream-0); /* cards, lists, inputs */
  --surface-2: var(--cream-50); /* nested / alternating rows */
  --surface-3: var(--cream-200); /* hover on surface, pressed */
  --surface-sunken: var(--cream-200); /* code, quotes */
  --surface-inverse: var(--ink-850);
  --overlay: rgb(15 18 28 / 0.42); /* dialog backdrop */

  --border: var(--cream-300);
  --border-subtle: var(--cream-200);
  --border-strong: var(--cream-500);
  --divider: var(--cream-300);

  --text: var(--ink-850); /* 16:1 on --bg */
  --text-2: #464c5e; /* secondary: 7.9:1 */
  --text-3: #656a7b; /* tertiary, meta: 5.0:1 (4.6:1 on --surface-3) */
  --text-disabled: #9a9eac;
  --text-inverse: var(--cream-100);
  --text-on-accent: #ffffff;
  --text-on-primary: var(--cream-100);

  --primary: var(--ink-850); /* main buttons */
  --primary-hover: var(--ink-700);
  --primary-active: var(--ink-950);

  --accent: var(--ember-700); /* fills with --text-on-accent */
  --accent-hover: var(--ember-800);
  --accent-text: #b53c0b; /* links/labels in accent on --bg: 5.4:1 */
  --accent-vivid: var(--ember-500); /* decoration only, never text */
  --accent-soft: var(--ember-50); /* selected rows, highlights */
  --accent-soft-2: var(--ember-100);
  --accent-border: var(--ember-200);

  --link: var(--ink-850);
  --link-underline: var(--ember-500);

  --info: var(--sky-700);
  --info-soft: var(--sky-100);
  --info-border: #c3d0ff;
  --success: var(--moss-700);
  --success-soft: var(--moss-100);
  --success-border: #b5e3c8;
  --success-fill: #17804e; /* buttons with white text */
  --warning: var(--amber-700);
  --warning-soft: var(--amber-100);
  --warning-border: #f3d58e;
  --danger: var(--rose-700);
  --danger-soft: var(--rose-100);
  --danger-border: #f5b8bc;
  --danger-fill: var(--rose-700);

  --selection: rgb(255 106 43 / 0.22);
  --highlight: #ffe58a; /* search hit marks */

  --focus-ring-color: var(--ember-600);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring-color);

  --shadow-xs: 0 1px 2px rgb(20 24 38 / 0.06);
  --shadow-sm: 0 1px 2px rgb(20 24 38 / 0.06), 0 2px 6px rgb(20 24 38 / 0.05);
  --shadow-md: 0 2px 4px rgb(20 24 38 / 0.05), 0 8px 20px rgb(20 24 38 / 0.08);
  --shadow-lg: 0 4px 8px rgb(20 24 38 / 0.05), 0 18px 44px rgb(20 24 38 / 0.12);
  --shadow-xl: 0 8px 16px rgb(20 24 38 / 0.06), 0 32px 80px rgb(20 24 38 / 0.18);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.7);
  --shadow-glow: 0 0 0 1px rgb(255 106 43 / 0.25), 0 10px 40px rgb(255 106 43 / 0.28);
}

/* Dark: the system asks for it and the page does not force light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: var(--ink-950);
    --bg-subtle: var(--ink-900);
    --surface: var(--ink-900);
    --surface-2: var(--ink-850);
    --surface-3: var(--ink-800);
    --surface-sunken: #07080d;
    --surface-inverse: var(--cream-100);
    --overlay: rgb(0 0 0 / 0.6);

    --border: #262c3d;
    --border-subtle: #1b2030;
    --border-strong: #3a4257;
    --divider: #222839;

    --text: #f3f0e8;
    --text-2: #bfc2cd;
    --text-3: #8e93a3;
    --text-disabled: #5b6175;
    --text-inverse: var(--ink-850);
    --text-on-accent: #1a0b04;
    --text-on-primary: var(--ink-900);

    --primary: #f3f0e8;
    --primary-hover: #ffffff;
    --primary-active: #dcd7cb;

    --accent: var(--ember-500);
    --accent-hover: var(--ember-400);
    --accent-text: var(--ember-400);
    --accent-vivid: var(--ember-500);
    --accent-soft: rgb(255 106 43 / 0.12);
    --accent-soft-2: rgb(255 106 43 / 0.2);
    --accent-border: rgb(255 106 43 / 0.35);

    --link: #f3f0e8;
    --link-underline: var(--ember-500);

    --info: var(--sky-400);
    --info-soft: rgb(142 166 255 / 0.12);
    --info-border: rgb(142 166 255 / 0.3);
    --success: var(--moss-400);
    --success-soft: rgb(74 222 148 / 0.1);
    --success-border: rgb(74 222 148 / 0.28);
    --success-fill: #17804e;
    --warning: var(--amber-400);
    --warning-soft: rgb(245 181 68 / 0.1);
    --warning-border: rgb(245 181 68 / 0.3);
    --danger: var(--rose-400);
    --danger-soft: rgb(255 122 128 / 0.1);
    --danger-border: rgb(255 122 128 / 0.3);
    --danger-fill: #d23842;

    --selection: rgb(255 106 43 / 0.32);
    --highlight: rgb(255 214 74 / 0.35);

    --focus-ring-color: var(--ember-400);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.25);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 18px 48px rgb(0 0 0 / 0.45);
    --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.3), 0 32px 90px rgb(0 0 0 / 0.55);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.06);
  }
}

/* Forced dark (same values as above; keep both blocks in sync). */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--ink-950);
  --bg-subtle: var(--ink-900);
  --surface: var(--ink-900);
  --surface-2: var(--ink-850);
  --surface-3: var(--ink-800);
  --surface-sunken: #07080d;
  --surface-inverse: var(--cream-100);
  --overlay: rgb(0 0 0 / 0.6);
  --border: #262c3d;
  --border-subtle: #1b2030;
  --border-strong: #3a4257;
  --divider: #222839;
  --text: #f3f0e8;
  --text-2: #bfc2cd;
  --text-3: #8e93a3;
  --text-disabled: #5b6175;
  --text-inverse: var(--ink-850);
  --text-on-accent: #1a0b04;
  --text-on-primary: var(--ink-900);
  --primary: #f3f0e8;
  --primary-hover: #ffffff;
  --primary-active: #dcd7cb;
  --accent: var(--ember-500);
  --accent-hover: var(--ember-400);
  --accent-text: var(--ember-400);
  --accent-vivid: var(--ember-500);
  --accent-soft: rgb(255 106 43 / 0.12);
  --accent-soft-2: rgb(255 106 43 / 0.2);
  --accent-border: rgb(255 106 43 / 0.35);
  --link: #f3f0e8;
  --link-underline: var(--ember-500);
  --info: var(--sky-400);
  --info-soft: rgb(142 166 255 / 0.12);
  --info-border: rgb(142 166 255 / 0.3);
  --success: var(--moss-400);
  --success-soft: rgb(74 222 148 / 0.1);
  --success-border: rgb(74 222 148 / 0.28);
  --success-fill: #17804e;
  --warning: var(--amber-400);
  --warning-soft: rgb(245 181 68 / 0.1);
  --warning-border: rgb(245 181 68 / 0.3);
  --danger: var(--rose-400);
  --danger-soft: rgb(255 122 128 / 0.1);
  --danger-border: rgb(255 122 128 / 0.3);
  --danger-fill: #d23842;
  --selection: rgb(255 106 43 / 0.32);
  --highlight: rgb(255 214 74 / 0.35);
  --focus-ring-color: var(--ember-400);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.25);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 18px 48px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.3), 0 32px 90px rgb(0 0 0 / 0.55);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}