/* ============================================================
   PlayWild Design System — Foundations
   colors_and_type.css
   Single source of truth for colour, type, spacing, borders,
   shadows, motion. Imported by every preview card + UI kit.
   Hex values are CANONICAL — never approximate.
   ============================================================ */

/* --- FONTS ---------------------------------------------------
   Permanent Marker — display, hero, headlines (17px+ ONLY)
   Nunito ExtraBold — eyebrows, buttons, badges, nav (UPPERCASE)
   DM Sans — body copy, descriptions, form inputs
*/
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Nunito:wght@400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- BRAND COLOURS (canonical) ---- */
  --pw-cream:       #F9F7F4;   /* default surface — never pure white */
  --pw-navy:        #0D1C2C;   /* anchor — body copy, borders, dark surfaces */
  --pw-orange:      #F4711A;   /* Beaudy primary */
  --pw-pink:        #F0407A;   /* Beaudy secondary */
  --pw-blue:        #7ECEF4;   /* shared sky blue */
  --pw-lime:        #C8F135;   /* Brook accent + CTA on dark */

  /* ---- COLLECTION GRADIENT ENDPOINTS ---- */
  --pw-brook-grad-start:  #060f18;
  --pw-brook-grad-end:    #1a3a5c;
  --pw-beaudy-grad-start: #b04d0c;
  --pw-beaudy-grad-mid:   var(--pw-orange);
  --pw-beaudy-grad-end:   #cc2f65;

  /* ---- SEMANTIC ---- */
  --pw-bg:                var(--pw-cream);
  --pw-bg-dark:           var(--pw-navy);
  --pw-bg-accent:         var(--pw-lime);

  --pw-text:              var(--pw-navy);
  --pw-text-on-dark:      var(--pw-cream);
  --pw-text-muted:        rgba(13,28,44,0.62);
  --pw-text-muted-dark:   rgba(255,255,255,0.55);
  --pw-text-subtle:       rgba(13,28,44,0.42);
  --pw-text-subtle-dark:  rgba(255,255,255,0.28);

  --pw-eyebrow-light:     var(--pw-orange);
  --pw-eyebrow-dark:      var(--pw-lime);

  --pw-border:            var(--pw-navy);
  --pw-border-accent:     var(--pw-lime);
  --pw-border-subtle:     rgba(13,28,44,0.10);

  --pw-cta-light:         var(--pw-navy);   /* CTA on cream */
  --pw-cta-light-hover:   var(--pw-orange);
  --pw-cta-dark:          var(--pw-lime);   /* CTA on navy */
  --pw-cta-dark-hover:    var(--pw-orange);

  /* ---- BORDERS ---- */
  --pw-border-hairline:   1px;
  --pw-border-subtle-w:   1.5px;
  --pw-border-default:    2px;
  --pw-border-strong:     3px;

  /* ---- RADII (sharp — borders are visible, not soft) ---- */
  --pw-radius-sharp:      2px;   /* buttons, badges, inputs */
  --pw-radius-card:       4px;   /* cards */
  --pw-radius-circle:     50%;   /* palette dots only */

  /* ---- SPACING (4px base) ---- */
  --pw-space-1:  4px;
  --pw-space-2:  8px;
  --pw-space-3:  12px;
  --pw-space-4:  16px;
  --pw-space-5:  20px;
  --pw-space-6:  24px;
  --pw-space-8:  32px;
  --pw-space-9:  36px;
  --pw-space-10: 40px;
  --pw-space-11: 44px;
  --pw-space-12: 48px;
  --pw-space-14: 56px;
  --pw-space-16: 64px;
  --pw-space-18: 72px;
  --pw-space-22: 90px;
  --pw-space-25: 100px;

  /* ---- SHADOWS — marker-pen aesthetic, hard offset, no blur ---- */
  --pw-shadow-display:        5px 5px 0 rgba(0,0,0,0.10);
  --pw-shadow-display-sm:     2px 2px 0 rgba(0,0,0,0.20);
  --pw-shadow-card-selected:  4px 4px 0 var(--pw-orange); /* swap to lime on dark */
  --pw-shadow-fish:           0 16px 40px rgba(0,0,0,0.50);
  --pw-shadow-fish-light:     0 16px 40px rgba(0,0,0,0.35);
  --pw-shadow-fish-tiny:      0 2px 8px rgba(0,0,0,0.20);
  --pw-shadow-card-hover:     0 20px 40px rgba(0,0,0,0.40);

  /* ---- MOTION ---- */
  --pw-dur-instant:    200ms;
  --pw-dur-fast:       300ms;
  --pw-dur-default:    400ms;
  --pw-dur-slow:       500ms;
  --pw-dur-deliberate: 700ms;
  --pw-dur-fish:       4000ms;  /* fish float */
  --pw-dur-bubble:     5000ms;  /* bubble rise */
  --pw-ease:           ease;
  --pw-ease-out:       ease-out;
  --pw-ease-inout:     ease-in-out;

  /* ---- TYPE FAMILIES ---- */
  --pw-font-display:   'Permanent Marker', cursive;
  --pw-font-subhead:   'Nunito', system-ui, sans-serif;
  --pw-font-body:      'DM Sans', system-ui, sans-serif;

  /* ---- LAYOUT ---- */
  --pw-container:      1440px;
  --pw-text-max:        640px;
  --pw-body-max:        500px;
}

