/* ============================================================
   SKARPETORAJ — Design System
   CSS Custom Properties, Typography, Reset, Base
   ============================================================ */

/* ─── Fonts preconnect (backup via CSS) ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,900;1,9..144,900&display=swap');

/* ─── Custom Properties ──────────────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --color-red:        #E22D34;
  --color-red-dark:   #C4242A;
  --color-red-light:  #FBEAEA;
  --color-navy:       #32386A;
  --color-navy-dark:  #252A52;
  --color-navy-light: #ECEDF5;

  /* Neutrals */
  --color-bg:         #FFFFFF;
  --color-bg-card:    #FFFFFF;
  --color-bg-alt:     #F4F3F0;
  --color-text:       #1A1A2E;
  --color-text-muted: #6B6B7E;
  --color-text-light: #9C9CAF;
  --color-border:     #E8E8EC;
  --color-border-dark:#C8C8D4;

  /* Extended palette */
  --color-cream:      #FBF5E6;
  --color-cream-warm: #F6EAD0;
  --color-yellow:     #FFD23F;
  --color-mint:       #6EE0B3;
  --color-pink:       #FF9FB2;
  --color-sky:        #5DB7DE;
  --color-ink:        #191629;
  --color-navy-deep:  #1E2248;

  /* Semantic */
  --color-success:    #2D8A4E;
  --color-warning:    #D4780A;
  --color-error:      var(--color-red);
  --color-free:       #2D8A4E;

  /* Typography */
  --font-body:        'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:     'Bricolage Grotesque', system-ui, sans-serif;
  --font-chunky:      'Bricolage Grotesque', system-ui, sans-serif;

  /* Font sizes — fluid scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  /* Spacing — slightly irregular for human feel */
  --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;
  --space-24:  6rem;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-full: 9999px;

  /* Shadows — layered, human */
  --shadow-sm:  1px 2px 6px rgba(26,26,46,0.06), -1px 1px 4px rgba(26,26,46,0.03);
  --shadow-md:  2px 7px 15px rgba(26,26,46,0.08), -1px 2px 8px rgba(26,26,46,0.05);
  --shadow-lg:  4px 16px 32px rgba(26,26,46,0.10), -2px 4px 12px rgba(26,26,46,0.06);
  --shadow-xl:  8px 24px 48px rgba(26,26,46,0.14), -2px 6px 20px rgba(26,26,46,0.07);
  --shadow-red: 0 4px 20px rgba(226,45,52,0.28);

  /* Transitions */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --duration-fast:   180ms;
  --duration-base:   280ms;
  --duration-slow:   420ms;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-max: 1440px;

  /* Header */
  --header-height:        70px;
  --header-height-mobile: 60px;
  --topbar-height:        40px;
}

/* ─── Base Reset ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: #fff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

ul, ol {
  list-style: none;
}

/* ─── Typography ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
}

/* Display font for hero/section headings */
.font-display {
  font-family: var(--font-display);
  font-style: italic;
}

/* ─── Layout helpers ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .container { padding-inline: 2rem; }
}

@media (min-width: 1280px) {
  .container { padding-inline: 2.5rem; }
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out),
    transform        var(--duration-fast) var(--ease-spring),
    box-shadow       var(--duration-base) var(--ease-out);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  user-select: none;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary — red */
.btn-primary {
  background-color: var(--color-red);
  color: #fff;
  border-color: var(--color-red);
}

.btn-primary:hover {
  background-color: var(--color-red-dark);
  border-color: var(--color-red-dark);
  box-shadow: var(--shadow-red);
  transform: translateY(-1px);
  color: #fff;
}

/* Secondary — navy outline */
.btn-secondary {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn-secondary:hover {
  background-color: var(--color-navy);
  color: #fff;
  transform: translateY(-1px);
}

/* Ghost */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border-dark);
}

.btn-ghost:hover {
  border-color: var(--color-text);
  transform: translateY(-1px);
}

/* Full width */
.btn-full {
  width: 100%;
}

/* Large */
.btn-lg {
  padding: 1.1rem 2.25rem;
  font-size: var(--text-base);
}

