/* ============================================================
   CAPE JOY × APPLE HIG — Design System Override
   Layer: apple-hig.css (loads after index-D1ohP_fv.css)
   Principles applied:
   • Purpose     — wine-first hierarchy, one clear CTA per view
   • Simplicity  — restrained palette, whitespace, Large Title type
   • Craft       — continuous corners, 1:1 spring motion, grain kept
   • Familiarity — SF-style type stack, pill controls, clear feedback
   • Flexibility — light/dark adaptive, reduced-motion honored
   • Delight     — pointer-down scale, velvet shadow, press states
   ============================================================ */

/* ---------- 1. FOUNDATIONS · Color & Semantic Tokens ---------- */
:root {
  /* Apple-adaptive system background / label pairs layered on Cape Joy cream */
  --cj-bg-primary:    rgb(245 241 232);          /* systemBackground */
  --cj-bg-secondary:  rgb(250 248 243);          /* secondarySystemBackground */
  --cj-bg-tertiary:   rgb(253 252 250);          /* tertiarySystemBackground */
  --cj-bg-grouped:    rgb(245 241 232);

  --cj-label:         rgb(27 27 27);             /* label */
  --cj-label-2:       rgb(60 60 67 / .78);       /* secondaryLabel */
  --cj-label-3:       rgb(60 60 67 / .62);       /* tertiaryLabel */
  --cj-label-4:       rgb(60 60 67 / .42);       /* quaternaryLabel */
  --cj-separator:     rgb(27 27 27 / .12);       /* separator */
  --cj-separator-opq: rgb(232 224 208);

  /* Brand accent (kept from existing palette — wine + gold) */
  --cj-accent:        rgb(53 89 56);             /* wine deep green */
  --cj-accent-hi:     rgb(212 165 116);          /* gold */
  --cj-accent-tint:   rgb(53 89 56 / .12);

  /* Fill colors (Apple 'fill' scale for controls) */
  --cj-fill:          rgb(120 120 128 / .22);
  --cj-fill-2:        rgb(120 120 128 / .18);
  --cj-fill-3:        rgb(118 118 128 / .12);
  --cj-fill-4:        rgb(116 116 128 / .08);

  /* Type */
  --cj-font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Display",
                   "SF Pro Text", "Helvetica Neue", "Segoe UI", Inter, sans-serif;
  --cj-font-mono:  "SF Mono", ui-monospace, Menlo, Monaco, "Space Mono", monospace;

  /* Apple's signature spring curves */
  --cj-spring:      cubic-bezier(.16, 1, .3, 1);   /* iOS "ease-out spring" */
  --cj-spring-hard: cubic-bezier(.34, 1.4, .64, 1);/* press w/ overshoot */
  --cj-ease-io:     cubic-bezier(.4, 0, .2, 1);    /* standard material move */

  /* Radii — Apple continuous-corner approximation */
  --cj-r-sm:  10px;
  --cj-r-md:  14px;
  --cj-r-lg:  20px;
  --cj-r-xl:  28px;
  --cj-r-pill: 980px;

  /* Elevation (velvet, not plastic) */
  --cj-shadow-1: 0 1px 2px rgb(27 27 27 / .06), 0 1px 3px rgb(27 27 27 / .05);
  --cj-shadow-2: 0 4px 12px rgb(27 27 27 / .08), 0 2px 4px rgb(27 27 27 / .05);
  --cj-shadow-3: 0 12px 32px rgb(27 27 27 / .12), 0 4px 8px rgb(27 27 27 / .06);
  --cj-shadow-wine: 0 8px 28px rgb(53 89 56 / .28);

  /* Duration tokens */
  --cj-d-fast:  .18s;
  --cj-d-med:   .32s;
  --cj-d-slow:  .55s;

  color-scheme: light;
}

/* ---------- 2. TYPOGRAPHY · SF-style hierarchy ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--cj-font-sans) !important;
  letter-spacing: -.011em;                     /* SF text tracking */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";        /* SF Pro alternates */
  background: var(--cj-bg-primary);
  color: var(--cj-label);
}

/* Apple Display tracking: tighter for big sizes, looser for caps */
h1, h2, h3, h4, h5, h6,
.font-display,
.font-sans { font-family: var(--cj-font-sans) !important; }

h1, .text-5xl, .text-4xl {
  letter-spacing: -.022em;                      /* SF Display Large Title */
  font-weight: 600;                             /* SF Semibold, not bold */
  line-height: 1.06;
}
h2, .text-3xl { letter-spacing: -.02em; font-weight: 600; line-height: 1.12; }
h3, .text-2xl { letter-spacing: -.015em; font-weight: 600; }
h4, h5, h6    { letter-spacing: -.01em;  font-weight: 600; }