/* ============================================================
   BASE TYPE — element styles act as defaults
   ============================================================ */

html, body {
  background: var(--pw-bg);
  color: var(--pw-text);
  font-family: var(--pw-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DISPLAY — Permanent Marker. ONLY at 17px+. */
.pw-display-hero {
  font-family: var(--pw-font-display);
  font-size: clamp(52px, 9vw, 108px);
  line-height: 0.88;
  font-weight: 400;
}
.pw-display-collection {
  font-family: var(--pw-font-display);
  font-size: clamp(64px, 10vw, 120px);
  line-height: 0.88;
  font-weight: 400;
}
.pw-display-section {
  font-family: var(--pw-font-display);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  font-weight: 400;
}
.pw-display-mid {
  font-family: var(--pw-font-display);
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.05;
  font-weight: 400;
}
.pw-display-card {
  font-family: var(--pw-font-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 400;
}
.pw-display-beat {
  font-family: var(--pw-font-display);
  font-size: 22px;
  line-height: 1.2;
}
.pw-display-product {
  font-family: var(--pw-font-display);
  font-size: 17px;
  line-height: 1.2;
}
.pw-display-sub {
  font-family: var(--pw-font-display);
  font-size: 19px;
  line-height: 1.3;
}

/* BODY — DM Sans */
.pw-body         { font-family: var(--pw-font-body); font-size: 16px; line-height: 1.75; font-weight: 400; }
.pw-body-small   { font-family: var(--pw-font-body); font-size: 14px; line-height: 1.65; font-weight: 400; }
.pw-body-micro   { font-family: var(--pw-font-body); font-size: 11px; line-height: 1.4;  font-weight: 400; }

/* SUBHEAD — Nunito ExtraBold, ALWAYS uppercase + letter-spaced */
.pw-eyebrow {
  font-family: var(--pw-font-subhead);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pw-eyebrow-light);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pw-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}
.pw-eyebrow.on-dark { color: var(--pw-eyebrow-dark); }

.pw-button-text {
  font-family: var(--pw-font-subhead);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pw-button-text-large {
  font-family: var(--pw-font-subhead);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pw-nav-link {
  font-family: var(--pw-font-subhead);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pw-badge {
  font-family: var(--pw-font-subhead);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ============================================================
   PRIMITIVE COMPONENTS
   ============================================================ */

/* Buttons */
.pw-btn {
  font-family: var(--pw-font-subhead);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: var(--pw-radius-sharp);
  border: 2px solid var(--pw-navy);
  background: var(--pw-navy);
  color: var(--pw-cream);
  cursor: pointer;
  transition: background var(--pw-dur-instant) var(--pw-ease),
              color var(--pw-dur-instant) var(--pw-ease),
              transform var(--pw-dur-instant) var(--pw-ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pw-btn:hover { background: var(--pw-orange); border-color: var(--pw-orange); color: var(--pw-cream); }
.pw-btn:active { transform: translateY(1px); }
.pw-btn--outline { background: transparent; color: var(--pw-navy); }
.pw-btn--outline:hover { background: var(--pw-navy); color: var(--pw-cream); }
.pw-btn--lime { background: var(--pw-lime); border-color: var(--pw-lime); color: var(--pw-navy); }
.pw-btn--lime:hover { background: var(--pw-orange); border-color: var(--pw-orange); color: var(--pw-cream); }
.pw-btn--large { padding: 18px 28px; font-size: 13px; }

/* Cards */
.pw-card {
  background: var(--pw-cream);
  border: 2px solid var(--pw-navy);
  border-radius: var(--pw-radius-card);
  padding: var(--pw-space-9);
}
.pw-card--strong  { border-width: 3px; }
.pw-card--dark    { background: var(--pw-navy); color: var(--pw-cream); }

/* Palette dot */
.pw-dot {
  width: 14px;
  height: 14px;
  border-radius: var(--pw-radius-circle);
  border: 1.5px solid var(--pw-navy);
  display: inline-block;
}

/* Marquee strip (the lime divider) */
.pw-marquee {
  background: var(--pw-lime);
  border-top: 3px solid var(--pw-navy);
  border-bottom: 3px solid var(--pw-navy);
  color: var(--pw-navy);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--pw-font-display);
  font-size: 22px;
}