/* ==========================================================================
   Meridian design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius, shadow and
   motion. Components below consume these variables and never hard-code a
   value, so the whole product can be re-themed from one place.
   ========================================================================== */

:root {
    /* --- Neutrals: warm-tinted greys, which read as softer than pure grey --- */
    --gray-0:  #ffffff;
    --gray-25: #fcfcfd;
    --gray-50: #f7f8f9;
    --gray-100:#f1f2f4;
    --gray-150:#e8eaed;
    --gray-200:#e3e5e8;
    --gray-300:#d3d6db;
    --gray-400:#a8aeb7;
    --gray-500:#7c828b;
    --gray-600:#5c626b;
    --gray-700:#434950;
    --gray-800:#2c313a;
    --gray-900:#191c21;

    /* --- Brand: a single confident green, used for primary action only --- */
    --green-50:  #f0faf5;
    --green-100: #dcf5e8;
    --green-200: #abe5c9;
    --green-500: #007a5c;
    --green-600: #006e52;
    --green-700: #005a43;
    --green-800: #004535;

    /* --- Accent: reserved for links and secondary highlights --- */
    --blue-50:  #eef4ff;
    --blue-100: #dce9fb;
    --blue-200: #b8d3f6;
    --blue-600: #2c6ecb;
    --blue-700: #1b519a;

    /* --- Status --- */
    --red-50:  #fef2f2;
    --red-100: #fee2e2;
    --red-500: #d72c0d;
    --red-600: #bf2914;
    --amber-50: #fff8eb;
    --amber-100:#fdefd2;
    --amber-500:#b98900;
    --blue-success:#005bd3;

    /* --- Surfaces --- */
    --surface:            var(--gray-0);
    --surface-subdued:    var(--gray-50);
    --surface-sunken:     var(--gray-100);
    --surface-inverse:    var(--gray-900);
    --border:             var(--gray-200);
    --border-subdued:     var(--gray-150);
    --text:               var(--gray-900);
    --text-secondary:     var(--gray-600);
    --text-subdued:       var(--gray-500);
    --text-inverse:       var(--gray-0);

    /* --- Typography --- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-3xl: 2.5rem;
    --text-2xl: 1.875rem;
    --text-xl:  1.5rem;
    --text-lg:  1.25rem;
    --text-md:  1rem;
    --text-sm:  0.875rem;
    --text-xs:  0.75rem;

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.6;

    /* --- Spacing scale (4px base) --- */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* --- Radius ---
       Kept deliberately small. Generous corner radii are the clearest signal of a
       consumer-toy visual language: they make every surface read as a pill or a
       sticker. At 4-10px a rectangle reads as a rectangle, which is what makes
       dense admin tables and product grids look like software rather than a
       toy shop. --radius-pill is the single exception, for shapes that genuinely
       are pills (badges, switches, avatars). */
    --radius-sm: 3px;
    --radius:    5px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-pill: 999px;

    /* --- Elevation ---
       Shadows are for genuinely floating things (menus, dialogs, dragged cards).
       Everything else is separated by a hairline border. A shadow on every card
       is what makes a layout look soft and unfinished; a border looks precise. */
    --shadow-xs: 0 1px 1px rgba(19, 22, 28, 0.04);
    --shadow-sm: 0 1px 2px rgba(19, 22, 28, 0.06);
    --shadow-md: 0 2px 4px rgba(19, 22, 28, 0.06), 0 1px 2px rgba(19, 22, 28, 0.04);
    --shadow-lg: 0 8px 24px rgba(19, 22, 28, 0.08), 0 2px 4px rgba(19, 22, 28, 0.04);
    --shadow-xl: 0 20px 48px rgba(19, 22, 28, 0.12), 0 4px 8px rgba(19, 22, 28, 0.04);

    /* --- Motion ---
       --ease-out is the workhorse. --ease-spring is named for where it used to
       sit, not for what it does: it was an overshoot curve, and overshoot is the
       other half of the toy problem. It bounced past the target and settled back,
       which reads as playful rather than responsive. It is now a curve with a
       little more front-loaded deceleration than --ease-out, so the name still
       describes its role (the liveliest curve in the set) without the bounce.
       Never overshoot in this product. */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

    --duration-fast:   110ms;
    --duration-normal: 160ms;
    --duration-slow:   240ms;
    --duration-slower: 360ms;

    /* --- Layout --- */
    --sidebar-width: 15rem;
    --content-max:    78rem;
    --reading-max:    42rem;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text);
    background: var(--surface-subdued);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--leading-tight);
    font-weight: 600;
    letter-spacing: -0.011em;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: var(--blue-600);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--blue-700);
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-6) 0;
}

/* Visible focus for keyboard users only. */
:focus-visible {
    outline: 2px solid var(--blue-600);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    transform: translateY(-200%);
    transition: transform var(--duration-normal) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}

/* Respect a user's reduced-motion preference across every animation. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Motion primitives
   ========================================================================== */

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}

.animate-rise {
    animation: rise-in var(--duration-slow) var(--ease-out) both;
}

/* Staggered entrance for grids: each child waits a little longer. */
.stagger > * {
    animation: rise-in var(--duration-slow) var(--ease-out) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; }
.stagger > *:nth-child(7) { animation-delay: 240ms; }
.stagger > *:nth-child(8) { animation-delay: 280ms; }

/* ==========================================================================
   Form primitives
   --------------------------------------------------------------------------
   Shared by the admin and the storefront, so they live here rather than in
   admin.css where a storefront page would never load them.
   ========================================================================== */
/* ------------------------------------------------------------------ forms */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--text);
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--text-subdued);
}

.field__error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--red-500);
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 0 var(--space-3);
    height: 2.375rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-xs);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--gray-400);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px var(--blue-100);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--red-500);
}

.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--red-100);
}

.textarea {
    height: auto;
    min-height: 7rem;
    padding: var(--space-3);
    line-height: var(--leading-normal);
    resize: vertical;
}

.select {
    appearance: none;
    padding-right: var(--space-8);
    /* Inline SVG chevron: no image request, and it inherits currentColor. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237c828b' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4);
}

/* Switch -------------------------------------------------------------- */

.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch__track {
    position: relative;
    width: 2.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--gray-300);
    transition: background-color var(--duration-normal) var(--ease-out);
}

.switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-spring);
}

.switch input:checked + .switch__track {
    background: var(--green-500);
}

.switch input:checked + .switch__track::after {
    transform: translateX(1rem);
}

.switch input:focus-visible + .switch__track {
    outline: 2px solid var(--blue-600);
    outline-offset: 2px;
}

/* Colour picker ------------------------------------------------------- */

.color-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.color-field input[type="color"] {
    width: 2.75rem;
    height: 2.375rem;
    padding: 2px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}