/* =========================================================================
   All Paws Loft — Design Tokens
   Boutique premium pet shop, Singapore. Hermès-inspired warm orange palette,
   classical serif typography, soft cream neutrals.
   ========================================================================= */

/* ---------- Webfonts (Google Fonts — see README for substitution notes) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Nunito+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* =====================================================================
     COLOR — Brand
     The signature orange is a direct nod to Hermès — saturated, warm, and
     instantly recognisable. Charcoal and cream complete the palette;
     never use pure black on pure white.
     ===================================================================== */

  --apl-orange:        #E96A2C;   /* Primary brand — logo background */
  --apl-orange-deep:   #C8551E;   /* Hover / press, deeper terracotta */
  --apl-orange-soft:   #F2966B;   /* Backgrounds, tints */
  --apl-orange-wash:   #FBEADC;   /* Section washes, cards on cream */

  --apl-ink:           #2B2622;   /* Primary text — warm charcoal */
  --apl-ink-soft:      #5B5048;   /* Secondary text — muted brown */
  --apl-ink-mute:      #8A7F75;   /* Tertiary, captions, meta */

  --apl-cream:         #F7F1E8;   /* Page background — warm off-white */
  --apl-cream-deep:    #EFE6D6;   /* Card on cream, dividers */
  --apl-paper:         #FFFEFB;   /* Pure-ish white for hero cards */

  --apl-olive:         #4A4738;   /* Etching ink — engraved illustration */
  --apl-gold:          #B58A4A;   /* Subtle premium accent, dividers */

  /* Semantic colors */
  --apl-success:       #5A7A4A;   /* Vaccinated / health certified */
  --apl-warn:          #C2823A;   /* Reserved status */
  --apl-sold:          #8A7F75;   /* Sold out / Found a loving home */

  /* Surface aliases */
  --apl-bg:            var(--apl-cream);
  --apl-bg-alt:        var(--apl-paper);
  --apl-fg:            var(--apl-ink);
  --apl-fg-soft:       var(--apl-ink-soft);
  --apl-fg-mute:       var(--apl-ink-mute);
  --apl-accent:        var(--apl-orange);
  --apl-border:        rgba(43, 38, 34, 0.12);
  --apl-border-strong: rgba(43, 38, 34, 0.24);

  /* =====================================================================
     TYPE — Three families, deliberately classical
     - Cinzel: uppercase Roman serif; logo + section-marker labels only
     - Cormorant Garamond: elegant high-contrast serif; all real headings
     - Nunito Sans: warm humanist sans-serif; body, UI labels, prices
     ===================================================================== */

  --apl-font-display:  "Cinzel", "Trajan Pro", "Optima", serif;
  --apl-font-serif:    "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --apl-font-sans:     "Nunito Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Scale — pairs well at 1920 hero, 16 base */
  --apl-text-2xs:  11px;
  --apl-text-xs:   12px;
  --apl-text-sm:   14px;
  --apl-text-base: 16px;
  --apl-text-md:   18px;
  --apl-text-lg:   22px;
  --apl-text-xl:   28px;
  --apl-text-2xl:  36px;
  --apl-text-3xl:  48px;
  --apl-text-4xl:  64px;
  --apl-text-5xl:  88px;

  --apl-leading-tight:  1.1;
  --apl-leading-snug:   1.25;
  --apl-leading-normal: 1.55;
  --apl-leading-relaxed: 1.75;

  --apl-track-display: 0.22em;  /* Logo-style caps */
  --apl-track-label:   0.16em;  /* Small caps labels, nav, eyebrows */
  --apl-track-tight:   -0.01em; /* Large serif headings */

  /* =====================================================================
     SPACING — 4px base, extended for editorial layouts
     ===================================================================== */
  --apl-space-1:  4px;
  --apl-space-2:  8px;
  --apl-space-3:  12px;
  --apl-space-4:  16px;
  --apl-space-5:  20px;
  --apl-space-6:  24px;
  --apl-space-8:  32px;
  --apl-space-10: 40px;
  --apl-space-12: 48px;
  --apl-space-16: 64px;
  --apl-space-20: 80px;
  --apl-space-24: 96px;
  --apl-space-32: 128px;

  /* =====================================================================
     RADII — Mostly square. A boutique product, not a tech app.
     Soft radius only on tags, pills, image cards.
     ===================================================================== */
  --apl-radius-none: 0;
  --apl-radius-sm:   2px;
  --apl-radius-md:   4px;
  --apl-radius-lg:   8px;
  --apl-radius-pill: 999px;

  /* =====================================================================
     SHADOWS — Whispered, never dramatic. Boutique feel.
     ===================================================================== */
  --apl-shadow-xs: 0 1px 2px rgba(43, 38, 34, 0.06);
  --apl-shadow-sm: 0 2px 8px rgba(43, 38, 34, 0.08);
  --apl-shadow-md: 0 8px 24px rgba(43, 38, 34, 0.10);
  --apl-shadow-lg: 0 18px 48px rgba(43, 38, 34, 0.14);
  --apl-shadow-orange: 0 12px 32px rgba(233, 106, 44, 0.28);

  /* =====================================================================
     MOTION — Slow, elegant. No bounces. Generous curves.
     ===================================================================== */
  --apl-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --apl-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --apl-dur-fast:    180ms;
  --apl-dur-normal:  320ms;
  --apl-dur-slow:    520ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --apl-page-max:  1280px;
  --apl-page-pad:  clamp(20px, 5vw, 64px);
  --apl-gutter:    32px;
}

