/* ==================================
   Variables
   ================================== */
:root {
  /* Brand palette: charcoal, sand, denim, white */
  --color-background: #F5F0E8; /* sand beige, soft and bright */
  --color-surface: #FFFFFF;    /* cards, panels */
  --color-text: #141416;       /* charcoal */
  --color-primary: #2F6DAE;    /* denim blue */
  --color-primary-600: #285E97;
  --color-primary-700: #214F81;
  --color-primary-50: #EEF4FB;

  /* Semantic status colors */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;

  /* Neutral grays */
  --gray-50:  #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Typography */
  --ff-sans: Inter, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --ff-heading: Poppins, Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 36px;
  --fs-5xl: 48px;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* Spacing scale (0–96px) */
  --space-0: 0;
  --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;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.10), 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 0.10), 0 2px 4px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.15), 0 4px 6px rgb(0 0 0 / 0.10);

  /* Transitions */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms;
  --dur-normal: 220ms;
  --dur-slow: 400ms;
}

/* ==================================
   Reset / Normalize
   ================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

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

input, button, textarea, select { font: inherit; color: inherit; }

button, [type="button"], [type="submit"], [role="button"] { cursor: pointer; }

/* Remove animations/transitions for those who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==================================
   Base
   ================================== */
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  background-color: var(--color-background);
  color: var(--color-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--color-text);
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); margin-bottom: var(--space-6); }

h2 { font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); margin-bottom: var(--space-5); }

h3 { font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); margin-bottom: var(--space-4); }

h4 { font-size: var(--fs-xl); margin-bottom: var(--space-3); }

h5 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }

h6 { font-size: var(--fs-base); margin-bottom: var(--space-2); }

p { margin-bottom: var(--space-4);}

small { font-size: var(--fs-sm); }

a { color: var(--color-primary); text-decoration: none; text-underline-offset: 2px; }

a:hover { text-decoration: underline; }

a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }

::selection { background: var(--color-primary-50); color: var(--color-text); }

/* Smooth, chic HR */
hr {
  border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
  margin: var(--space-8) 0;
}

/* ==================================
   Header & Footer styles
   ================================== */
/* Accessibility: skip link */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:0.5rem 0.75rem; background:var(--color-primary); color:#fff; border-radius:var(--radius-md); z-index:10000; }

/* Header */
.site-header { position:sticky; top:0; z-index:1000; background:var(--color-surface); border-bottom:1px solid var(--gray-200); backdrop-filter:saturate(180%) blur(6px); }
.header-inner { display:grid; grid-template-columns:auto 40px 1fr auto; gap:var(--space-4); align-items:center; padding-block:12px; }
.brand a { font-family:var(--ff-heading); font-weight:700; font-size:1.25rem; color:var(--color-text); }
.mobile-toggle { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--gray-300); background:var(--color-surface); color:var(--color-text); padding:8px; border-radius:var(--radius-md); }

.site-nav { order:4; }
.nav__list { display:flex; gap:var(--space-4); }
.nav__list a { color:var(--color-text); font-weight:600; }

.header-actions { display:flex; align-items:center; gap:var(--space-3); }
.header-search { display:flex; gap:var(--space-2); align-items:center; min-width:280px; }
.header-search input { min-width:0; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--gray-300); border-radius:var(--radius-md); color:var(--color-text); background:var(--color-surface); }
.icon-btn:hover { background:var(--gray-100); }

/* Mobile nav behavior */
@media (max-width: 960px) {
  .header-inner { grid-template-columns:auto 40px auto; grid-template-areas:"brand toggle actions" "nav nav nav"; }
  .brand { grid-area: brand; }
  .mobile-toggle { grid-area: toggle; }
  .header-actions { grid-area: actions; }
  .site-nav { grid-area: nav; width:100%; }
  .nav__list { display:none; flex-direction:column; gap:0; padding:8px; border:1px solid var(--gray-200); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); margin-top:8px; }
  .nav__list li { border-top:1px solid var(--gray-200); }
  .nav__list li:first-child { border-top:none; }
  .nav__list a { display:block; padding:12px 10px; }
  .site-nav.is-open .nav__list { display:flex; }
  .header-search { display:none; }
}

/* Footer */
.site-footer { background:#0f1113; color:#fff; margin-top:var(--space-20); padding-top:var(--space-12); }
.site-footer a { color:#fff; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-8); }
.footer-logo { font-weight:700; font-size:1.25rem; color:#fff; }
.footer-links { display:grid; gap:8px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-block:16px; margin-top:16px; text-align:center; }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns:1fr; }
}

/* Cookie banner */
.cookie-banner { position:fixed; inset-inline:0; bottom:0; background:var(--gray-900); color:#fff; z-index:10000; box-shadow:0 -8px 16px rgb(0 0 0 / 0.2); }
.cookie-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-block:12px; }
.cookie-inner p { margin:0; max-width:72ch; }
.cookie-inner a { color:#fff; text-decoration:underline; }
@media (max-width: 900px) {
  .cookie-inner { flex-direction:column; align-items:flex-start; }
}

/* ==================================
   Utilities
   ================================== */
.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.section { padding-block: clamp(2rem, 4vw, 4rem); }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

.flex-center { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }

.stack > * + * { margin-top: var(--space-4); }

.hidden { display: none !important; }

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

/* ==================================
   Components
   ================================== */
/* Buttons */
.btn {
  --btn-bg: var(--gray-900);
  --btn-color: #fff;
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-weight: 600;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn:active { transform: translateY(0); box-shadow: none; }

.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.btn[disabled], .btn:disabled { opacity: 0.6; pointer-events: none; }

/* Variants */
.btn--primary { --btn-bg: var(--color-primary); --btn-border: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); }
.btn--primary:active { background: var(--color-primary-700); border-color: var(--color-primary-700); }

.btn--light { --btn-bg: var(--color-surface); --btn-color: var(--color-text); --btn-border: var(--gray-300); }
.btn--light:hover { background: var(--gray-100); }

.btn--ghost { --btn-bg: transparent; --btn-color: var(--color-text); --btn-border: var(--gray-300); }
.btn--ghost:hover { background: var(--gray-100); }

/* Inputs */
input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out), background-color var(--dur-fast) var(--ease-in-out);
}

input::placeholder, textarea::placeholder { color: var(--gray-500); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

input[disabled], select[disabled], textarea[disabled] { background: var(--gray-100); cursor: not-allowed; }

/* Checkboxes / Radios */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }

/* Card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
}

.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }

.card__header { margin-bottom: var(--space-4); }
.card__footer { margin-top: var(--space-4); }

/* Notes and badges (minimal) */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  background: var(--gray-100);
  color: var(--gray-800);
}
.badge--primary { background: var(--color-primary-50); color: var(--color-primary-700); }

/* ==================================
   Accessibility & Interaction
   ================================== */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

[tabindex="-1"]:focus { outline: none !important; }

/* Media that should scale responsively and cover when needed */
.img-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Subtle interactive hover for links in product lists */
.link-underline { text-decoration: underline; text-underline-offset: 3px; }
.link-animate { transition: color var(--dur-fast) var(--ease-in-out); }
.link-animate:hover { color: var(--color-primary); }

/* Typography helpers for urban, minimal rhythm */
.upper { text-transform: uppercase; letter-spacing: 0.06em; }
.muted { color: var(--gray-600); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .container { width: min(100% - 1.5rem, 1200px); }
}