/* Palette values originate in Theme/JoyleeTheme.cs. Only product-specific tokens live here. */
:root {
    --jl-color-bg-canvas: var(--mud-palette-background);
    --jl-color-bg-surface: var(--mud-palette-surface);
    --jl-color-bg-surface-subtle: var(--mud-palette-background-gray);
    --jl-color-bg-brand: var(--mud-palette-primary);
    --jl-color-text-on-brand: var(--mud-palette-primary-text);
    --jl-color-text-primary: var(--mud-palette-text-primary);
    --jl-color-text-secondary: var(--mud-palette-text-secondary);
    --jl-color-border-default: var(--mud-palette-lines-default);
    --jl-color-text-disabled: var(--mud-palette-text-disabled);
    --jl-color-bg-surface-raised: var(--mud-palette-surface);
    --jl-color-bg-brand-hover: var(--mud-palette-primary-darken);
    --jl-color-bg-accent: var(--mud-palette-secondary);
    --jl-color-text-on-accent: var(--mud-palette-secondary-text);
    --jl-color-border-strong: var(--mud-palette-lines-inputs);
    --jl-color-border-brand: var(--mud-palette-primary);
    --jl-color-border-danger: var(--mud-palette-error);
    --jl-color-icon-default: var(--jl-color-text-secondary);
    --jl-color-icon-muted: var(--jl-color-text-muted);
    --jl-color-icon-on-brand: var(--jl-color-text-on-brand);
    --jl-color-icon-brand: var(--jl-color-text-link);
    --jl-color-icon-success: var(--jl-color-text-success);
    --jl-color-icon-danger: var(--jl-color-text-danger);
    --jl-color-overlay-scrim: rgba(0,0,0,.48);
    --jl-color-text-muted: #6d5e56;
    --jl-color-bg-accent-subtle: #fff8e8;
    --jl-color-bg-danger: #fff0ee;
    --jl-color-text-danger: #b74b43;
    --jl-color-border-focus: #914fa7;
    --jl-color-text-link: #773b8e;
    --jl-color-bg-brand-subtle: #f8f2fa;
    --jl-color-text-brand: #5f2e72;
    --jl-color-bg-success: #edf8f2;
    --jl-color-text-success: #2d7b57;
    --jl-color-bg-warning: #fff8e8;
    --jl-color-text-warning: #8f4e13;
    --jl-color-bg-info: #eef6ff;
    --jl-color-text-info: #2f6399;
    --jl-font-ui: 'Inter', sans-serif;
    --jl-font-reader: 'Literata', Georgia, serif;
    --jl-type-display-size: 3rem; --jl-type-display-leading: 3.5rem;
    --jl-type-h1-size: 2.25rem; --jl-type-h1-leading: 2.75rem;
    --jl-type-h2-size: 1.75rem; --jl-type-h2-leading: 2.25rem;
    --jl-type-h3-size: 1.375rem; --jl-type-h3-leading: 1.875rem;
    --jl-type-body-lg-size: 1.125rem; --jl-type-body-lg-leading: 1.75rem;
    --jl-type-body-md-size: 1rem; --jl-type-body-md-leading: 1.5rem;
    --jl-type-body-sm-size: .875rem; --jl-type-body-sm-leading: 1.25rem;
    --jl-type-label-size: .875rem; --jl-type-label-leading: 1.25rem;
    --jl-type-caption-size: .75rem; --jl-type-caption-leading: 1rem;
    --jl-type-heading-tracking: -.03em;
    --jl-space-1: 4px; --jl-space-2: 8px; --jl-space-3: 12px; --jl-space-4: 16px;
    --jl-space-5: 20px; --jl-space-6: 24px; --jl-space-8: 32px; --jl-space-10: 40px;
    --jl-space-12: 48px; --jl-space-16: 64px;
    --jl-radius-sm: 6px; --jl-radius-md: 10px; --jl-radius-lg: 16px; --jl-radius-xl: 24px; --jl-radius-full: 999px;
    --jl-shadow-sm: 0 1px 2px rgba(29,25,23,.08);
    --jl-shadow-md: 0 8px 24px rgba(29,25,23,.12);
    --jl-shadow-lg: 0 20px 48px rgba(29,25,23,.18);
    --jl-motion-fast: 140ms; --jl-motion-base: 220ms; --jl-ease-out: cubic-bezier(.2, 0, 0, 1);
    --jl-focus-width: 2px; --jl-focus-offset: 3px; --jl-focus-inset: -2px;
    --jl-control-s: 36px; --jl-control-m: 44px; --jl-control-l: 52px;
    --jl-size-icon-s: 16px; --jl-size-icon-m: 20px; --jl-size-icon-l: 24px;
    --jl-reader-compact: 560px; --jl-reader-comfortable: 720px;
    --jl-reader-size: 1.25rem; --jl-reader-leading: 2.125rem;
}
html[data-theme='dark'] {
    --jl-color-bg-surface-raised: var(--mud-palette-background-gray);
    --jl-color-text-muted: #aa9a8f;
    --jl-color-bg-accent-subtle: #49351f;
    --jl-color-bg-danger: #542c29;
    --jl-color-text-danger: #f0a49d;
    --jl-color-border-focus: #f0bd5a;
    --jl-color-text-link: #dfc3e7;
    --jl-color-bg-brand-subtle: #34183f;
    --jl-color-text-brand: #dfc3e7;
    --jl-color-bg-success: #234333;
    --jl-color-text-success: #b1e1c7;
    --jl-color-bg-warning: #49351f;
    --jl-color-text-warning: #f8d88f;
    --jl-color-bg-info: #1f3550;
    --jl-color-text-info: #94bfef;
}
@media (max-width: 599px) {
    :root { --jl-reader-size: 1.125rem; --jl-reader-leading: 1.875rem; }
}