/* ==========================================================================
   Material 3 design tokens — Done With Joy
   Seed: terracotta #8b4513 (shared with jevgenijpavlenko.com brand).
   Light scheme only for now; a [data-theme="dark"] block redefining the same
   custom properties is all that's needed for dark mode — no component edits.
   Consumed through uno.config.ts `theme.colors.md.*` → `bg-md-primary`, etc.
   ========================================================================== */
:root {
    /* Key colors */
    --md-primary:                 #855321;
    --md-on-primary:              #ffffff;
    --md-primary-container:       #ffdcc3;
    --md-on-primary-container:    #2d1600;

    --md-secondary:               #735a48;
    --md-on-secondary:            #ffffff;
    --md-secondary-container:     #f1dfd3;
    --md-on-secondary-container:  #2a160a;

    --md-tertiary:                #5c6338;   /* olive — completion / success */
    --md-on-tertiary:             #ffffff;
    --md-tertiary-container:      #e1e8b9;
    --md-on-tertiary-container:   #191e00;

    --md-error:                   #ba1a1a;
    --md-on-error:                #ffffff;
    --md-error-container:         #ffdad6;
    /* Success — "created" feedback on boards, lists and cards (helper/itemMotion.ts) */
    --md-success:                 #2e6b3a;
    --md-success-container:       #cdebd0;
    --md-on-error-container:      #410002;

    /* Surfaces (warm neutral, tinted toward the seed hue) */
    --md-surface:                     #fff8f5;
    --md-surface-dim:                 #e8d7ce;
    --md-surface-container-lowest:    #ffffff;
    --md-surface-container-low:       #fff1ea;
    --md-surface-container:           #fceae1;
    --md-surface-container-high:      #f5e4db;
    --md-surface-container-highest:   #efded5;
    --md-on-surface:                  #211a15;
    --md-on-surface-variant:          #52443a;
    --md-outline:                     #85746a;
    --md-outline-variant:             #d7c3b8;
    --md-inverse-surface:             #372f2a;
    --md-inverse-on-surface:          #fdeee6;
    --md-scrim:                       #000000;

    /* State layers (M3: hover 8 %, pressed 12 % of the on-color) */
    --md-state-hover:                    color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    --md-state-pressed:                  color-mix(in srgb, var(--md-on-surface) 12%, transparent);
    --md-primary-hover:                  color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary));
    --md-primary-container-hover:        color-mix(in srgb, var(--md-on-primary-container) 8%, var(--md-primary-container));
    --md-secondary-container-hover:      color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container));
    --md-tertiary-hover:                 color-mix(in srgb, var(--md-on-tertiary) 8%, var(--md-tertiary));
    --md-tertiary-container-hover:       color-mix(in srgb, var(--md-on-tertiary-container) 8%, var(--md-tertiary-container));
    --md-error-hover:                    color-mix(in srgb, var(--md-error) 8%, transparent);

    /* Elevation (M3 shadow levels) */
    --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --md-elev-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
    --md-elev-4: 0 2px 3px rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);

    /* Semantic accents used by cards (due-date urgency, priority) */
    --md-due-week: #7a5a00;
    --md-due-soon: #9a4800;
}

:root {
    --color-bg-base: var(--md-surface);
    --color-bg-raised: #fffcf9;
    --color-brand: #8b4513;  /* тёмный терракота, достаточный контраст */
    --color-brand-muted: #c4956a;  /* светлее, теплее — для borders, subtle accents */
    --color-brand-soft:  #f0ddd0;  /* почти linen с терракота оттенком — для backgrounds, badges */
    --color-ink-muted: #7a6a5a;
    --color-date: color-mix(in srgb, var(--color-ink-muted) 70%, transparent);
    --color-link:          #334e68;
    --color-link-muted:    #607d95;  /* slate */
    --color-link-hover:    #1f3347;
    --color-link-underline: color-mix(in srgb, var(--color-link) 10%, transparent);
    --color-link-underline-hover: color-mix(in srgb, var(--color-link) 30%, transparent);
    /*--color-link:          #2d5be3;*/
    /*--color-link-muted:    #5a82e8; !* blue *!*/
    /*--color-link-hover:    #1a3fb5;*/
    /*--color-link:          #4338ca;*/
    /*--color-link-muted:    #6d63d4; !* indigo *!*/
    /*--color-link-hover:    #2d24a8;*/

    /*--color-link:          #0369a1;*/
    /*--color-link-muted:    #0ea5e9; !* ocean blue *!*/
    /*--color-link-hover:    #024f7a;*/

    --accent-color-neutral: #f7f3ef;
    --suggested-header-color: #0e2382;
    --my-hero-bg-color: #6394D8;
    --nav-bg: #6394D8;
    --nav-bg-dark: #4F76AD;
    /*--text-base-fontSize: 1.025rem !important;*/
}

