/*
 * Loja MSantos. The workshop bench on paper: light floor, orange action,
 * Hudson NY display, square geometry. Dark mode is the graphite shop after hours.
 *
 * Source of truth: DESIGN.md (msantos.vip identity, light default).
 */

@font-face {
    font-family: "Hudson NY";
    src: url("../fonts/HUDSON%20NY.OTF") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

:root {
    color-scheme: light;

    --font-display: "Hudson NY", ui-sans-serif, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-title: var(--font-display);
    --font-price: var(--font-body);
    --font-mono: "Inter", ui-sans-serif, sans-serif;

    --color-base-100: #f3f1ec;
    --color-base-200: #ebe7df;
    --color-base-300: #ddd6c8;
    --color-base-content: #1a1918;

    --color-primary: #a63b12;
    --color-primary-content: #f0eff4;
    --color-secondary: #66615b;
    --color-secondary-content: #f3f1ec;
    --color-accent: #a63b12;
    --color-accent-content: #f0eff4;
    --color-neutral: #1a1918;
    --color-neutral-content: #f3f1ec;

    --color-info: #3d4a5c;
    --color-info-content: #eef1f4;
    --color-success: #2f5c3a;
    --color-success-content: #eef6f0;
    --color-warning: #8a6a00;
    --color-warning-content: #f7f1dc;
    --color-error: #a63b12;
    --color-error-content: #f4edea;

    --maho-color-border: color-mix(in srgb, #1a1918 16%, transparent);
    --maho-color-rating: #a63b12;

    --product-tile-bg: #ebe7df;
    --product-cutout-shadow: none;
    --product-cutout-shadow-sm: none;
    --product-cutout-shadow-lg: none;
    --gallery-frame-bg: #ebe7df;
    --gallery-frame-pad: 1rem;

    --title-weight: 400;
    --title-tracking: -0.03em;
    --title-size: clamp(2rem, 1.4rem + 1.8vw, 2.875rem);
    --title-leading: 1.05;
    --title-style: normal;
    --title-case: none;

    --btn-case: uppercase;
    --btn-tracking: 0.08em;

    --stock-ink: #1a1918;
    --maho-color-special-price: #a63b12;

    --filter-title-font: var(--font-body);
    --filter-title-size: 0.6875rem;
    --filter-title-style: normal;
    --filter-title-case: uppercase;
    --filter-title-tracking: 0.13em;
    --filter-accent: #a63b12;
    --filter-accent-content: #f0eff4;

    --footer-bg: #121316;
    --footer-ink: #f0eff4;
    --footer-link-hover: #F26522;
    --footer-border: #121316;

    --radius-selector: 0rem;
    --radius-field: 0rem;
    --radius-box: 0rem;
    --depth: 0;
    --noise: 0;
}

html {
    background: var(--color-base-100);
    caret-color: var(--color-primary);
    scrollbar-color: var(--color-primary) var(--color-base-200);
}

body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #a63b12;
    color: #f0eff4;
}

.page-header {
    background: color-mix(in srgb, var(--color-base-100) 95%, transparent);
    border-bottom: 1px solid var(--maho-color-border);
    backdrop-filter: blur(16px);
}

.page-header-minimal {
    background: var(--color-base-100);
}

.logo img {
    height: 2.5rem;
}

#nav li.level0 > a {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

#nav li.level0 > a:hover,
#nav li.level0.menu-active > a,
#nav li.level0.active > a {
    color: var(--color-primary);
}

.btn,
button.button,
a.button {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    border-radius: 0;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:not(.search-button):not(.search-clear-button),
button.button:not(.search-button):not(.search-clear-button):not(.btn-update):not(.button2),
a.button:not(.button2) {
    background: var(--color-primary);
    color: var(--color-primary-content);
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-primary:not(.search-button):not(.search-clear-button):hover,
button.button:not(.search-button):not(.search-clear-button):not(.btn-update):not(.button2):hover,
a.button:not(.button2):hover {
    background: #8f2f0d;
    border-color: #8f2f0d;
    color: var(--color-primary-content);
    transform: translateY(-2px);
}

.btn-primary:not(.search-button):not(.search-clear-button):active,
button.button:not(.search-button):not(.search-clear-button):not(.btn-update):not(.button2):active,
a.button:not(.button2):active {
    transform: scale(0.95);
}

#search_mini_form .search-button,
#search_mini_form .search-clear-button {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--font-body);
    color: var(--color-base-content);
    transform: none;
}

.btn-outline,
.cta-secondary {
    background: transparent;
    box-shadow: none;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover,
.cta-secondary:hover {
    background: var(--color-primary);
    color: var(--color-primary-content);
    transform: translateY(-2px);
}

.badge,
.skip-link .count,
.price-box .discount-percent {
    border-radius: 0;
}

.price-box .discount-percent {
    background: var(--color-primary);
    color: var(--color-primary-content);
    border: none;
}

.card,
.card-border,
.modal,
.drawer,
.collapse,
.alert,
.menu,
.dropdown-content,
.tooltip {
    border-radius: 0;
}

.card-border {
    border-color: var(--maho-color-border);
    box-shadow: none;
}

.product-image,
.product-image-gallery {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--maho-color-border);
}

.products-grid .price-box .price,
.price,
.cart-totals table,
.data-table td {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

.input-text,
select,
textarea,
.form-list input,
.form-list select,
.form-list textarea {
    border-radius: 0;
    background: var(--color-base-200);
}

input:focus,
select:focus,
textarea:focus,
.input-text:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-color: var(--color-primary);
    box-shadow: none;
}

:is(a, button, .btn, .swatch-link, .dot, input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    box-shadow: none;
}

.breadcrumbs,
.product-breadcrumbs {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-color-scheme="light"])) {
        color-scheme: dark;

        --color-base-100: #121316;
        --color-base-200: #18191d;
        --color-base-300: #2a2b31;
        --color-base-content: #f0eff4;

        --color-primary: #F26522;
        --color-primary-content: #121316;
        --color-secondary: #9c9da3;
        --color-secondary-content: #121316;
        --color-accent: #F26522;
        --color-accent-content: #121316;
        --color-neutral: #f0eff4;
        --color-neutral-content: #121316;

        --color-info: #8aa0b8;
        --color-info-content: #121316;
        --color-success: #5a9a6a;
        --color-success-content: #121316;
        --color-warning: #eec200;
        --color-warning-content: #121316;
        --color-error: #F26522;
        --color-error-content: #121316;

        --maho-color-border: color-mix(in srgb, #f0eff4 12%, transparent);
        --maho-color-rating: #F26522;
        --product-tile-bg: #18191d;
        --gallery-frame-bg: #18191d;
        --stock-ink: #f0eff4;
        --maho-color-special-price: #F26522;
        --filter-accent: #F26522;
        --filter-accent-content: #121316;
        --footer-bg: #121316;
        --footer-ink: #f0eff4;
        --footer-link-hover: #ff7a3d;
        --footer-border: color-mix(in srgb, #f0eff4 12%, transparent);
    }

    :where(:root:not([data-color-scheme="light"])) ::selection {
        background: #F26522;
        color: #121316;
    }

    :where(:root:not([data-color-scheme="light"])) .btn-primary:not(.search-button):not(.search-clear-button):hover,
    :where(:root:not([data-color-scheme="light"])) button.button:not(.search-button):not(.search-clear-button):not(.btn-update):not(.button2):hover,
    :where(:root:not([data-color-scheme="light"])) a.button:not(.button2):hover {
        background: #ff7a3d;
        border-color: #ff7a3d;
        color: #121316;
    }
}