p, .text-base, .text-lg, .text-sm { letter-spacing: -.011em; font-weight: 400; }

/* Caps labels — HIG caption tracking */
.micro-label, .uppercase, .text-xs {
  letter-spacing: .08em;
  font-weight: 500;
}
.font-mono, code, kbd, samp, pre { font-family: var(--cj-font-mono) !important; }

/* Tertiary/secondary text colors (Apple label scale) */
.text-charcoal\/60, .text-charcoal\/70, .text-charcoal\/80,
.text-muted-foreground, .text-charcoal\/50 {
  color: var(--cj-label-2) !important;
}

::selection { background: rgb(212 165 116 / .35); }

/* ---------- 3. CONTROLS · Pointer-down feedback (agency) ---------- */
/* Apple rule: respond on pointer-DOWN, not release. */
a, button, [role="button"],
.btn-wine, .btn-gold, .btn-outline,
.cursor-pointer {
  transition:
    transform  var(--cj-d-fast) var(--cj-ease-io),
    background var(--cj-d-fast) var(--cj-ease-io),
    color      var(--cj-d-fast) var(--cj-ease-io),
    box-shadow var(--cj-d-fast) var(--cj-ease-io),
    opacity    var(--cj-d-fast) var(--cj-ease-io);
  -webkit-tap-highlight-color: transparent;
}

.btn-wine, .btn-gold, .btn-outline {
  border-radius: var(--cj-r-pill) !important;   /* Apple pill */
  padding: .9rem 1.9rem !important;
  font-family: var(--cj-font-sans) !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;              /* Apple drops ALL-CAPS on buttons */
  will-change: transform;
}

/* Hover: gentle lift with wine-tinted shadow */
.btn-wine:hover, .btn-gold:hover, .btn-outline:hover {
  transform: translateY(-2px) scale(1.015);
  transition-duration: var(--cj-d-med);
  transition-timing-function: var(--cj-spring);
  box-shadow: var(--cj-shadow-wine);
}
.btn-gold:hover { box-shadow: 0 8px 28px rgb(212 165 116 / .45); }

/* ACTIVE = pointer-down: immediate compress, fast spring snap */
.btn-wine:active, .btn-gold:active, .btn-outline:active,
a:active, button:active, [role="button"]:active {
  transform: scale(.96) !important;
  transition-duration: .1s !important;
  transition-timing-function: var(--cj-spring-hard) !important;
}

/* Focus — visible ring, Apple-style */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cj-accent);
  outline-offset: 3px;
  border-radius: var(--cj-r-sm);
}

/* Primary "prominent" button (HIG: filled accent pill) */
.btn-wine {
  background: var(--cj-accent) !important;
  color: rgb(255 255 255) !important;
  box-shadow: var(--cj-shadow-wine);
}
.btn-gold { background: var(--cj-accent-hi) !important; color: var(--cj-label) !important; }

/* ---------- 4. MATERIALS · Translucent nav (Liquid Glass feel) ---------- */
nav, header,
.sticky.top-0, [class*="backdrop"],
.bg-cream\/80, .bg-cream\/95 {
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  background-color: rgb(245 241 232 / .72) !important;
  border-bottom: 1px solid var(--cj-separator);
}

/* Dark sections keep depth (over-image nav) */
.bg-charcoal nav, .bg-black nav,
[class*="bg-charcoal"] nav {
  background-color: rgb(27 27 27 / .62) !important;
  border-bottom-color: rgb(255 255 255 / .12);
}

/* ---------- 5. CARDS · Continuous corners, layered elevation ---------- */
.rounded-2xl, .rounded-xl, .rounded-lg,
[data-slot="card"], [class*="shadow-luxury"] {
  border-radius: var(--cj-r-lg) !important;     /* continuous feel */
}
.rounded-sm, .rounded { border-radius: var(--cj-r-sm) !important; }
.rounded-full { border-radius: var(--cj-r-pill) !important; }

.shadow-luxury { box-shadow: var(--cj-shadow-2) !important; }
.shadow-wine   { box-shadow: var(--cj-shadow-1) !important; }

/* Card hover: spring lift + deep shadow (craft) */
.group:hover [class*="shadow-luxury"],
[class*="shadow-luxury"]:hover,
.rounded-2xl:hover:not(:active):not(button):not(a) {
  transition: transform var(--cj-d-med) var(--cj-spring),
              box-shadow var(--cj-d-med) var(--cj-spring);
}

