/* ============================================================
   KidsMarket — Design tokens & base resets
   Ported from kids-shop design package (May 2026)
   ============================================================ */

:root {
    /* Brand · coral */
    --km-coral-50:  #fff3ee;
    --km-coral-100: #ffd9c9;
    --km-coral-200: #ffbba1;
    --km-coral-300: #ff9776;
    --km-coral-400: #f7754d;
    --km-coral-500: #ec5b34; /* primary */
    --km-coral-600: #cc4a26;
    --km-coral-700: #9e391d;
    --km-coral-800: #6f2715;

    /* Brand · sage */
    --km-sage-50:  #eef7f2;
    --km-sage-100: #d3ede0;
    --km-sage-200: #a9dcc0;
    --km-sage-300: #7bc69e;
    --km-sage-400: #4faa7c;
    --km-sage-500: #2f8c5f; /* secondary / trust */
    --km-sage-600: #246e4a;
    --km-sage-700: #1b5238;

    /* Accents */
    --km-sun-300:  #ffd271;
    --km-sun-400:  #ffba3a;
    --km-sun-500:  #f0a410;
    --km-sky-300:  #9bcef0;
    --km-sky-500:  #2f7fc1;
    --km-plum-500: #8a4fb0;
    --km-rose-500: #d23a6b;

    /* Neutrals */
    --km-cream:   #fbf6ee;
    --km-cream-2: #f5ede0;
    --km-paper:   #ffffff;
    --km-ink-900: #23211d;
    --km-ink-700: #4d4943;
    --km-ink-500: #76716a;
    --km-ink-400: #98948c;
    --km-ink-200: #d8d3c8;
    --km-ink-100: #ece7dc;
    --km-ink-50:  #f5f0e5;

    /* Status */
    --km-success:    #2f8c5f;
    --km-warning:    #b87a00;
    --km-warning-bg: #fff4d6;
    --km-danger:     #c83a3a;
    --km-danger-bg:  #fde4e4;
    --km-info:       #2f7fc1;
    --km-info-bg:    #e3f0fa;

    /* Type */
    --km-font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --km-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Spacing scale: 4/8/12/16/24/32/48 */
    --km-s-1: 4px;
    --km-s-2: 8px;
    --km-s-3: 12px;
    --km-s-4: 16px;
    --km-s-5: 24px;
    --km-s-6: 32px;
    --km-s-7: 48px;

    /* Radii: 4/8/12/16 */
    --km-r-1: 4px;
    --km-r-2: 8px;
    --km-r-3: 12px;
    --km-r-4: 16px;
    --km-r-pill: 999px;

    /* Shadows */
    --km-sh-1: 0 1px 2px rgba(35,33,29,.04), 0 1px 1px rgba(35,33,29,.04);
    --km-sh-2: 0 4px 14px rgba(35,33,29,.06), 0 1px 2px rgba(35,33,29,.04);
    --km-sh-3: 0 14px 36px rgba(35,33,29,.10), 0 2px 6px rgba(35,33,29,.04);
    --km-sh-focus: 0 0 0 3px rgba(236,91,52,.30);

    /* Roles */
    --km-bg: var(--km-cream);
    --km-surface: var(--km-paper);
    --km-text: var(--km-ink-900);
    --km-muted: var(--km-ink-500);
    --km-border: var(--km-ink-200);
    --km-primary: var(--km-coral-500);
    --km-primary-hover: var(--km-coral-600);
    --km-secondary: var(--km-sage-500);

    /* Bootstrap variable overrides — pulls .btn-primary etc. into the brand */
    --bs-primary: var(--km-coral-500);
    --bs-primary-rgb: 236, 91, 52;
    --bs-secondary: var(--km-sage-500);
    --bs-secondary-rgb: 47, 140, 95;
    --bs-success: var(--km-success);
    --bs-danger: var(--km-danger);
    --bs-warning: var(--km-warning);
    --bs-info: var(--km-info);
    --bs-body-bg: var(--km-cream);
    --bs-body-color: var(--km-ink-900);
    --bs-body-font-family: var(--km-font-body);
    --bs-link-color: var(--km-coral-600);
    --bs-link-hover-color: var(--km-coral-700);
    --bs-border-color: var(--km-border);
    --bs-border-radius: var(--km-r-3);
    --bs-border-radius-sm: var(--km-r-2);
    --bs-border-radius-lg: var(--km-r-4);
}

[data-theme="dark"] {
    --km-bg: #15140f;
    --km-surface: #1f1d18;
    --km-text: #f3eee2;
    --km-muted: #a8a297;
    --km-border: #34322b;
    --km-cream: #15140f;
    --km-cream-2: #1f1d18;
    --km-ink-100: #2a2823;
    --km-ink-200: #34322b;
    --km-ink-50:  #1f1d18;
    --km-paper:   #1f1d18;
    --km-warning-bg: #2a2114;
    --km-danger-bg:  #2a1818;
    --km-info-bg:    #14222a;
    --km-sh-1: 0 1px 2px rgba(0,0,0,.4);
    --km-sh-2: 0 4px 14px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.4);
    --km-sh-3: 0 14px 36px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
    --bs-body-bg: #15140f;
    --bs-body-color: #f3eee2;
    --bs-border-color: #34322b;
}

/* ============================================================
   Base
   ============================================================ */
html, body {
    background: var(--km-bg);
    color: var(--km-text);
    font-family: var(--km-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    margin: 0;
    min-height: 100%;
}

h1, h2, h3, h4, h5 {
    font-family: var(--km-font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--km-text);
    margin: 0;
}

h1 { font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 1.75rem; line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.25; }
h4 { font-size: 1rem; line-height: 1.3; }

a, .btn-link {
    color: var(--km-coral-600);
}
a:hover { color: var(--km-coral-700); }

/* Bootstrap button reskin via CSS vars */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--km-coral-500);
    --bs-btn-border-color: var(--km-coral-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--km-coral-600);
    --bs-btn-hover-border-color: var(--km-coral-600);
    --bs-btn-active-bg: var(--km-coral-700);
    --bs-btn-active-border-color: var(--km-coral-700);
}

.btn-outline-primary {
    --bs-btn-color: var(--km-coral-600);
    --bs-btn-border-color: var(--km-coral-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--km-coral-500);
    --bs-btn-hover-border-color: var(--km-coral-500);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: var(--km-sh-focus);
}

.form-control:focus, .form-select:focus {
    border-color: var(--km-coral-500);
}

/* Validation visuals */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--km-sage-500); }
.invalid { outline: 1px solid var(--km-danger); }
.validation-message { color: var(--km-danger); }

.blazor-error-boundary {
    background: var(--km-danger);
    color: #fff;
    padding: 1rem 1rem 1rem 3.7rem;
    border-radius: var(--km-r-3);
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}