/* ==========================================================================
   Arthaus Design Tokens
   ========================================================================== 
   Single source of truth for all visual properties.
   Referenced by tailwind.config.js and available globally via CSS custom properties.
   
   Doc: docs/storefront-redesign/reference/design-tokens.md
   ========================================================================== */

:root {
  /* ── Color ──────────────────────────────────────────────────────────────── */
  /* Stored as space-separated RGB channels (not hex) so Tailwind can inject an
     alpha channel for /opacity modifiers, e.g. `bg-parchment/95`. Consume a token
     as a full color with rgb(): `rgb(var(--color-parchment))`. */
  --color-parchment: 245 242 237;       /* #F5F2ED */
  --color-parchment-light: 250 248 245; /* #FAF8F5 */
  --color-charcoal: 45 45 45;           /* #2D2D2D */
  --color-bronze: 176 125 79;           /* #B07D4F */
  --color-warm-gray: 107 101 96;        /* #6B6560 */
  --color-border: 232 228 223;          /* #E8E4DF */
  --color-mute: 154 150 144;            /* #9A9690 */
  --color-disabled-bg: 240 237 234;     /* #F0EDEA */
  --color-disabled-text: 107 101 96;    /* #6B6560 */
  --color-white: 255 255 255;           /* #FFFFFF */
  --color-success: 76 175 80;           /* #4CAF50 */
  --color-warning: 255 107 107;         /* #FF6B6B */

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, "Courier New", monospace;

  /* Font sizes */
  --fs-7xl: 4.5rem;     /* 72px — hero */
  --fs-6xl: 3.75rem;    /* 60px */
  --fs-5xl: 3rem;       /* 48px */
  --fs-4xl: 2.25rem;    /* 36px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-base: 1rem;      /* 16px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-2xs: 0.6875rem;  /* 11px — badges, fine print */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --lh-loose: 1.8;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;       /* labels, all-caps */
  --tracking-widest: 0.25em;      /* logo wordmark */

  /* ── Spacing (4px base) ─────────────────────────────────────────────────── */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-28: 7rem;     /* 112px */
  --space-32: 8rem;     /* 128px */
  --space-section-y: var(--space-20);
  --space-section-y-lg: var(--space-28);

  /* ── Border radius ──────────────────────────────────────────────────────── */
  --radius-sm: 0.125rem;   /* 2px — tags */
  --radius-md: 0.375rem;   /* 6px — buttons, inputs */
  --radius-lg: 0.75rem;    /* 12px — cards */
  --radius-full: 9999px;   /* circles, pills */

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(45, 45, 45, 0.04);
  --shadow-md: 0 4px 12px rgba(45, 45, 45, 0.06);
  --shadow-lg: 0 12px 32px rgba(45, 45, 45, 0.10);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container-max: 80rem;     /* 1280px */
  --container-narrow: 64rem;  /* 1024px */
  --container-wide: 120rem;   /* 1920px */
  --gutter-x: var(--space-6);
  --gutter-x-lg: var(--space-12);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* ── Z-layers ───────────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky-bar: 40;
  --z-header: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
}

/* ── Concierge staged loader (search.js) ─────────────────────────────────── */
/* Indeterminate shimmer bar — a sweeping bronze highlight while the concierge works. */
@keyframes arthaus-loader-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
.concierge-loader-track { position: relative; overflow: hidden; }
.concierge-loader-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgb(var(--color-bronze) / 0.55), transparent);
  animation: arthaus-loader-sweep 1.3s var(--ease-standard) infinite;
}
/* Gentle sparkle pulse on the concierge mark. */
@keyframes arthaus-sparkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.concierge-sparkle { transform-origin: center; animation: arthaus-sparkle 1.6s var(--ease-standard) infinite; }

/* Skeleton shimmer — a sweeping highlight, richer than a flat pulse. The `.is-warming`
   modifier (added by the loader on its later stages) speeds it up + warms the tint, so the
   placeholders feel like they're "heating up" toward the reveal. */
@keyframes arthaus-skeleton-sweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
.concierge-skeleton {
  background-image: linear-gradient(100deg,
    rgb(var(--color-border) / 0.22) 30%,
    rgb(var(--color-bronze) / 0.10) 50%,
    rgb(var(--color-border) / 0.22) 70%);
  background-size: 250% 100%;
  animation: arthaus-skeleton-sweep 1.8s var(--ease-standard) infinite;
}
.concierge-skeleton.is-warming {
  animation-duration: 1s;
  background-image: linear-gradient(100deg,
    rgb(var(--color-border) / 0.20) 28%,
    rgb(var(--color-bronze) / 0.22) 50%,
    rgb(var(--color-border) / 0.20) 72%);
}

/* Staged reveal — results phase in (fade + rise), staggered by inline animation-delay. */
@keyframes arthaus-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.concierge-reveal { opacity: 0; animation: arthaus-reveal 0.55s var(--ease-emphasized) both; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  .concierge-loader-track::after,
  .concierge-sparkle,
  .concierge-skeleton { animation: none; }
  .concierge-reveal { opacity: 1; animation: none; transform: none; }
}