/* Hairline separators (Apple separator color, not gray-200) */
.border-b, .border-t, .border, hr, [class*="border-charcoal/10"] {
  border-color: var(--cj-separator) !important;
}

/* ---------- 6. FORMS · Apple input styling ---------- */
input, textarea, select,
[data-slot="input"], [data-slot="textarea"] {
  border-radius: var(--cj-r-md) !important;
  border-color: var(--cj-separator) !important;
  background: var(--cj-bg-tertiary) !important;
  padding: .75rem 1rem !important;
  font-family: var(--cj-font-sans) !important;
  letter-spacing: -.011em;
  transition: border-color var(--cj-d-fast) var(--cj-ease-io),
              box-shadow  var(--cj-d-fast) var(--cj-ease-io);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--cj-accent) !important;
  box-shadow: 0 0 0 4px var(--cj-accent-tint) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--cj-label-4) !important; }

/* ---------- 7. MOTION · Spring physics everywhere ---------- */
/* Replace long linear fades with spring — everything interruptible */
*, *::before, *::after {
  transition-timing-function: var(--cj-spring);
}

/* Existing custom eases → unified Apple springs */
[style*="ease-luxe"], .ease-luxe     { transition-timing-function: var(--cj-spring) !important; }
[style*="ease-smooth"], .ease-smooth { transition-timing-function: var(--cj-ease-io) !important; }

/* Scroll-trigger reveals: crisper entry */
.translate-y-8, .-translate-y-2, .translate-x-8, .-translate-x-8 {
  transition: transform .6s var(--cj-spring), opacity .5s var(--cj-ease-io);
}

/* Hero parallax & image hovers: 1:1-feel drift */
img { will-change: transform; }

/* ---------- 8. REDUCED MOTION · Respect the user (HIG: Accessibility) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .grain-overlay { display: none; }              /* film grain = vestibular trigger */
}

/* ---------- 9. SCROLLBAR · Thin, brand-tinted ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(27 27 27 / .18);
  border-radius: var(--cj-r-pill);
  border: 2px solid var(--cj-bg-primary);
}
::-webkit-scrollbar-thumb:hover { background: rgb(53 89 56 / .5); }

/* ---------- 10. DARK SECTIONS · Keep them deep, add glass edge ---------- */
.bg-charcoal, .bg-black {
  color: rgb(255 255 255);
}
.bg-charcoal h1, .bg-charcoal h2, .bg-charcoal h3,
.bg-black h1, .bg-black h2, .bg-black h3 { color: rgb(255 255 255); }
.bg-charcoal p, .bg-black p { color: rgb(255 255 255 / .72); }

/* Wine sections get the velvet treatment */
.bg-wine { background: linear-gradient(160deg, rgb(44 74 47) 0%, rgb(53 89 56) 100%) !important; }

/* ---------- 11. MISC CRAFT ---------- */
/* Numbers in tabular form (prices, dates) */
.price, .tabular-nums, [class*="tabular"] { font-variant-numeric: tabular-nums; }

/* Grain overlay: keep, but subtler (Apple would never grain this hard) */
.grain-overlay { opacity: .028 !important; }

/* Smooth page entry on load */
#root { animation: cj-enter .45s var(--cj-spring) both; }
@keyframes cj-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Toast / dialog: iOS-style sheet with spring */
[role="dialog"], [data-slot="sheet-content"] {
  border-radius: var(--cj-r-xl) var(--cj-r-xl) 0 0 !important;
  animation: cj-sheet .45s var(--cj-spring) both;
}
@keyframes cj-sheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ---- HIG pass 2026-09-15: contrast, transparency, touch targets ---- */
@media (prefers-contrast: more){
  .text-charcoal\/50{color:rgba(35,31,32,.88)}
  .text-charcoal\/60,.text-charcoal\/70,.text-charcoal\/80{color:#231f20}
  .text-white\/60,.text-white\/70,.text-white\/80{color:#fff}
}
@media (prefers-reduced-transparency: reduce){
  [class*="backdrop-blur"]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .bg-white\/60,.bg-white\/70,.bg-white\/80{background-color:rgba(255,255,255,.98)}
  .bg-black\/30{background-color:rgba(0,0,0,.55)}
}
@media (pointer: coarse){
  header a{min-height:44px;display:inline-flex;align-items:center}
}
.bg-black\/40{background-color:rgba(0,0,0,.45)}