/*
 * Scoped warm minimal theme for the next yezi2 product style.
 *
 * This file is intentionally opt-in. Apply `.theme-minimal` or
 * `data-design-theme="minimal"` to a page shell, feature root, or preview
 * container to use these tokens without changing the legacy Material theme.
 */

.theme-minimal,
[data-design-theme="minimal"] {
    color-scheme: light;

    --minimal-font-sans: "SF Pro Display", "Geist Sans", "Helvetica Neue", Arial, sans-serif;
    --minimal-font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", monospace;

    --minimal-color-canvas: #fbfbfa;
    --minimal-color-canvas-raised: #f7f6f3;
    --minimal-color-surface: #ffffff;
    --minimal-color-surface-soft: #f9f9f8;
    --minimal-color-surface-muted: #f1eee8;
    --minimal-color-ink: #111111;
    --minimal-color-ink-soft: #2f3437;
    --minimal-color-muted: #787774;
    --minimal-color-subtle: #9b9891;
    --minimal-color-border: #eae6dc;
    --minimal-color-border-strong: #d8d3c8;
    --minimal-color-divider: rgba(17, 17, 17, 0.06);
    --minimal-color-focus: #9f6b2f;
    --minimal-color-focus-soft: #fbf3db;
    --minimal-color-accent-blue: #e1f3fe;
    --minimal-color-accent-blue-ink: #1f6c9f;
    --minimal-color-accent-green: #edf3ec;
    --minimal-color-accent-green-ink: #346538;
    --minimal-color-accent-yellow: #fbf3db;
    --minimal-color-accent-yellow-ink: #956400;
    --minimal-color-accent-red: #fdebec;
    --minimal-color-accent-red-ink: #9f2f2d;

    --minimal-radius-xs: 4px;
    --minimal-radius-sm: 6px;
    --minimal-radius-md: 8px;
    --minimal-radius-lg: 12px;
    --minimal-radius-pill: 999px;

    --minimal-shadow-none: none;
    --minimal-shadow-soft: 0 2px 10px rgba(17, 17, 17, 0.04);
    --minimal-shadow-float: 0 10px 28px rgba(17, 17, 17, 0.08);

    --minimal-space-1: 4px;
    --minimal-space-2: 8px;
    --minimal-space-3: 12px;
    --minimal-space-4: 16px;
    --minimal-space-5: 20px;
    --minimal-space-6: 24px;
    --minimal-space-8: 32px;
    --minimal-space-10: 40px;

    --md-source: #111111;
    --md-ref-palette-primary0: #000000;
    --md-ref-palette-primary10: #111111;
    --md-ref-palette-primary20: #2f3437;
    --md-ref-palette-primary25: #3b3f41;
    --md-ref-palette-primary30: #4a4d4f;
    --md-ref-palette-primary35: #5b5c5a;
    --md-ref-palette-primary40: #6b6a66;
    --md-ref-palette-primary50: #787774;
    --md-ref-palette-primary60: #9b9891;
    --md-ref-palette-primary70: #2f3437;
    --md-ref-palette-primary80: #3b3f41;
    --md-ref-palette-primary90: #f1eee8;
    --md-ref-palette-primary95: #f7f6f3;
    --md-ref-palette-primary98: #fbfbfa;
    --md-ref-palette-primary99: #ffffff;
    --md-ref-palette-primary100: #ffffff;

    --md-sys-color-primary: #111111;
    --md-sys-color-primary-rgb: 17, 17, 17;
    --md-sys-color-primary-numeric: 17, 17, 17;
    --md-sys-color-surface-tint: #fbfbfa;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #fbf3db;
    --md-sys-color-on-primary-container: #2f3437;
    --md-sys-color-secondary: #787774;
    --md-sys-color-secondary-rgb: 120, 119, 116;
    --md-sys-color-secondary-numeric: 120, 119, 116;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #f1eee8;
    --md-sys-color-on-secondary-container: #2f3437;
    --md-sys-color-tertiary: #956400;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #fbf3db;
    --md-sys-color-on-tertiary-container: #3f2a00;
    --md-sys-color-error: #9f2f2d;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #fdebec;
    --md-sys-color-on-error-container: #681917;
    --md-sys-color-background: #fbfbfa;
    --md-sys-color-on-background: #111111;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #111111;
    --md-sys-color-surface-variant: #f7f6f3;
    --md-sys-color-on-surface-variant: #787774;
    --md-sys-color-outline: #9b9891;
    --md-sys-color-outline-variant: #eae6dc;
    --md-sys-color-shadow: #111111;
    --md-sys-color-scrim: #111111;
    --md-sys-color-inverse-surface: #2f3437;
    --md-sys-color-inverse-on-surface: #fbfbfa;
    --md-sys-color-inverse-primary: #fbf3db;
    --md-sys-color-primary-fixed: #fbf3db;
    --md-sys-color-on-primary-fixed: #111111;
    --md-sys-color-primary-fixed-dim: #f1e4bd;
    --md-sys-color-on-primary-fixed-variant: #4d3711;
    --md-sys-color-secondary-fixed: #f1eee8;
    --md-sys-color-on-secondary-fixed: #111111;
    --md-sys-color-secondary-fixed-dim: #e3ded2;
    --md-sys-color-on-secondary-fixed-variant: #4d4942;
    --md-sys-color-tertiary-fixed: #fbf3db;
    --md-sys-color-on-tertiary-fixed: #3f2a00;
    --md-sys-color-tertiary-fixed-dim: #e7d8af;
    --md-sys-color-on-tertiary-fixed-variant: #6a4700;
    --md-sys-color-surface-dim: #e8e5de;
    --md-sys-color-surface-bright: #ffffff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #fbfbfa;
    --md-sys-color-surface-container: #f7f6f3;
    --md-sys-color-surface-container-high: #f1eee8;
    --md-sys-color-surface-container-highest: #e8e5de;
}

