/* Style Drops · Design Tokens (OKLCH, W3C Design Tokens spec v1)
 * Editorial-ethnic luxury: burgundy + cream + gold, on warm neutrals.
 * Loaded BEFORE main.css so the semantic tokens win over legacy values.
 */

:root {
  /* ── Primitives — never reference these in components ──────────── */

  /* Burgundy — primary brand hue (deep wine, Karwa-Chauth signal) */
  --sd-burgundy-50:  oklch(0.965 0.014 15);
  --sd-burgundy-100: oklch(0.925 0.038 15);
  --sd-burgundy-200: oklch(0.855 0.075 15);
  --sd-burgundy-300: oklch(0.760 0.115 15);
  --sd-burgundy-400: oklch(0.635 0.148 15);
  --sd-burgundy-500: oklch(0.480 0.155 15);   /* signature */
  --sd-burgundy-600: oklch(0.395 0.140 15);
  --sd-burgundy-700: oklch(0.310 0.120 15);
  --sd-burgundy-800: oklch(0.230 0.095 15);
  --sd-burgundy-900: oklch(0.165 0.070 15);
  --sd-burgundy-950: oklch(0.110 0.045 15);

  /* Cream — surface hue (warm off-white, Diwali daytime) */
  --sd-cream-50:  oklch(0.985 0.008 82);
  --sd-cream-100: oklch(0.965 0.018 82);
  --sd-cream-200: oklch(0.930 0.030 82);
  --sd-cream-300: oklch(0.880 0.045 82);

  /* Gold — accent hue (temple-jewellery gilt) */
  --sd-gold-100: oklch(0.925 0.060 85);
  --sd-gold-300: oklch(0.830 0.115 85);
  --sd-gold-500: oklch(0.720 0.145 85);   /* signature accent */
  --sd-gold-700: oklch(0.560 0.130 85);
  --sd-gold-900: oklch(0.380 0.100 85);

  /* Neutrals — warm-tinted greys sharing the burgundy hue family */
  --sd-neutral-50:  oklch(0.980 0.004 15);
  --sd-neutral-100: oklch(0.950 0.006 15);
  --sd-neutral-200: oklch(0.905 0.008 15);
  --sd-neutral-300: oklch(0.820 0.010 15);
  --sd-neutral-400: oklch(0.680 0.010 15);
  --sd-neutral-500: oklch(0.540 0.010 15);
  --sd-neutral-600: oklch(0.430 0.010 15);
  --sd-neutral-700: oklch(0.320 0.010 15);
  --sd-neutral-800: oklch(0.220 0.010 15);
  --sd-neutral-900: oklch(0.145 0.008 15);
  --sd-neutral-950: oklch(0.095 0.006 15);

  /* Status */
  --sd-success: oklch(0.560 0.155 145);
  --sd-warning: oklch(0.720 0.160 65);
  --sd-error:   oklch(0.555 0.200 27);

  /* ── Semantic tokens — reference these in components ─────────────── */

  /* Light theme (default) */
  --color-background:      var(--sd-cream-50);
  --color-background-alt:  var(--sd-cream-100);
  --color-surface:         oklch(1 0 0);
  --color-surface-alt:     var(--sd-cream-100);
  --color-on-surface:      var(--sd-neutral-900);
  --color-on-surface-mute: var(--sd-neutral-600);
  --color-border:          var(--sd-cream-300);
  --color-border-strong:   var(--sd-neutral-300);

  --color-primary:         var(--sd-burgundy-500);
  --color-primary-hover:   var(--sd-burgundy-600);
  --color-primary-surface: var(--sd-burgundy-50);
  --color-on-primary:      var(--sd-cream-50);

  --color-accent:          var(--sd-gold-500);
  --color-accent-hover:    var(--sd-gold-700);
  --color-accent-surface:  var(--sd-gold-100);
  --color-on-accent:       var(--sd-burgundy-900);

  --color-hairline:        var(--sd-gold-500);   /* the gold divider signature */

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-display: 'Cormorant', 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --font-size-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.812rem);
  --font-size-sm:   clamp(0.875rem, 0.83rem + 0.25vw, 0.94rem);
  --font-size-base: clamp(1rem,     0.94rem + 0.3vw,  1.062rem);
  --font-size-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.187rem);
  --font-size-xl:   clamp(1.25rem,  1.15rem + 0.5vw,  1.375rem);
  --font-size-2xl:  clamp(1.5rem,   1.35rem + 0.75vw, 1.75rem);
  --font-size-3xl:  clamp(1.875rem, 1.6rem + 1.4vw,   2.375rem);
  --font-size-4xl:  clamp(2.25rem,  1.75rem + 2.5vw,  3.25rem);
  --font-size-5xl:  clamp(2.75rem,  2rem + 3.6vw,     4.25rem);

  --line-height-tight: 1.15;
  --line-height-snug:  1.35;
  --line-height-base:  1.6;
  --line-height-loose: 1.8;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.06em;
  --letter-spacing-caps:   0.12em;   /* for uppercase labels */

  /* ── Spacing (4px base modular scale) ───────────────────────────── */
  --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;
  --space-32: 8rem;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   0.125rem;
  --radius-base: 0.25rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  /* ── Shadows (warm, editorial) ──────────────────────────────────── */
  --shadow-xs: 0 1px 2px oklch(0.15 0.06 15 / 0.06);
  --shadow-sm: 0 1px 3px oklch(0.15 0.06 15 / 0.09), 0 1px 2px oklch(0.15 0.06 15 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.15 0.06 15 / 0.12), 0 2px 4px oklch(0.15 0.06 15 / 0.06);
  --shadow-lg: 0 12px 32px oklch(0.15 0.06 15 / 0.15), 0 4px 8px oklch(0.15 0.06 15 / 0.08);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:  150ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
}

