/* AK Leathers design tokens — see 03-design-system.md. These are the single
   source of truth for color/type/spacing/radius across every template;
   pages must consume these custom properties, not hardcode hex values. */
:root {
  /* Colors */
  --color-charcoal-primary: #0F0F0F;
  --color-charcoal-secondary: #181818;
  --color-charcoal-surface: #1D1D1D;
  --color-charcoal-surface-2: #242424;
  --color-gold-accent: #C9A227;
  --color-gold-hover: #E0B530;
  --color-brown-premium: #6B4A2E;
  --color-brown-leather: #8B5E3C;
  --color-beige-light: #F5F2EC;
  --color-white: #FFFFFF;
  --color-text-grey: #B8B8B8;
  --color-text-grey-dim: #8A8A8A;
  --color-text-dark: #1A1A1A;
  --color-text-dark-dim: #5A5A5A;
  --color-text-dark-dim-2: #6B6B6B;
  --color-success-bg: #E5F4E9;
  --color-success-text: #2A8A4A;
  --color-error-bg: #FBE6E6;
  --color-error-text: #A03A3A;
  --color-info-bg: #E6EEFB;
  --color-info-text: #2A5F9E;

  /* Typography */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;

  /* Spacing scale (4px base) */
  --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;

  /* Grid */
  --content-max-width: 1320px;
  --shop-max-width: 1400px;
  --shop-sidebar-width: 260px;

  /* Radius */
  --radius-button: 7px;
  --radius-input: 12px;
  --radius-card: 15px;
  --radius-category-card: 16px;
  --radius-collection-card: 18px;

  /* Shadows */
  --shadow-card-resting-light: 0 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-card-hover-light: 0 24px 46px rgba(0, 0, 0, 0.13);
  --shadow-card-hover-dark: 0 24px 48px rgba(0, 0, 0, 0.4);
  --shadow-sticky-bar: 0 -8px 24px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 24px 48px rgba(0, 0, 0, 0.5);

  /* Motion — the single shared duration/easing scale for every animation
     on the site (mobile motion overhaul, 2026-08-21). --ease-standard
     above predates this and stays as-is (still used for simple color/
     shadow transitions elsewhere) -- --ease-premium is the new preferred
     curve for anything with real movement (reveals, sheets, drawers),
     already what static/css/motion.css, nav.css's drawer, and
     ai-chat.css's bottom sheet were independently hand-writing as the
     same literal cubic-bezier value; consolidated here as one token so
     future motion work has one place to reference instead of a fourth
     hardcoded copy.
     --motion-fast:  micro-interactions (button/card press feedback)
     --motion-normal: default UI transitions (drawers, sheets, badges)
     --motion-slow:   scroll-reveals
     --motion-editorial: large hero/editorial image reveals */
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 160ms;
  --motion-normal: 300ms;
  --motion-slow: 600ms;
  --motion-editorial: 900ms;
  --ease-standard: all .25s ease;

  /* Breakpoints (reference only — CSS can't read these; kept for docs) */
  --breakpoint-mobile: 640px;
  --breakpoint-desktop: 980px;
  --breakpoint-wide: 1440px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Real gap found in the mobile motion audit (2026-08-21), Phase 24: no
   page transition existed at all -- every navigation just hard-cut to
   the next page. Deliberately the lightest possible version of what the
   spec allows ("if appropriate... very subtle... normal page: fast
   transition"): a plain CSS opacity fade on page load, no JS route
   interception. This is a real multi-page Django site, not a client-
   side-routed SPA -- intercepting every <a> click to animate an exit
   before navigating would mean re-implementing back/forward, bookmarks,
   and reload correctly by hand, and risks exactly what the spec warns
   against ("do not make every navigation show a loading screen",
   "shopping must remain fast") for a purely cosmetic touch it calls
   optional. This costs nothing: the page is already fully rendered and
   interactive during the fade, nothing is delayed or blocked.
   Checkout opts out entirely via body.no-page-fade (see checkout.html)
   per the spec's explicit "Checkout: NO unnecessary animation". */
@keyframes ak-page-fade-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: ak-page-fade-in var(--motion-fast) var(--ease-premium); }
body.no-page-fade { animation: none; }

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

/* Belt-and-braces: any element toggled via the `hidden` attribute (nav
   dropdowns/drawer, tab panels, modals) must stay hidden even when a
   component class on the same element also sets `display` — the UA's
   `[hidden]` rule and an author class rule are equal specificity, so
   without this, source order alone decides and a later-loaded stylesheet
   can silently un-hide it. */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--color-gold-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}