html[theme="dark"].theme-minimal,
html[theme="dark"] .theme-minimal,
html[theme="dark"] [data-design-theme="minimal"],
.theme-minimal[theme="dark"],
[data-design-theme="minimal"][theme="dark"] {
    color-scheme: dark;

    --minimal-color-canvas: #181715;
    --minimal-color-canvas-raised: #201f1c;
    --minimal-color-surface: #24231f;
    --minimal-color-surface-soft: #2a2924;
    --minimal-color-surface-muted: #333129;
    --minimal-color-ink: #f7f4ed;
    --minimal-color-ink-soft: #e9e4da;
    --minimal-color-muted: #b8b0a4;
    --minimal-color-subtle: #8d867d;
    --minimal-color-border: rgba(247, 244, 237, 0.1);
    --minimal-color-border-strong: rgba(247, 244, 237, 0.16);
    --minimal-color-divider: rgba(247, 244, 237, 0.08);
    --minimal-color-focus: #d7b56d;
    --minimal-color-focus-soft: #3b3320;
    --minimal-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.18);
    --minimal-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.28);

    --md-source: #f7f4ed;
    --md-ref-palette-primary0: #000000;
    --md-ref-palette-primary10: #181715;
    --md-ref-palette-primary20: #24231f;
    --md-ref-palette-primary25: #333129;
    --md-ref-palette-primary30: #3b3320;
    --md-ref-palette-primary35: #5b4c2d;
    --md-ref-palette-primary40: #6d5b35;
    --md-ref-palette-primary50: #8d7650;
    --md-ref-palette-primary60: #b89a62;
    --md-ref-palette-primary70: #333129;
    --md-ref-palette-primary80: #3b3320;
    --md-ref-palette-primary90: #e9e4da;
    --md-ref-palette-primary95: #f7f4ed;
    --md-ref-palette-primary98: #fbf8f0;
    --md-ref-palette-primary99: #fffcf7;
    --md-ref-palette-primary100: #ffffff;

    --md-sys-color-primary: #f7f4ed;
    --md-sys-color-primary-rgb: 247, 244, 237;
    --md-sys-color-primary-numeric: 247, 244, 237;
    --md-sys-color-surface-tint: #181715;
    --md-sys-color-on-primary: #181715;
    --md-sys-color-primary-container: #3b3320;
    --md-sys-color-on-primary-container: #f7f4ed;
    --md-sys-color-secondary: #b8b0a4;
    --md-sys-color-secondary-rgb: 184, 176, 164;
    --md-sys-color-secondary-numeric: 184, 176, 164;
    --md-sys-color-on-secondary: #181715;
    --md-sys-color-secondary-container: #333129;
    --md-sys-color-on-secondary-container: #e9e4da;
    --md-sys-color-tertiary: #d7b56d;
    --md-sys-color-on-tertiary: #181715;
    --md-sys-color-tertiary-container: #3b3320;
    --md-sys-color-on-tertiary-container: #f7f4ed;
    --md-sys-color-error: #f1a8a5;
    --md-sys-color-on-error: #35100f;
    --md-sys-color-error-container: #49201e;
    --md-sys-color-on-error-container: #fdebec;
    --md-sys-color-background: #181715;
    --md-sys-color-on-background: #f7f4ed;
    --md-sys-color-surface: #24231f;
    --md-sys-color-on-surface: #f7f4ed;
    --md-sys-color-surface-variant: #333129;
    --md-sys-color-on-surface-variant: #b8b0a4;
    --md-sys-color-outline: #8d867d;
    --md-sys-color-outline-variant: rgba(247, 244, 237, 0.1);
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-inverse-surface: #f7f4ed;
    --md-sys-color-inverse-on-surface: #181715;
    --md-sys-color-inverse-primary: #4d3711;
    --md-sys-color-surface-dim: #181715;
    --md-sys-color-surface-bright: #2a2924;
    --md-sys-color-surface-container-lowest: #181715;
    --md-sys-color-surface-container-low: #201f1c;
    --md-sys-color-surface-container: #24231f;
    --md-sys-color-surface-container-high: #2a2924;
    --md-sys-color-surface-container-highest: #333129;
}

