/*
 * Design tokens for the tool pages: the single source of truth for colour, type, spacing, shape and motion.
 * tokens.json is generated from this file by tools/build.mjs, and DESIGN.md explains how to use them.
 * Light is the default; .dark (set before first paint from the shared "theme" choice) swaps the colour tokens.
 * .light and .dark also work on any element, e.g. to show both themes side by side.
 */
:root,
.light {
    /* Palette: raw values, only referenced by the semantic tokens below. */
    --palette-navy-900: #0a2540;
    --palette-slate-600: #4f6175;
    --palette-slate-500: #6b7c93;
    --palette-slate-200: #e3e8ee;
    --palette-slate-100: #eef2f7;
    --palette-slate-50: #f6f9fc;
    --palette-white: #ffffff;
    --palette-indigo-700: #4b44d9;
    --palette-indigo-600: #5851ec;
    --palette-indigo-500: #635bff;
    --palette-indigo-100: #ecebff;
    --palette-indigo-50: #f5f4ff;
    --palette-cyan-600: #0073b1;
    --palette-green-700: #1b7a46;
    --palette-green-50: #e9f8ef;
    --palette-amber-700: #a35200;
    --palette-amber-50: #fff5e6;
    --palette-red-700: #c0123c;
    --palette-red-50: #fff0f3;
    --palette-orange-600: #d4570f;
    --palette-violet-600: #8a3ffc;

    /* Semantic colour */
    --color-bg: var(--palette-slate-50);
    --color-surface: var(--palette-white);
    --color-surface-elevated: var(--palette-white);
    --color-surface-sunken: var(--palette-slate-100);
    --color-text: var(--palette-navy-900);
    --color-text-secondary: var(--palette-slate-600);
    --color-text-tertiary: var(--palette-slate-500);
    --color-text-on-accent: var(--palette-white);
    --color-border: var(--palette-slate-200);
    --color-border-strong: #cfd7df;
    --color-accent: var(--palette-indigo-500);
    --color-accent-hover: var(--palette-indigo-600);
    --color-accent-active: var(--palette-indigo-700);
    --color-accent-text: #534bea;
    --color-accent-subtle: var(--palette-indigo-50);
    --color-accent-muted: var(--palette-indigo-100);
    --color-info: var(--palette-cyan-600);
    --color-success: var(--palette-green-700);
    --color-success-subtle: var(--palette-green-50);
    --color-warning: var(--palette-amber-700);
    --color-warning-subtle: var(--palette-amber-50);
    --color-danger: var(--palette-red-700);
    --color-danger-subtle: var(--palette-red-50);
    --color-overlay: rgb(10 37 64 / 0.45);
    --color-focus-ring: rgb(99 91 255 / 0.45);
    --color-skeleton: var(--palette-slate-100);
    --color-checker-a: var(--palette-white);
    --color-checker-b: #e6ebf1;
    /* Category hues for tool groups (icons and dots only, never body text). */
    --color-category-edit: var(--palette-orange-600);
    --color-category-organize: var(--palette-indigo-500);
    --color-category-secure: var(--palette-green-700);
    --color-category-convert: var(--palette-violet-600);
    /* Page glow: the slowly drifting colour fields behind the top of every tool page. */
    --glow-1: #a960ee;
    --glow-2: #ff7a93;
    --glow-3: #00d4ff;
    --glow-4: #635bff;
    --glow-opacity: 0.32;
    /* Document colours: what the PDF editor writes into the file, so they never change with the theme. */
    --color-document-paper: #ffffff;
    --color-document-highlight: rgb(255 230 50 / 0.45);
    --color-document-redact: #000000;
    --color-document-edge: #c8c8c8;
    --gradient-hero: radial-gradient(1200px 400px at 50% -120px, rgb(99 91 255 / 0.14), transparent 70%), radial-gradient(600px 300px at 90% 0, rgb(0 212 255 / 0.1), transparent 70%);
    --gradient-accent: linear-gradient(135deg, #635bff 0%, #7a73ff 60%, #00a2ff 100%);

    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;
    --font-size-3xl: 36px;
    --font-size-display: clamp(34px, 5vw, 52px);
    --line-height-tight: 1.15;
    --line-height-snug: 1.35;
    --line-height-normal: 1.55;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-caps: 0.08em;

    /* Spacing: 4px grid */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Shape */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 999px;
    --border-width: 1px;
    --border-line: var(--border-width) solid var(--color-border);
    --border-line-strong: var(--border-width) solid var(--color-border-strong);

    /* Elevation: soft and sparing; borders do most of the separating. */
    --shadow-xs: 0 1px 1px rgb(10 37 64 / 0.04);
    --shadow-sm: 0 1px 2px rgb(10 37 64 / 0.06), 0 1px 1px rgb(10 37 64 / 0.04);
    --shadow-md: 0 4px 12px -2px rgb(10 37 64 / 0.1), 0 2px 4px -2px rgb(10 37 64 / 0.06);
    --shadow-lg: 0 18px 40px -12px rgb(10 37 64 / 0.25), 0 6px 12px -6px rgb(10 37 64 / 0.1);

    /* Motion */
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 280ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --transition-colors: color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);

    /* Focus */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);

    /* Breakpoints (for reference; CSS media queries cannot read variables): sm 480, md 768, lg 1024, xl 1280. */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;

    /* Layout */
    --layout-max-width: 1120px;
    --layout-header-height: 64px;
    --z-header: 40;
    --z-overlay: 100;
    --z-tooltip: 200;

    color-scheme: light;
}