/* =========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Use these directly on real HTML — no class needed.
   Wrap a page in .apl-root to inherit base body type.
   ========================================================================= */

.apl-root,
.apl-root body {
  background: var(--apl-bg);
  color: var(--apl-fg);
  font-family: var(--apl-font-sans);
  font-size: var(--apl-text-base);
  line-height: var(--apl-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.apl-root h1, .apl-h1 {
  font-family: var(--apl-font-serif);
  font-weight: 500;
  font-size: var(--apl-text-4xl);
  line-height: var(--apl-leading-tight);
  letter-spacing: var(--apl-track-tight);
  color: var(--apl-ink);
  margin: 0 0 var(--apl-space-6);
}

.apl-root h2, .apl-h2 {
  font-family: var(--apl-font-serif);
  font-weight: 500;
  font-size: var(--apl-text-3xl);
  line-height: var(--apl-leading-snug);
  letter-spacing: var(--apl-track-tight);
  color: var(--apl-ink);
  margin: 0 0 var(--apl-space-5);
}

.apl-root h3, .apl-h3 {
  font-family: var(--apl-font-serif);
  font-weight: 600;
  font-size: var(--apl-text-2xl);
  line-height: var(--apl-leading-snug);
  color: var(--apl-ink);
  margin: 0 0 var(--apl-space-4);
}

.apl-root h4, .apl-h4 {
  font-family: var(--apl-font-serif);
  font-weight: 600;
  font-size: var(--apl-text-xl);
  line-height: var(--apl-leading-snug);
  color: var(--apl-ink);
  margin: 0 0 var(--apl-space-3);
}

/* Eyebrow / section markers — Cinzel uppercase, the logo-tagline style */
.apl-root .apl-eyebrow,
.apl-eyebrow {
  font-family: var(--apl-font-display);
  font-weight: 500;
  font-size: var(--apl-text-xs);
  letter-spacing: var(--apl-track-display);
  text-transform: uppercase;
  color: var(--apl-orange);
  display: inline-block;
}

/* Display — for hero "ALL PAWS LOFT" style lockups */
.apl-display {
  font-family: var(--apl-font-display);
  font-weight: 500;
  letter-spacing: var(--apl-track-display);
  text-transform: uppercase;
  line-height: var(--apl-leading-tight);
}

.apl-root p, .apl-p {
  font-family: var(--apl-font-sans);
  font-size: var(--apl-text-base);
  line-height: var(--apl-leading-relaxed);
  color: var(--apl-fg-soft);
  text-wrap: pretty;
  margin: 0 0 var(--apl-space-4);
}

/* Editorial paragraph — serif body for hero/about copy */
.apl-prose {
  font-family: var(--apl-font-serif);
  font-size: var(--apl-text-lg);
  font-weight: 400;
  line-height: var(--apl-leading-relaxed);
  color: var(--apl-ink);
  text-wrap: pretty;
}

/* Pull-quote — italicised serif, testimonial style */
.apl-quote {
  font-family: var(--apl-font-serif);
  font-style: italic;
  font-size: var(--apl-text-xl);
  line-height: var(--apl-leading-relaxed);
  color: var(--apl-ink);
}

/* Small UI labels — nav, tags, meta */
.apl-label {
  font-family: var(--apl-font-sans);
  font-weight: 600;
  font-size: var(--apl-text-xs);
  letter-spacing: var(--apl-track-label);
  text-transform: uppercase;
  color: var(--apl-ink-soft);
}

.apl-root a, .apl-link {
  color: var(--apl-orange-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--apl-dur-fast) var(--apl-ease);
}
.apl-root a:hover, .apl-link:hover { color: var(--apl-orange); }

/* Hairline divider — a single gold line, the boutique signature */
.apl-rule {
  border: 0;
  height: 1px;
  background: var(--apl-gold);
  opacity: 0.45;
  margin: var(--apl-space-12) 0;
}
.apl-rule--center {
  width: 56px;
  margin-left: auto;
  margin-right: auto;
  height: 1px;
  background: var(--apl-orange);
  opacity: 1;
}

/* Price — Nunito tabular */
.apl-price {
  font-family: var(--apl-font-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--apl-ink);
  letter-spacing: 0.01em;
}
.apl-price--strike {
  font-weight: 400;
  color: var(--apl-fg-mute);
  text-decoration: line-through;
  margin-right: var(--apl-space-2);
}