.theme-minimal,
[data-design-theme="minimal"] {
    background: var(--minimal-color-canvas);
    color: var(--minimal-color-ink);
    font-family: var(--minimal-font-sans);
}

.theme-minimal .minimal-surface,
[data-design-theme="minimal"] .minimal-surface {
    border: 1px solid var(--minimal-color-border);
    border-radius: var(--minimal-radius-lg);
    background: var(--minimal-color-surface);
    box-shadow: var(--minimal-shadow-none);
    color: var(--minimal-color-ink);
}

.theme-minimal .minimal-floating-surface,
[data-design-theme="minimal"] .minimal-floating-surface {
    border: 1px solid var(--minimal-color-border);
    border-radius: var(--minimal-radius-pill);
    background: color-mix(in srgb, var(--minimal-color-surface) 88%, transparent);
    box-shadow: var(--minimal-shadow-soft);
    -webkit-backdrop-filter: blur(12px) saturate(1.02);
    backdrop-filter: blur(12px) saturate(1.02);
}

.theme-minimal .minimal-button,
[data-design-theme="minimal"] .minimal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--minimal-color-ink);
    border-radius: var(--minimal-radius-sm);
    background: var(--minimal-color-ink);
    color: var(--minimal-color-surface);
    font-family: var(--minimal-font-sans);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.theme-minimal .minimal-button:hover,
.theme-minimal .minimal-button:focus-visible,
[data-design-theme="minimal"] .minimal-button:hover,
[data-design-theme="minimal"] .minimal-button:focus-visible {
    background: var(--minimal-color-ink-soft);
    border-color: var(--minimal-color-ink-soft);
}

.theme-minimal .minimal-button:active,
[data-design-theme="minimal"] .minimal-button:active {
    transform: scale(0.98);
}

.theme-minimal .minimal-button.secondary,
[data-design-theme="minimal"] .minimal-button.secondary {
    border-color: var(--minimal-color-border);
    background: var(--minimal-color-surface);
    color: var(--minimal-color-ink);
}

.theme-minimal .minimal-chip,
[data-design-theme="minimal"] .minimal-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--minimal-color-border);
    border-radius: var(--minimal-radius-pill);
    background: var(--minimal-color-surface-soft);
    color: var(--minimal-color-muted);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
}

.theme-minimal .minimal-input,
[data-design-theme="minimal"] .minimal-input {
    border: 1px solid var(--minimal-color-border);
    border-radius: var(--minimal-radius-md);
    background: var(--minimal-color-surface);
    color: var(--minimal-color-ink);
    box-shadow: none;
}

.theme-minimal .minimal-input:focus,
[data-design-theme="minimal"] .minimal-input:focus {
    border-color: var(--minimal-color-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--minimal-color-focus) 14%, transparent);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .theme-minimal .minimal-button,
    [data-design-theme="minimal"] .minimal-button {
        transition: none;
    }
}