/* Dark theme — remap semantic tokens; primitives stay put */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background:      var(--sd-burgundy-950);
    --color-background-alt:  var(--sd-burgundy-900);
    --color-surface:         var(--sd-neutral-900);
    --color-surface-alt:     var(--sd-neutral-800);
    --color-on-surface:      var(--sd-cream-50);
    --color-on-surface-mute: var(--sd-neutral-400);
    --color-border:          var(--sd-neutral-700);
    --color-border-strong:   var(--sd-neutral-600);

    --color-primary:         var(--sd-burgundy-400);
    --color-primary-hover:   var(--sd-burgundy-300);
    --color-primary-surface: var(--sd-burgundy-800);
    --color-on-primary:      var(--sd-burgundy-950);

    --color-accent:          var(--sd-gold-500);
    --color-accent-hover:    var(--sd-gold-300);
    --color-accent-surface:  var(--sd-burgundy-800);
    --color-on-accent:       var(--sd-burgundy-950);
  }
}

/* Explicit user-toggled theme — overrides system preference */
:root[data-theme="light"] {
  color-scheme: light;
  --color-background:      var(--sd-cream-50);
  --color-background-alt:  var(--sd-cream-100);
  --color-surface:         oklch(1 0 0);
  --color-on-surface:      var(--sd-neutral-900);
  --color-on-surface-mute: var(--sd-neutral-600);
  --color-border:          var(--sd-cream-300);
  --color-primary:         var(--sd-burgundy-500);
  --color-primary-hover:   var(--sd-burgundy-600);
  --color-on-primary:      var(--sd-cream-50);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background:      var(--sd-burgundy-950);
  --color-background-alt:  var(--sd-burgundy-900);
  --color-surface:         var(--sd-neutral-900);
  --color-surface-alt:     var(--sd-neutral-800);
  --color-on-surface:      var(--sd-cream-50);
  --color-on-surface-mute: var(--sd-neutral-400);
  --color-border:          var(--sd-neutral-700);
  --color-primary:         var(--sd-burgundy-400);
  --color-primary-hover:   var(--sd-burgundy-300);
  --color-on-primary:      var(--sd-burgundy-950);
}

/* ── Utility layer — a few primitives components can reach for ──── */

.sd-hairline {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-hairline) 20%,
    var(--color-hairline) 80%,
    transparent 100%);
  border: 0;
  margin: var(--space-8) auto;
  width: min(240px, 60%);
}

.sd-eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-on-surface-mute);
}

.sd-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ── Navigation — editorial mega-menu ────────────────────────────── */

.sd-nav {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
}

.sd-nav__item {
  position: relative;
}

.sd-nav__link {
  display: inline-block;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-on-surface);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}

.sd-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: var(--space-2);
  height: 1px;
  background: var(--color-hairline);
  transition: right var(--dur-base) var(--ease-out);
}

.sd-nav__item:hover .sd-nav__link,
.sd-nav__link:focus-visible {
  color: var(--color-primary);
}

.sd-nav__item:hover .sd-nav__link::after,
.sd-nav__link:focus-visible::after {
  right: 0;
}

.sd-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-hairline);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
  z-index: 40;
}

.sd-nav__panel--wide {
  min-width: 640px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6) var(--space-8);
}