[data-theme="dark"] {
    --color-bg-base: #1e1812;
    --color-bg-raised: #2a1f16;
    --my-hero-bg-color: #4F76AD;
    --nav-bg: #4F76AD;
    --nav-bg-dark: #23436f;
}

/* Theme toggle icon swap (driven by shortcuts.js data-theme attribute) */
:root:not([data-theme="dark"]) .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }

/* theme change transition */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}


html {
    scrollbar-gutter: stable;
    /* Forced for all text including MDX prose */
    font-feature-settings: "cv02" 1, "cv05" 1, "ss01" 1 !important;
    font-variation-settings: "opsz" 32;
}

body {
    position: relative;
    background-color: var(--color-bg-base);
}

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(100px);
}


.noisyBg111 {
    background: url(/noiseBg1.svg);
}

.noisyBgHeader {
    background: url(/noiseBg1.svg);
}

.noisyButton {
    background: url(/noiseButton.svg);
}

.scene {
    background: linear-gradient(135deg, #6baed6, #9e7bb5, #e08a6a);
    /* or your actual page background */
}

/*.noise-claude {*/
/*    position: relative;*/
/*    background: rgba(232, 221, 213, 0.35);*/
/*    backdrop-filter: blur(12px);*/
/*    -webkit-backdrop-filter: blur(12px);*/
/*}*/

/* noise grain layer */
.noise-claude::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(/noise-claude.svg);
    /*background-size: 300px 300px;*/
    pointer-events: none;
    z-index: 0;
}

/* keep card content above the noise layer */
/*.noise-claude > * {*/
/*    position: relative;*/
/*    z-index: 1;*/
/*}*/

/* Hide scrollbar but keep scrolling */
.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}


/* Dialog enter/leave — Vue <Transition name="m3-pop"> around every m3-scrim root
   (see helper/useDialogTransition.ts). Scrim fades; the dialog inside slides up a
   touch on enter and shrinks slightly on leave. */
.m3-pop-enter-active,
.m3-pop-leave-active { transition: opacity 180ms ease; }
.m3-pop-enter-active .m3-dialog,
.m3-pop-leave-active .m3-dialog { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), opacity 180ms ease; }
.m3-pop-enter-from,
.m3-pop-leave-to { opacity: 0; }
.m3-pop-enter-from .m3-dialog { transform: translateY(12px) scale(0.97); }
.m3-pop-leave-to .m3-dialog { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
    .m3-pop-enter-active,
    .m3-pop-leave-active,
    .m3-pop-enter-active .m3-dialog,
    .m3-pop-leave-active .m3-dialog { transition-duration: 1ms; }
}

/* Drag cursor: the grabbing hand appears only once an item is actually held — Sortable's
   chosen class on press (cards, Edit-lists tiles), then body.is-dragging while it moves
   (toggled by Board.vue / Stacking.vue) so the cursor stays put over other elements.
   Handles keep the default cursor on hover. */
.card-chosen .card-drag-handle,
.card-chosen.card-drag-handle,
.tile-chosen { cursor: grabbing; }
body.is-dragging,
body.is-dragging * { cursor: grabbing !important; }

/* "Saved" snackbar — Vue <Transition name="m3-toast"> in SaveToast.vue. Drops in from
   just above its spot, fades out in place. */
.m3-toast-enter-active { transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0, 0, 1); }
.m3-toast-leave-active { transition: opacity 240ms ease; }
.m3-toast-enter-from { opacity: 0; transform: translateY(-12px); }
.m3-toast-leave-to { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .m3-toast-enter-active { transition: opacity 180ms ease; }
    .m3-toast-enter-from { transform: none; }
}

/* Board page on touch devices: nothing is text-selectable, so a long press goes
   straight to Sortable's delayed drag instead of iOS text selection / loupe /
   image callout. Form fields opt back in. Added/removed by Board.vue on mount. */
@media (pointer: coarse) {
    .board-touch,
    .board-touch * {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    .board-touch input,
    .board-touch textarea,
    .board-touch select,
    .board-touch [contenteditable] {
        -webkit-user-select: text;
        user-select: text;
    }
    .board-touch img {
        -webkit-user-drag: none;
    }
}