/* ─── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.badge-sale   { background: var(--color-red); color: #fff; }
.badge-new    { background: var(--color-navy); color: #fff; }
.badge-hot    { background: #FF6B35; color: #fff; }
.badge-free   { background: var(--color-free); color: #fff; }

/* ─── Stars ──────────────────────────────────────────────────────────────────── */
.stars {
  display: inline-flex;
  gap: 2px;
  color: #F5A623;
  font-size: var(--text-sm);
}

/* ─── Divider ────────────────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: 0;
}

/* ─── Scrollbar (webkit) ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--color-border-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ─── Focus visible ──────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── Animations ─────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

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

.animate-fade-in-up  { animation: fadeInUp  var(--duration-slow) var(--ease-out) both; }
.animate-fade-in     { animation: fadeIn    var(--duration-base) var(--ease-out) both; }
.animate-slide-right { animation: slideInRight var(--duration-base) var(--ease-out) both; }

/* ─── Topbar / Utility bar ────────────────────────────────────────────────────── */
.sk-topbar {
  position: relative;
  z-index: 100;
}

.sk-topbar__mobile {
  background: var(--color-red);
  color: #fff;
  padding: 0.4rem 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.sk-topbar__desktop { display: none; }

.sk-topbar__left,
.sk-topbar__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sk-topbar__right { gap: 1.25rem; }
.sk-topbar__sep   { opacity: 0.4; }

.sk-topbar__right a {
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.sk-topbar__right a:hover { opacity: 1; }

@media (min-width: 1024px) {
  .sk-topbar__mobile { display: none; }

  .sk-topbar__desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-navy);
    color: rgba(255,255,255,0.9);
    font-size: 0.8125rem;
    padding: 0.5rem 2.5rem;
  }

  .sk-topbar__desktop a {
    color: inherit;
    opacity: 0.85;
    transition: opacity 0.15s;
  }

  .sk-topbar__desktop a:hover { opacity: 1; }
}

/* ─── Utility classes ────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-red   { color: var(--color-red); }
.text-navy  { color: var(--color-navy); }
.text-muted { color: var(--color-text-muted); }

.fw-bold   { font-weight: var(--weight-bold); }
.fw-medium { font-weight: var(--weight-medium); }

/* ─── Hide WooCommerce meta (SKU, categories) on product page ──────────────── */
.product_meta,
.woocommerce-product-details__sku,
.posted_in,
.tagged_as {
  display: none !important;
}

/* ─── Ticket card (offset shadow, bold border) ──────────────────────────────── */
.sk-ticket-card {
  position: relative;
  background: #fff;
  border: 2.5px solid var(--color-ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--color-ink);
  transition: transform 0.15s, box-shadow 0.15s;
}

/* ─── Pill buttons ───────────────────────────────────────────────────────────── */
.sk-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  background: var(--color-red);
  color: #fff;
  border: 2.5px solid var(--color-ink);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9375rem;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--color-ink);
  transition: transform 0.15s, box-shadow 0.15s, color 0.15s;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.sk-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--color-ink);
  color: #fff;
}

.sk-pill:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-ink);
}

.sk-pill--navy    { background: var(--color-navy); }
.sk-pill--yellow  { background: var(--color-yellow); color: var(--color-ink); }
.sk-pill--yellow:hover { color: var(--color-ink); }
.sk-pill--outline { background: transparent; color: var(--color-ink); }
.sk-pill--outline:hover { background: var(--color-ink); color: #fff; }
.sk-pill--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); box-shadow: none; }
.sk-pill--outline-light:hover { background: rgba(255,255,255,0.1); color: #fff; box-shadow: none; }
.sk-pill--sm { padding: 0.5rem 1rem; font-size: 0.8125rem; box-shadow: 3px 3px 0 var(--color-ink); }
.sk-pill--xl { padding: 1.1rem 1.75rem; font-size: 1.0625rem; }

/* ─── Section label + display heading ───────────────────────────────────────── */
.sk-section-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 0.375rem;
  display: block;
}

.sk-section-label--yellow { color: var(--color-yellow); }

.sk-display-heading {
  font-family: var(--font-chunky);
  font-weight: 400;
  line-height: 0.95;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

/* ─── Marquee keyframes ──────────────────────────────────────────────────────── */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.33%); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}