.sd-nav__item:hover .sd-nav__panel,
.sd-nav__item:focus-within .sd-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.sd-nav__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sd-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.sd-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sd-nav__leaf {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-on-surface);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.sd-nav__leaf:hover {
  color: var(--color-primary);
}

.sd-nav__badge {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--color-background-alt);
  color: var(--color-on-surface-mute);
  border: 1px solid var(--color-border-strong);
}

.sd-nav__badge--live {
  background: var(--color-primary-surface);
  color: var(--color-primary);
  border-color: transparent;
}

/* ── Editorial page layout — hero, looks section, related edits ─── */

.sd-container {
  width: min(100% - var(--space-8), var(--container-base));
  margin-inline: auto;
}

.sd-hero {
  padding: var(--space-16) 0 var(--space-6);
  text-align: center;
  background: var(--color-background);
  color: var(--color-on-surface);
}

.sd-hero__title {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-on-surface);
}

.sd-hero__lede {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
  color: var(--color-on-surface-mute);
}

.sd-looks {
  padding: var(--space-8) 0 var(--space-24);
  background: var(--color-background);
}

.sd-looks__count {
  margin: 0 0 var(--space-4);
  text-align: center;
}

.sd-prose {
  max-width: 640px;
  margin: 0 auto var(--space-10);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: var(--color-on-surface);
  text-align: center;
}

.sd-empty {
  padding: var(--space-16) 0;
  text-align: center;
  color: var(--color-on-surface-mute);
}

.sd-empty .sd-display {
  font-size: var(--font-size-3xl);
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-on-surface);
}

.sd-related {
  padding: var(--space-16) 0;
  background: var(--color-background-alt);
}

.sd-related__list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sd-related__link {
  display: inline-flex;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.sd-related__link:hover {
  color: var(--color-primary);
  border-color: var(--color-hairline);
  background: var(--color-background);
}

/* ── Look tile — editorial card ─────────────────────────────────── */

.sd-tile {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  overflow: hidden;
  break-inside: avoid;
}

.sd-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-hairline);
}

.sd-tile__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sd-tile__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-background-alt);
}

.sd-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 700ms var(--ease-out);
}

.sd-tile:hover .sd-tile__img {
  transform: scale(1.045);
}

.sd-tile__partner {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 4px 10px;
  background: color-mix(in oklch, var(--color-surface) 88%, transparent);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
}

.sd-tile__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sd-tile__hook {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-on-surface);
}

.sd-tile__code {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-on-surface-mute);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.sd-tile__code .sd-eyebrow {
  font-size: 0.6875rem;
}

.sd-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: gap var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.sd-tile:hover .sd-tile__cta {
  gap: var(--space-3);
  color: var(--color-primary-hover);
}

/* ── Look grid — CSS Grid, staggered fade-in ────────────────────── */

.sd-look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .sd-look-grid {
    gap: var(--space-8);
  }
}

/* Staggered reveal (up to 12 tiles; anything beyond just appears) */
.sd-look-grid > .sd-tile {
  opacity: 0;
  animation: sd-tile-in var(--dur-slow) var(--ease-out) forwards;
}

@keyframes sd-tile-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sd-look-grid > .sd-tile:nth-child(1)  { animation-delay: 0ms; }
.sd-look-grid > .sd-tile:nth-child(2)  { animation-delay: 60ms; }
.sd-look-grid > .sd-tile:nth-child(3)  { animation-delay: 120ms; }
.sd-look-grid > .sd-tile:nth-child(4)  { animation-delay: 180ms; }
.sd-look-grid > .sd-tile:nth-child(5)  { animation-delay: 240ms; }
.sd-look-grid > .sd-tile:nth-child(6)  { animation-delay: 300ms; }
.sd-look-grid > .sd-tile:nth-child(7)  { animation-delay: 360ms; }
.sd-look-grid > .sd-tile:nth-child(8)  { animation-delay: 420ms; }
.sd-look-grid > .sd-tile:nth-child(9)  { animation-delay: 480ms; }
.sd-look-grid > .sd-tile:nth-child(10) { animation-delay: 540ms; }
.sd-look-grid > .sd-tile:nth-child(11) { animation-delay: 600ms; }
.sd-look-grid > .sd-tile:nth-child(12) { animation-delay: 660ms; }

/* Mobile — collapse mega-menu into stacked list */
@media (max-width: 900px) {
  .sd-nav {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .sd-nav__item { width: 100%; }
  .sd-nav__link { padding: var(--space-3) var(--space-4); }
  .sd-nav__panel,
  .sd-nav__panel--wide {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 var(--space-4) var(--space-4);
    background: var(--color-background-alt);
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .sd-nav__leaf { font-size: var(--font-size-base); }
}