/* Cnn2rtl design tokens — shared across themes */
:root {
    /* Typography scale */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Plus Jakarta Sans', var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 0.9375rem;
    --text-xl: 1.125rem;
    --text-2xl: 1.25rem;

    /* Radii & shadows */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);

    /* Motion */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
    --landing-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --landing-duration: 0.72s;
    --landing-exit-duration: 0.52s;
    --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ui-duration: 0.42s;
    --ui-duration-fast: 0.34s;

    /* Layout */
    --header-height: 5.25rem;
    --stepper-height: 3rem;
    --shell-height: calc(100dvh - var(--header-height) - var(--stepper-height));

    /* CNN layer diagram tokens (shared with cnn_diagram.js) */
    --layer-input-fill: #eff6ff;
    --layer-input-stroke: #93c5fd;
    --layer-input-slice: #bfdbfe;
    --layer-conv-fill: #fff1f2;
    --layer-conv-stroke: #fb7185;
    --layer-conv-slice: #fecdd3;
    --layer-pool-fill: #f5f3ff;
    --layer-pool-stroke: #a78bfa;
    --layer-pool-slice: #ddd6fe;
    --layer-flatten-fill: #fff7ed;
    --layer-flatten-stroke: #fb923c;
    --layer-flatten-slice: #fed7aa;
    --layer-dense-fill: #fdf2f8;
    --layer-dense-stroke: #f472b6;
    --layer-dense-slice: #fbcfe8;

    --diagram-shape-text: #1e293b;
    --diagram-label-text: #1e293b;
    --diagram-arrow-color: #94a3b8;
    --diagram-label-invalid: #c0392b;
    --diagram-bg: #ffffff;

    color-scheme: light;
}