/* Dark: its own values, not an inversion. Deep navy instead of black, lifted surfaces, softer accent. */
.dark {
    --color-bg: #0a0e1a;
    --color-surface: #111827;
    --color-surface-elevated: #1a2236;
    --color-surface-sunken: #0d1322;
    --color-text: #f9fafb;
    --color-text-secondary: #a3acb9;
    --color-text-tertiary: #8792a2;
    --color-text-on-accent: #0a0e1a;
    --color-border: #293449;
    --color-border-strong: #3a475e;
    --color-accent: #8b7cff;
    --color-accent-hover: #a094ff;
    --color-accent-active: #b4aaff;
    --color-accent-text: #a99eff;
    --color-accent-subtle: #1c1f3d;
    --color-accent-muted: #2a2a5c;
    --color-info: #5ec2f2;
    --color-success: #4fd18b;
    --color-success-subtle: #0f2a1d;
    --color-warning: #f5b454;
    --color-warning-subtle: #2e2210;
    --color-danger: #ff7a93;
    --color-danger-subtle: #33121b;
    --color-overlay: rgb(3 6 14 / 0.7);
    --color-focus-ring: rgb(139 124 255 / 0.5);
    --color-skeleton: #1a2236;
    --color-checker-a: #1a2236;
    --color-checker-b: #111827;
    --color-category-edit: #ff9a5c;
    --color-category-organize: #a99eff;
    --color-category-secure: #4fd18b;
    --color-category-convert: #c79bff;
    --glow-1: #6b4fd8;
    --glow-2: #b2386b;
    --glow-3: #0086b3;
    --glow-4: #4b44d9;
    --glow-opacity: 0.38;
    --gradient-hero: radial-gradient(1200px 400px at 50% -120px, rgb(139 124 255 / 0.18), transparent 70%), radial-gradient(600px 300px at 90% 0, rgb(0 162 255 / 0.1), transparent 70%);
    --gradient-accent: linear-gradient(135deg, #8b7cff 0%, #a094ff 60%, #5ec2f2 100%);
    --shadow-xs: 0 1px 1px rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.65);
    color-scheme: dark;
}

/* Legacy names used by the tools' own stylesheets; they only point at the semantic tokens above (declared on the
   theme classes too, so they follow a .light or .dark subtree). */
:root,
.light,
.dark {
    --background: var(--color-bg);
    --foreground: var(--color-text);
    --card: var(--color-surface);
    --muted: var(--color-surface-sunken);
    --muted-foreground: var(--color-text-secondary);
    --border: var(--color-border);
    --primary: var(--color-accent);
    --primary-hover: var(--color-accent-hover);
    --primary-foreground: var(--color-text-on-accent);
    --accent: var(--color-accent-subtle);
    --success: var(--color-success);
    --danger: var(--color-danger);
    --checker-a: var(--color-checker-a);
    --checker-b: var(--color-checker-b);
    --radius: var(--radius-xl);
}