/*
Theme Name: Skye Athletic
Theme URI: https://skyathletics.example
Author: Devex Hub
Author URI: https://devexhub.com
Description: Premium performance-fashion WooCommerce theme for Skye Athletic — custom 3D leotards and ready-to-wear apparel.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sky-athletics
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  /* Brand core — sampled from the Skye Athletic logo */
  --c-navy-900:#0A1227;
  --c-navy-800:#111A34;
  --c-navy-700:#1B2547;
  --c-purple:#8B24E3;
  --c-purple-2:#5F35A3;
  --c-blue:#4997D5;
  --c-cyan:#6FD8EC;
  --c-white:#FFFFFF;
  --c-paper:#F6F4EF;
  --c-paper-2:#EFEBE3;
  --c-ink:#14151A;
  --c-muted:#6B6E76;
  --c-muted-2:#9A9CA3;
  --c-border:#E3E0D8;
  --c-border-dark:rgba(255,255,255,.14);
  --c-success:#3E8E5A;

  --grad-brand:linear-gradient(115deg,var(--c-purple) 0%,var(--c-purple-2) 45%,var(--c-blue) 75%,var(--c-cyan) 100%);

  /* Typography */
  --font-display:'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(3rem, 7vw, 6.5rem);
  --fs-h1: clamp(2.25rem, 4.2vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.35rem, 1.8vw, 1.75rem);
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-nav: .8125rem;
  --fs-button: .8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --ls-display: .01em;
  --ls-eyebrow: .18em;
  --ls-nav: .12em;

  /* Spacing scale */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;
  --sp-8: 9rem;

  --container: 1320px;
  --container-narrow: 900px;
  --container-product: 1760px;
  --radius-s: 2px;
  --radius-m: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .5s;

  --header-h: 92px;
  --header-h-scrolled: 68px;
}

/* =========================================================
   2. RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
  margin:0;
  background:var(--c-white);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:1rem;}
figure{margin:0;}

:focus-visible{outline:2px solid var(--c-purple);outline-offset:3px;}

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:var(--ls-display);
  line-height:var(--lh-tight);
  text-transform:uppercase;
  margin:0 0 var(--sp-2);
}
.display{font-family:var(--font-display);font-size:var(--fs-display);line-height:.95;text-transform:uppercase;letter-spacing:var(--ls-display);margin:0;}
h1,.h1{font-size:var(--fs-h1);}
h2,.h2{font-size:var(--fs-h2);}
h3,.h3{font-size:var(--fs-h3);}
h4,.h4{font-size:var(--fs-h4);letter-spacing:.04em;}
p{margin:0 0 var(--sp-2);color:var(--c-muted);}
.lede{font-size:1.2rem;line-height:var(--lh-body);color:var(--c-muted);}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-purple);
  margin-bottom:var(--sp-2);
}
.eyebrow::before{content:'';width:28px;height:1px;background:currentColor;}
.text-white{color:var(--c-white);}
.text-white p,.text-white .lede{color:rgba(255,255,255,.72);}
.text-white .eyebrow{color:var(--c-cyan);}
.muted{color:var(--c-muted);}

/* =========================================================
   4. LAYOUT HELPERS
   ========================================================= */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4);}
.container-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--sp-4);}
.section{padding-block:var(--sp-7);}
.section-tight{padding-block:var(--sp-5);}
.bg-navy{background:var(--c-navy-900);}
.bg-paper{background:var(--c-paper);}
.bg-white{background:var(--c-white);}
.grid{display:grid;gap:var(--sp-4);}
.flex{display:flex;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-1{gap:var(--sp-1);} .gap-2{gap:var(--sp-2);} .gap-3{gap:var(--sp-3);}
.center{text-align:center;}
.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;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--c-navy-900);color:#fff;padding:.75rem 1.25rem;z-index:10000;}
.skip-link:focus{left:var(--sp-2);top:var(--sp-2);}

@media (max-width:1024px){ .container,.container-narrow{padding-inline:var(--sp-3);} .section{padding-block:var(--sp-6);} }
@media (max-width:600px){ .section{padding-block:var(--sp-5);} }

/* =========================================================
   5. BUTTONS
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-button);
  letter-spacing:var(--ls-nav);text-transform:uppercase;
  padding:1.05em 2.1em;
  border-radius:var(--radius-s);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--grad-brand);background-size:160% 160%;background-position:0% 50%;color:#fff;box-shadow:0 8px 24px -10px rgba(139,36,227,.55);}
.btn-primary:hover{background-position:100% 50%;box-shadow:0 10px 30px -8px rgba(139,36,227,.7);}
.btn-primary:focus-visible{outline-color:#fff;}
.btn-secondary{background:transparent;color:var(--c-navy-900);border-color:var(--c-navy-900);}
.btn-secondary:hover{background:var(--c-navy-900);color:#fff;}
.text-white .btn-secondary{color:#fff;border-color:rgba(255,255,255,.55);}
.text-white .btn-secondary:hover{background:#fff;color:var(--c-navy-900);}
.btn-text{padding:0;border-radius:0;font-weight:700;color:var(--c-navy-900);border-bottom:1px solid currentColor;padding-bottom:2px;}
.btn-text:hover{color:var(--c-purple);}
.text-white .btn-text{color:#fff;}
.text-white .btn-text:hover{color:var(--c-cyan);}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none;}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;transition:background var(--dur) var(--ease);}
.btn-icon:hover{background:rgba(0,0,0,.06);}
.btn-block{width:100%;}
.btn svg{width:1em;height:1em;flex:none;}

/* =========================================================
   6. REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;} }