/* ══════════════════════════════════════════════════════════════
   OneCMS Design Tokens — universal modern design system
   Override in :root to rebrand the entire site.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand primary — default is CruClub sky blue ── */
    /* color-schemes.css overrides --primary via :root.scheme-N (higher
       specificity), so the brand-* tints below recompute automatically
       whenever the user picks a scheme in the editor. */
    --primary:        #1DB5FE;
    --primary-hover:  color-mix(in srgb, var(--primary) 85%, black);
    --primary-light:  color-mix(in srgb, var(--primary) 18%, white);
    --primary-bg:     color-mix(in srgb, var(--primary) 6%, white);

    /* Brand tonal scale — derived live from --primary so theme schemes
       cascade through every component that consumes --brand-*. */
    --brand-50:  color-mix(in srgb, var(--primary) 6%, white);
    --brand-100: color-mix(in srgb, var(--primary) 12%, white);
    --brand-200: color-mix(in srgb, var(--primary) 22%, white);
    --brand-300: color-mix(in srgb, var(--primary) 35%, white);
    --brand-400: color-mix(in srgb, var(--primary) 65%, white);
    --brand-500: var(--primary);
    --brand-600: color-mix(in srgb, var(--primary) 88%, black);
    --brand-700: color-mix(in srgb, var(--primary) 75%, black);
    --brand-800: color-mix(in srgb, var(--primary) 60%, black);
    --brand-900: color-mix(in srgb, var(--primary) 45%, black);

    /* ── Semantic ── */
    --success-50:  #ecfdf5;
    --success-500: #4BC200;  /* CruClub green */
    --success-700: #3a9700;
    --warn-50:     #fffbeb;
    --warn-500:    #FDA04A;  /* CruClub warm orange */
    --warn-700:    #c77a2c;
    --danger-50:   #fff1ef;
    --danger-500:  #FF7E6C;  /* CruClub coral accent */
    --danger-700:  #FF6652;
    --info-50:     #F2F9FF;
    --info-500:    #1DB5FE;

    /* ── Neutral grays (CruClub cool blue-gray palette) ── */
    --gray-50:  #F2F7FB;  /* page background */
    --gray-100: #E1EBF5;  /* card borders / dividers */
    --gray-200: #d3dce5;
    --gray-300: #B7C3D1;
    --gray-400: #7C8C9B;  /* muted text */
    --gray-500: #3F5972;  /* secondary text */
    --gray-600: #334D66;
    --gray-700: #2A4258;
    --gray-800: #253748;  /* primary text */
    --gray-900: #1A2632;

    /* Legacy text aliases */
    --text:           var(--gray-800);
    --text-secondary: var(--gray-500);
    --text-muted:     var(--gray-400);
    --bg:             #ffffff;
    --bg-muted:       var(--gray-50);
    --border:         var(--gray-100);

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  32px;
    --text-4xl:  42px;
    --text-5xl:  56px;
    --text-6xl:  72px;

    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.75;

    /* ── Spacing scale ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* ── Border radius — CruClub uses 8px primarily ── */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;   /* primary, 147 uses in CruClub */
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-3xl:  24px;
    --radius-full: 9999px;

    /* Legacy alias */
    --radius: var(--radius-md);

    /* ── Shadows — CruClub blue-tinted depth ── */
    --shadow-xs: 0 2px 6px rgba(170, 175, 190, 0.18);
    --shadow-sm: 0 4px 16px rgba(37, 55, 72, 0.08);
    --shadow-md: 0 4px 16px rgba(170, 175, 190, 0.25), 0 16px 40px rgba(43, 82, 221, 0.06);
    --shadow-lg: 0 4px 24px rgba(43, 82, 221, 0.12), 0 12px 32px rgba(37, 55, 72, 0.08);
    --shadow-xl: 0 4px 40px rgba(43, 82, 221, 0.16), 0 20px 48px rgba(37, 55, 72, 0.10);
    --shadow-2xl: 0 8px 60px rgba(43, 82, 221, 0.20);
    --shadow-brand: 0 4px 20px rgba(29, 181, 254, 0.32);
    --shadow-brand-lg: 0 8px 32px rgba(29, 181, 254, 0.40);

    /* ── Transitions ── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);
    --duration-fast:   120ms;
    --duration-normal: 200ms;
    --duration-slow:   400ms;

    /* ── Z-index layers ── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    500;
    --z-toast:    700;
    --z-max:      9999;

    /* ── Container widths ── */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
}

/* ══════════════════════════════════════════════════════════════
   Global reset additions
   ══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg-muted);
    line-height: var(--leading-normal);
    font-size: var(--text-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--gray-900);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
}

.container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}
@media (max-width: 768px) {
    .container { padding: 0 var(--space-4); }
}

/* ══════════════════════════════════════════════════════════════
   Global UI components
   ══════════════════════════════════════════════════════════════ */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 22px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all var(--duration-normal) var(--ease-out);
    white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand-lg);
    color: #fff;
}

.btn-secondary {
    background: #fff;
    color: var(--gray-700);
    border-color: var(--gray-200);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--gray-600);
}
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-900); }

.btn-lg { padding: 16px 32px; font-size: var(--text-base); }
.btn-sm { padding: 8px 16px; font-size: var(--text-xs); }

/* Cards */
.card {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-200);
}

/* Chips / Badges — rectangular CruClub style */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-700);
    transition: all var(--duration-fast);
    cursor: pointer;
    text-decoration: none;
}
.chip:hover {
    border-color: var(--brand-300);
    background: var(--brand-50);
    color: var(--brand-600);
}
.chip.active {
    background: var(--brand-500);
    color: #fff;
    border-color: var(--brand-500);
}
.chip svg { width: 14px; height: 14px; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-top    { background: linear-gradient(135deg, #FDA04A, #FB7A19); color: #fff; box-shadow: 0 2px 6px rgba(253, 160, 74, 0.35); }
.badge-hit    { background: linear-gradient(135deg, #FF7E6C, #FF6652); color: #fff; }
.badge-new    { background: linear-gradient(135deg, #4BC200, #3a9700); color: #fff; }
.badge-sale   { background: linear-gradient(135deg, #1DB5FE, #008BCE); color: #fff; }

/* Rating stars */
.rating-stars {
    display: inline-flex;
    gap: 2px;
    color: #FDA04A;
}
.rating-stars svg { width: 14px; height: 14px; }

.rating-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(37, 55, 72, 0.85);
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* Price block */
.price-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.price-old {
    font-size: var(--text-xs);
    color: var(--gray-400);
    text-decoration: line-through;
}
.price-new {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}
.price-new .currency {
    font-size: var(--text-sm);
    color: var(--gray-500);
    font-weight: 600;
}
.price-discount {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--danger-500);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 800;
}

/* Form controls */
.input, .select, .textarea {
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: inherit;
    color: var(--gray-900);
    transition: all var(--duration-fast);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.input::placeholder { color: var(--gray-400); }

/* Section containers */
.section {
    padding: var(--space-16) 0;
}
.section-sm { padding: var(--space-10) 0; }
.section-lg { padding: var(--space-24) 0; }

.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}
.section-header .eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--brand-600);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-3);
}
.section-header h2 {
    font-size: var(--text-4xl);
    margin: 0 0 var(--space-3);
}
.section-header p {
    font-size: var(--text-lg);
    color: var(--gray-500);
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    .section { padding: var(--space-12) 0; }
    .section-header h2 { font-size: var(--text-3xl); }
    .section-header p { font-size: var(--text-base); }
}