@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-display: "Fraunces", "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-serif-alt: "Instrument Serif", ui-serif, Georgia, serif;
  --font-sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-button: "Inter Tight", ui-sans-serif, sans-serif;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-cream: var(--cream);
  --color-porcelain: var(--cream);
  --color-sand: var(--sand);
  --color-champagne: var(--sand);
  --color-beige: var(--beige);
  --color-chocolate: var(--chocolate);
  --color-espresso: var(--espresso);
  --color-ink: var(--ink);
  --color-pure: var(--pure);
  --color-gold: var(--gold);
  --color-gold-soft: var(--gold-soft);
  --color-blush: var(--blush);
  --color-ruby: var(--ruby);

  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --shadow-elegant: 0 40px 100px -40px color-mix(in oklab, var(--espresso) 30%, transparent);
  --shadow-soft: 0 12px 40px -20px color-mix(in oklab, var(--espresso) 18%, transparent);
  --shadow-card: 0 30px 70px -35px color-mix(in oklab, var(--espresso) 25%, transparent);
  --shadow-lift: 0 2px 6px -2px color-mix(in oklab, var(--espresso) 8%, transparent),
                 0 20px 40px -25px color-mix(in oklab, var(--espresso) 15%, transparent);
}

:root {
  --radius: 0.5rem;

  /* Brand palette — porcelaine, champagne, encre chaude, or discret */
  --cream: oklch(0.985 0.006 82);        /* #FBF8F4 porcelaine */
  --sand: oklch(0.945 0.018 82);         /* #F1E9DB champagne clair */
  --beige: oklch(0.870 0.036 78);        /* #DFD0B3 champagne */
  --chocolate: oklch(0.400 0.028 55);    /* graphite chaud */
  --espresso: oklch(0.205 0.020 45);     /* #1F1915 encre chaude */
  --ink: oklch(0.180 0 0);
  --pure: oklch(1 0 0);
  --gold: oklch(0.680 0.076 78);         /* #B08D5B or champagne */
  --gold-soft: oklch(0.820 0.056 82);    /* #D4B98A doré doux */
  --blush: oklch(0.870 0.028 30);        /* #E8D3CE rose poudré */
  --ruby: oklch(0.500 0.180 25);

  --background: var(--cream);
  --foreground: var(--espresso);
  --card: var(--pure);
  --card-foreground: var(--espresso);
  --popover: var(--pure);
  --popover-foreground: var(--espresso);
  --primary: var(--espresso);
  --primary-foreground: var(--cream);
  --secondary: var(--sand);
  --secondary-foreground: var(--espresso);
  --muted: oklch(0.960 0.010 82);
  --muted-foreground: oklch(0.500 0.020 55);
  --accent: var(--gold);
  --accent-foreground: var(--espresso);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: var(--pure);
  --border: oklch(0.910 0.014 82);
  --input: oklch(0.910 0.014 82);
  --ring: var(--gold);
}

.dark {
  --background: var(--ink);
  --foreground: var(--cream);
  --card: var(--espresso);
  --card-foreground: var(--cream);
  --popover: var(--espresso);
  --popover-foreground: var(--cream);
  --primary: var(--cream);
  --primary-foreground: var(--espresso);
  --secondary: var(--chocolate);
  --secondary-foreground: var(--cream);
  --muted: var(--chocolate);
  --muted-foreground: var(--beige);
  --accent: var(--gold);
  --accent-foreground: var(--ink);
  --border: color-mix(in oklab, var(--cream) 15%, transparent);
  --input: color-mix(in oklab, var(--cream) 15%, transparent);
  --ring: var(--gold);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-weight: 300;
    font-optical-sizing: auto;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 350;
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144, "SOFT" 50;
    letter-spacing: -0.025em;
    color: var(--color-espresso);
  }

  ::selection {
    background: var(--color-gold);
    color: var(--color-espresso);
  }
}

@utility eyebrow {
  font-family: var(--font-button);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-espresso);
}

@utility eyebrow-gold {
  font-family: var(--font-button);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-gold);
}

@utility btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-button);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  background-color: var(--color-espresso);
  color: var(--color-cream);
  border: 1px solid var(--color-espresso);
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
@utility btn-primary {
  &:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-espresso);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -14px color-mix(in oklab, var(--color-gold) 60%, transparent);
  }
}

@utility btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-button);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  background-color: transparent;
  color: var(--color-cream);
  border: 1px solid color-mix(in oklab, var(--color-cream) 60%, transparent);
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@utility btn-outline {
  &:hover {
    background-color: var(--color-cream);
    color: var(--color-espresso);
    border-color: var(--color-cream);
    transform: translateY(-1px);
  }
}

@utility btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-button);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-espresso);
  padding-bottom: 0;
  transition: all 0.5s ease;
}
@utility btn-ghost {
  & > .btn-ghost-line {
    display: inline-block;
    width: 2rem;
    height: 1px;
    background-color: var(--color-espresso);
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  &:hover {
    color: var(--color-gold);
  }
  &:hover > .btn-ghost-line {
    width: 3.5rem;
    background-color: var(--color-gold);
  }
}

@utility hairline {
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background-color: var(--color-gold);
  vertical-align: middle;
}

@utility vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-button);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-espresso);
}

@utility number-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 5rem;
  line-height: 1;
  font-variation-settings: "opsz" 144;
  color: var(--color-gold);
  font-style: italic;
}

@utility soft-card {
  background-color: var(--color-pure);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@utility soft-card {
  &:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card);
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slowZoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.12); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes drawLine {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.animate-fade-up { animation: fadeUp 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-fade-in { animation: fadeIn 1.4s ease both; }
.animate-slow-zoom { animation: slowZoom 22s ease-in-out both alternate infinite; }
.animate-marquee { animation: marquee 40s linear infinite; }
.animate-shimmer { animation: shimmer 3s ease-in-out infinite; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.card-hover {
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-6px);
}
.card-hover .img-zoom {
  transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-hover:hover .img-zoom {
  transform: scale(1.06);
}

/* Elegant image frame with subtle gradient border */
.image-frame {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  isolation: isolate;
}
.image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-gold) 22%, transparent);
}

/* Delicate underline link */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.link-underline:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* Product tile chrome */
.tile {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--color-sand);
}
.tile .tile-img {
  transition: transform 2s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 1s ease;
}
.tile:hover .tile-img {
  transform: scale(1.05);
}
.tile .tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--color-espresso) 55%, transparent) 100%);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.tile:hover .tile-overlay {
  opacity: 1;
}