/**
 * Celestial Yak Luxury Menswear — Design System Tokens & Base Styles
 * Extracted from Stitch Project: 1579897447492105501
 * Aesthetics: Atmospheric Contemporary Luxury
 */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* Core Brand Colors */
  --cy-primary: #0D1B2A;
  --cy-primary-container: #0F1C2C;
  --cy-on-primary: #FFFFFF;
  --cy-on-primary-container: #778598;
  
  --cy-secondary: #612BA8;
  --cy-secondary-container: #B581FF;
  --cy-on-secondary: #FFFFFF;
  --cy-on-secondary-container: #47008E;

  --cy-tertiary: #00D2D3;
  --cy-tertiary-cyan: #22D3EE;
  --cy-tertiary-container: #002020;
  --cy-on-tertiary: #002020;

  /* Neutrals & Surfaces */
  --cy-surface: #F8F9FB;
  --cy-surface-bright: #F8F9FB;
  --cy-surface-dim: #D9DADC;
  --cy-surface-container-lowest: #FFFFFF;
  --cy-surface-container-low: #F2F4F6;
  --cy-surface-container: #EDEEF0;
  --cy-surface-container-high: #E7E8EA;
  --cy-surface-container-highest: #E1E2E4;

  --cy-on-surface: #191C1E;
  --cy-on-surface-variant: #44474C;
  --cy-outline: #74777D;
  --cy-outline-variant: #C4C6CC;
  
  --cy-midnight-rich: #070E17;
  --cy-slate-surface: #F1F5F9;
  --cy-accent-gold: #EAB308;
  --cy-text-muted: #64748B;
  --cy-pure-white: #FFFFFF;

  /* Typography */
  --cy-font-display: 'Playfair Display', Georgia, serif;
  --cy-font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cy-font-label: 'Hanken Grotesk', sans-serif;

  /* Geometry & Border Radius */
  --cy-radius-sm: 0.125rem;
  --cy-radius-default: 0.25rem;
  --cy-radius-md: 0.375rem;
  --cy-radius-lg: 0.5rem;
  --cy-radius-xl: 0.75rem;
  --cy-radius-full: 9999px;

  /* Spacing */
  --cy-space-xs: 0.25rem;
  --cy-space-sm: 0.5rem;
  --cy-space-md: 1rem;
  --cy-space-lg: 1.5rem;
  --cy-space-xl: 2.5rem;
  --cy-space-2xl: 4rem;
  --cy-space-3xl: 6rem;
  --cy-gutter: 1.5rem;
  --cy-margin: 3rem;

  /* Shadows */
  --cy-shadow-ambient: 0 20px 40px -15px rgba(13, 27, 42, 0.12);
  --cy-shadow-pill: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Base resets & typography rules */
body {
  font-family: var(--cy-font-body);
  background-color: var(--cy-surface);
  color: var(--cy-on-surface);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .editorial-heading {
  font-family: var(--cy-font-display);
  letter-spacing: -0.015em;
  color: var(--cy-primary);
}

/* Luxury Button Styles */
.cy-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--cy-primary);
  color: #ffffff !important;
  font-family: var(--cy-font-label);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.875rem 2rem;
  border-radius: var(--cy-radius-default);
  border: 1px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}
.cy-btn-primary:hover {
  background-color: #1a2e44;
  box-shadow: 0 4px 14px rgba(13, 27, 42, 0.25);
  transform: translateY(-1px);
}

.cy-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--cy-primary) !important;
  font-family: var(--cy-font-label);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.875rem 2rem;
  border-radius: var(--cy-radius-default);
  border: 1.5px solid var(--cy-primary);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}
.cy-btn-secondary:hover {
  background-color: var(--cy-primary);
  color: #ffffff !important;
}

/* Luxury Product Card */
.cy-product-card {
  background: #ffffff;
  border: 1px solid rgba(13, 27, 42, 0.08);
  border-radius: var(--cy-radius-default);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.cy-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cy-shadow-ambient);
  border-color: rgba(97, 43, 168, 0.25);
}

/* Pure Cotton Luxury Badge */
.cy-badge-cotton {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #ffffff;
  border: 1px solid rgba(13, 27, 42, 0.12);
  color: var(--cy-primary);
  font-family: var(--cy-font-label);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: var(--cy-radius-full);
}