:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root {
    --ink-rgb: 0 0 0;
    --blue-rgb: 0 0 255;
    --surface-rgb: 255 255 255;
    --shadow-rgb: 0 0 0;
    --on-accent: #FFFFFF;
    --on-accent-rgb: 255 255 255;
    --scrim-rgb: 20 20 18;

    --blue-pure: #0000FF;
    --blue-pure-rgb: 0 0 255;

    --mark-red-pure: #EE0000;

    --surface: rgb(var(--surface-rgb));
}

:root {
    --d-paper: #14140F;
    --d-ink: #E8E8E0;
    --d-ink-soft: #A3A39B;
    --d-ink-faint: rgba(232, 232, 224, 0.45);
    --d-line: rgba(232, 232, 224, 0.18);

    --d-blue: #7C6BFF;
    --d-blue-soft: rgba(124, 107, 255, 0.62);
    --d-blue-hair: rgba(124, 107, 255, 0.36);
    --d-blue-strong: #9A8CFF;
    --d-select: rgba(124, 107, 255, 0.30);

    --d-guide-minor: rgba(124, 107, 255, 0.045);
    --d-guide-major: rgba(124, 107, 255, 0.100);
    --d-guide-strong: rgba(124, 107, 255, 0.32);
    --d-guide-soft: rgba(124, 107, 255, 0.18);

    --d-ink-rgb: 232 232 224;
    --d-blue-rgb: 124 107 255;
    --d-surface-rgb: 78 78 68;
    --d-shadow-rgb: 0 0 0;
    --d-paper-rgb: 20 20 15;

    --d-dot-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'><g fill='rgba(124,107,255,0.34)'><circle cx='0' cy='0' r='0.75'/><circle cx='15' cy='0' r='0.75'/><circle cx='0' cy='15' r='0.75'/><circle cx='15' cy='15' r='0.75'/><circle cx='7.5' cy='7.5' r='0.75'/></g></svg>");
    --d-fleck-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><g fill='rgba(124,107,255,0.30)'><circle cx='390' cy='135' r='1.05'/><circle cx='165' cy='105' r='1.05'/><circle cx='120' cy='105' r='1.05'/><circle cx='405' cy='60' r='1.05'/><circle cx='150' cy='240' r='1.05'/><circle cx='270' cy='300' r='1.05'/><circle cx='120' cy='75' r='1.05'/><circle cx='270' cy='315' r='1.05'/><circle cx='330' cy='255' r='1.05'/><circle cx='15' cy='420' r='1.05'/><circle cx='135' cy='15' r='1.05'/><circle cx='405' cy='240' r='1.05'/><circle cx='90' cy='390' r='1.05'/><circle cx='405' cy='105' r='1.05'/><circle cx='255' cy='405' r='1.05'/><circle cx='195' cy='90' r='1.05'/><circle cx='165' cy='165' r='1.05'/></g><g stroke='rgba(124,107,255,0.20)' stroke-width='1' fill='none'><path d='M60 45l-30 0'/><path d='M240 105l15 -15'/><path d='M45 45l30 -30'/><path d='M270 435l-30 -30'/><path d='M345 270l0 15l15 -15'/><path d='M360 165l0 15'/><path d='M285 225l0 30'/><path d='M60 135l-30 -30'/><path d='M375 450l0 15'/><path d='M435 255l15 0l15 -15'/><path d='M120 285l-15 -15'/><path d='M360 75l-15 15'/></g></svg>");
    --d-diag-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21.213' height='21.213'><path d='M0 21.213L21.213 0' stroke='rgba(124,107,255,0.30)' stroke-width='1' stroke-dasharray='3 2'/></svg>");
    --d-grid-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'><path d='M0 0H15' stroke='rgba(124,107,255,0.30)' stroke-width='1' stroke-dasharray='3 2'/><path d='M0 0V15' stroke='rgba(124,107,255,0.30)' stroke-width='1' stroke-dasharray='3 2'/></svg>");

    --d-card-a: #24241C;
    --d-card-b: #1C1C15;

    --d-ink-body: #E8E8E0;

    --d-wash-a: 44 46 56;
    --d-wash-b: 28 30 38;

    --d-pen-soft: rgba(124, 107, 255, 0.5);
    --d-pencil: #A3A39B;
    --d-pencil-soft: #55554E;
    --d-grid-ink: rgba(124, 107, 255, 0.30);
    --d-scrap-edge: rgba(232, 232, 224, 0.22);
    --d-scrap-edge-red: rgba(232, 232, 224, 0.30);

    --d-muted: #9A9A92;

    --d-red: #FF5A63;
    --d-red-soft: rgba(255, 90, 99, 0.24);

    --d-entre: #FF6B6B;
    --d-product: #4FC96A;
    --d-marketing: #E8A83D;
    --d-design: #5AA9E6;
    --d-t-ai: #5AA9E6;
    --d-t-product: #4FC96A;
    --d-t-market: #FF6B6B;
    --d-t-people: #E8A83D;
    --d-t-city: #A87FE0;
    --d-t-notes: #A3A39B;
}

:root[data-theme="dark"] {
    --paper: var(--d-paper);
    --paper-rgb: var(--d-paper-rgb);
    --ink: var(--d-ink);
    --ink-body: var(--d-ink-body);
    --ink-soft: var(--d-ink-soft);
    --ink-faint: var(--d-ink-faint);
    --line: var(--d-line);
    --blue: var(--d-blue);
    --blue-soft: var(--d-blue-soft);
    --blue-hair: var(--d-blue-hair);
    --blue-strong: var(--d-blue-strong);
    --select: var(--d-select);
    --guide-minor: var(--d-guide-minor);
    --guide-major: var(--d-guide-major);
    --guide-strong: var(--d-guide-strong);
    --guide-soft: var(--d-guide-soft);
    --ink-rgb: var(--d-ink-rgb);
    --blue-rgb: var(--d-blue-rgb);
    --surface-rgb: var(--d-surface-rgb);
    --shadow-rgb: var(--d-shadow-rgb);
    --grid-image: var(--d-grid-image);
    --dot-image: var(--d-dot-image);
    --diag-image: var(--d-diag-image);
    --fleck-image: var(--d-fleck-image);
    --card-a: var(--d-card-a);
    --card-b: var(--d-card-b);
    --wash-a: var(--d-wash-a);
    --wash-b: var(--d-wash-b);
    --pen-soft: var(--d-pen-soft);
    --pencil: var(--d-pencil);
    --pencil-soft: var(--d-pencil-soft);
    --grid-ink: var(--d-grid-ink);
    --scrap-edge: var(--d-scrap-edge);
    --scrap-edge-red: var(--d-scrap-edge-red);
    --muted: var(--d-muted);
    --red: var(--d-red);
    --red-soft: var(--d-red-soft);
    --entre: var(--d-entre);
    --product: var(--d-product);
    --marketing: var(--d-marketing);
    --design: var(--d-design);
    --t-ai: var(--d-t-ai);
    --t-product: var(--d-t-product);
    --t-market: var(--d-t-market);
    --t-people: var(--d-t-people);
    --t-city: var(--d-t-city);
    --t-notes: var(--d-t-notes);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: var(--d-paper);
        --paper-rgb: var(--d-paper-rgb);
        --ink: var(--d-ink);
        --ink-body: var(--d-ink-body);
        --ink-soft: var(--d-ink-soft);
        --ink-faint: var(--d-ink-faint);
        --line: var(--d-line);
        --blue: var(--d-blue);
        --blue-soft: var(--d-blue-soft);
        --blue-hair: var(--d-blue-hair);
        --blue-strong: var(--d-blue-strong);
        --select: var(--d-select);
        --guide-minor: var(--d-guide-minor);
        --guide-major: var(--d-guide-major);
        --guide-strong: var(--d-guide-strong);
        --guide-soft: var(--d-guide-soft);
        --ink-rgb: var(--d-ink-rgb);
        --blue-rgb: var(--d-blue-rgb);
        --surface-rgb: var(--d-surface-rgb);
        --shadow-rgb: var(--d-shadow-rgb);
        --grid-image: var(--d-grid-image);
        --dot-image: var(--d-dot-image);
        --diag-image: var(--d-diag-image);
        --fleck-image: var(--d-fleck-image);
        --card-a: var(--d-card-a);
        --card-b: var(--d-card-b);
        --wash-a: var(--d-wash-a);
        --wash-b: var(--d-wash-b);
        --pen-soft: var(--d-pen-soft);
        --pencil: var(--d-pencil);
        --pencil-soft: var(--d-pencil-soft);
        --grid-ink: var(--d-grid-ink);
        --scrap-edge: var(--d-scrap-edge);
        --scrap-edge-red: var(--d-scrap-edge-red);
        --muted: var(--d-muted);
        --red: var(--d-red);
        --red-soft: var(--d-red-soft);
        --entre: var(--d-entre);
        --product: var(--d-product);
        --marketing: var(--d-marketing);
        --design: var(--d-design);
        --t-ai: var(--d-t-ai);
        --t-product: var(--d-t-product);
        --t-market: var(--d-t-market);
        --t-people: var(--d-t-people);
        --t-city: var(--d-t-city);
        --t-notes: var(--d-t-notes);
    }
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-mute,
.theme-mute * {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
}

:root[data-theme="dark"] .theme-icon { transform: rotate(180deg); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon { transform: rotate(180deg); }
}