/* ============================================================
   LovelyHair — Design Tokens (single source of truth)
   Lifted VERBATIM from the Claude Design System
   (Loevlyhair_Brand_Design.zip → tokens/colors.css,
   typography.css, spacing.css, elevation.css).

   GOLDEN RULE: components reference the SEMANTIC ALIASES
   (e.g. --surface-card, --text-price, --color-action) — never
   a raw hex and never the raw palette directly. Re-theming
   happens in exactly one place.

   Fonts load via Google Fonts in layout/theme.liquid.
   Merchant-tunable overrides come from
   snippets/theme-styles-variables.liquid (which re-points the
   RAW palette vars, so every alias cascades automatically).
   ============================================================ */

:root {
  /* ====================================================
     COLOR — (1) raw brand palette
     ==================================================== */
  --lh-amber: #A05513;          /* Warm Amber — signature color */
  --lh-amber-light: #C87A3D;    /* Light Amber */
  --lh-amber-dark: #7A3F0D;     /* Dark Amber */
  --lh-gold: #D4A574;           /* Soft Gold — premium accents */
  --lh-gold-light: #E8CBA8;     /* Light Gold */

  /* Amber tints for surfaces / hovers */
  --lh-amber-50: #FBF4EC;
  --lh-amber-100: #F4E3D0;
  --lh-amber-200: #E8C6A3;

  /* CTA (action) colors */
  --lh-cta: #1A1A1A;            /* Blackish — primary action buttons ONLY */
  --lh-cta-hover: #2D2D2D;

  /* Neutral "stone" ramp (50 → 950) */
  --lh-stone-50: #FAFAF9;       /* Off-White — page background */
  --lh-stone-100: #F5F5F4;      /* Light Gray — alt surface */
  --lh-stone-200: #E7E5E4;      /* Border Gray */
  --lh-stone-300: #D6D3D1;
  --lh-stone-400: #A8A29E;
  --lh-stone-500: #78716C;
  --lh-stone-600: #57534E;      /* Text Gray — secondary text */
  --lh-stone-700: #44403C;
  --lh-stone-800: #292524;      /* Dark Text — primary body text */
  --lh-stone-900: #1C1917;      /* Near Black — headings */
  --lh-stone-950: #0E0C0B;

  --lh-white: #FFFFFF;
  --lh-black: #000000;

  /* RGB channels (for rgba() compositing — scrims/overlays/borders that
     need variable opacity but must still source the brand color) */
  --lh-stone-900-rgb: 28, 25, 23;
  --lh-stone-50-rgb: 250, 250, 249;
  --lh-amber-rgb: 160, 85, 19;
  --lh-black-rgb: 0, 0, 0;
  --lh-white-rgb: 255, 255, 255;

  /* System / status colors */
  --lh-success: #16A34A;
  --lh-success-soft: #DCFCE7;
  /* Next step down the same green ramp: DS #16A34A is 3.3:1 on white, so any
     green TEXT (or white text on green) fails WCAG AA. This passes 5.0:1. */
  --lh-success-strong: #15803D;
  --lh-warning: #F59E0B;
  --lh-warning-soft: #FEF3C7;
  --lh-error: #DC2626;
  --lh-error-soft: #FEE2E2;
  --lh-star: #E8A33D;           /* Review stars — warm gold */

  /* Third-party brand colours, used ONLY to spell a platform's own name the way it
     spells it (the "Google" in "Leave us a Google review"). Never for UI. */
  --google-blue: #4285F4;
  --google-red: #EA4335;
  --google-yellow: #FBBC05;
  --google-green: #34A853;

  /* ====================================================
     COLOR — semantic aliases (PREFER THESE in components)
     ==================================================== */
  /* Brand */
  --color-primary: var(--lh-amber);
  --color-primary-hover: var(--lh-amber-dark);
  --color-primary-tint: var(--lh-amber-50);
  --color-accent: var(--lh-gold);
  --color-accent-soft: var(--lh-gold-light);

  /* Action (CTA) — blackish, primary buttons only */
  --color-action: var(--lh-cta);
  --color-action-hover: var(--lh-cta-hover);
  --color-on-action: var(--lh-white);

  /* Surfaces */
  --surface-page: var(--lh-stone-50);
  --surface-card: var(--lh-white);
  --surface-raised: var(--lh-white);
  --surface-sunken: var(--lh-stone-100);
  --surface-inverse: var(--lh-stone-900);
  --surface-image: var(--lh-stone-100);  /* photo placeholder bg */

  /* Text */
  --text-heading: var(--lh-stone-900);
  --text-body: var(--lh-stone-800);
  --text-muted: var(--lh-stone-600);
  --text-subtle: var(--lh-stone-400);
  --text-on-dark: var(--lh-stone-50);
  --text-on-dark-muted: rgba(250, 250, 249, 0.72);
  --text-price: var(--lh-amber);
  --text-link: var(--lh-amber);

  /* Borders */
  --border-subtle: var(--lh-stone-200);
  --border-strong: var(--lh-stone-300);
  --border-focus: var(--lh-amber);

  /* Feedback */
  --color-sale: var(--lh-error);        /* discount badges / save % */
  --color-savings: var(--lh-success-strong);        /* absolute "Save $X" badge (green) */
  --color-savings-soft: var(--lh-success-soft);
  --color-instock: var(--lh-success-strong);

  /* Floating launchers (scroll-to-top, Shopify Inbox chat) lift by this while a
     bottom sticky bar is on screen; set in scroll-to-top.css. */
  --lh-fab-safe-bottom: 0px;
  --color-error: var(--lh-error);       /* form errors */
  --color-rating: var(--lh-star);

  /* Marketing badge accents — one distinct color per product flag */
  --badge-bestseller: var(--lh-amber);   /* signature amber */
  --badge-new: #0E7C5A;                  /* emerald green */
  --badge-trending: #9D3B6B;             /* warm plum/berry */
  --badge-limited: var(--lh-stone-900);  /* near-black, gold text */
  --badge-sale: var(--lh-error);         /* red */

  /* ====================================================
     TYPOGRAPHY
     ==================================================== */
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: var(--font-display);
  --font-sans: var(--font-body);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Fluid display / heading scale (Playfair). Sized for phones first (2026-09-25:
     the old 40px hero / 32px H1 minimums crowded a 375px screen); the vw term
     carries them up to the desktop sizes. --heading-scale is a phone-only
     multiplier (Theme settings -> Typography -> "Mobile heading size",
     theme-styles-variables.liquid); 1 everywhere else. */
  --heading-scale: 1;
  --font-hero: calc(clamp(1.75rem, 1.2rem + 2.75vw, 3.5rem) * var(--heading-scale));  /* 28 → 56 */
  --font-h1:   calc(clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem) * var(--heading-scale));    /* 24 → 40 */
  --font-h2:   calc(clamp(1.25rem, 0.95rem + 1.35vw, 2rem) * var(--heading-scale));   /* 20 → 32 */
  --font-h3:   calc(clamp(1.125rem, 0.95rem + 0.65vw, 1.5rem) * var(--heading-scale)); /* 18 → 24 */
  --font-h4:   calc(clamp(1rem, 0.9rem + 0.35vw, 1.25rem) * var(--heading-scale));    /* 16 → 20 */

  /* Body / UI scale (Inter).
     --type-scale shrinks the UI sizes on phones (Theme settings -> Typography ->
     "Mobile text size", emitted in theme-styles-variables.liquid); 1 = desktop.
     Body copy scales too (2026-09-25): with 20px section headings on a phone, 16px
     paragraphs left the heading only 1.27x the text under it (tools/type_audit.js), so
     the hierarchy read flat; at the default 90% body copy is 14.4px. Form fields do NOT
     follow it: --font-input stays 16px (base.css), which stops iOS Safari zooming into a
     focused field. The 11px overline is not scaled. */
  --type-scale: 1;
  --font-body-lg: calc(1.125rem * var(--type-scale)); /* 18 */
  --font-body-md: calc(1rem * var(--type-scale));    /* 16 — base (14.4 on phones) */
  --font-input: 1rem;                                 /* 16 — form fields, never scaled */
  --font-body-sm: calc(0.875rem * var(--type-scale)); /* 14 */
  --font-caption: calc(0.75rem * var(--type-scale));  /* 12 */
  --font-overline: 0.6875rem;                         /* 11 — eyebrows / micro-labels */

  /* Card type — fluid: tracks the viewport (like the Luvme reference's 3.2vw
     price) between a rem floor and ceiling, so it still honours browser zoom.
     Used by every ProductCard and the "title below" collection tile. */
  --font-card-title: clamp(0.75rem, 0.66rem + 0.4vw, 0.875rem);     /* 12 -> 14 */
  --font-card-price: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);         /* 14 -> 16 */
  --font-card-compare: clamp(0.6875rem, 0.64rem + 0.2vw, 0.75rem);  /* 11 -> 12 */
  --font-tile-caption: clamp(0.75rem, 0.65rem + 0.45vw, 1rem);      /* 12 -> 16 */
  --card-add-size: clamp(26px, calc(22px + 1.1vw), 34px);            /* quick-view square: 26 -> 34 */

  /* Line heights */
  --leading-display: 1.08;
  --leading-heading: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.6;

  /* Letter spacing */
  --tracking-display: -0.02em;  /* tighten large Playfair */
  --tracking-heading: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.14em;  /* UPPERCASE eyebrows */

  /* ====================================================
     SPACING / RADIUS / LAYOUT
     ==================================================== */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Section vertical rhythm — the default top/bottom padding for full-width
     home/content sections. Merchant-tunable (separate top & bottom) via Theme
     settings → Layout; overridden in theme-styles-variables.liquid. */
  --section-pad-top: var(--space-12);
  --section-pad-bottom: var(--space-12);
  --section-pad-y: var(--section-pad-top); /* legacy single-value alias */

  --radius-xs: 4px;     /* chips, small inputs */
  --radius-sm: 6px;     /* buttons, inputs (brand default) */
  --radius-md: 10px;    /* product cards */
  --radius-lg: 16px;    /* feature panels / dialogs */
  --radius-xl: 24px;
  --radius-pill: 999px; /* badges, pills */
  --radius-circle: 50%;

  --page-max: 1340px;          /* brand container width */
  --page-gutter: 20px;         /* container side padding */
  --content-narrow: 720px;     /* prose measure */
  --page-content: 1120px;      /* content pages (contact, salon, our story): .lh-container--content */
  --header-height: 72px;

  --grid-gap: var(--space-4);
  --grid-gap-lg: var(--space-6);

  /* Card grids on phones (product cards + collection tiles), below 768px.
     Tighter than desktop, and equal both ways: with bordered cards an 8px
     column gap beside a 16px row gap read as lopsided (owner, lh-home-03.png).
     Merchant-tunable in Theme settings -> Layout; from 768px up each grid keeps
     its own spacing. */
  --card-gap-x: 10px;
  --card-gap-y: 10px;

  /* One card-grid gap for every grid of cards (products, collections, services):
     phone = the --card-gap-* setting, tablet = --grid-gap, desktop = --grid-gap-lg.
     Services used to run 16px on phones and desktop alike, so they read looser
     than products on a phone and tighter on desktop (owner, 2026-09-28). */
  --cards-gap-row: var(--card-gap-y);
  --cards-gap-col: var(--card-gap-x);

  /* Heading block -> its content. Fluid 16px (phone) to 32px (desktop), so it
     stays at most half the space between two sections (2 x --section-pad, which
     is itself fluid down to 60%). At a fixed 32px a phone showed 32px under a
     title and only ~38px between sections, and the title stopped reading as
     belonging to its grid (owner, 2026-09-28). */
  --section-head-gap: clamp(var(--space-4), calc(0.6rem + 1.6vw), var(--space-8));

  /* Breakpoints (reference; mirrored in media queries) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --touch-target: 44px;        /* minimum tap target */

  /* ====================================================
     ELEVATION & MOTION
     ==================================================== */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 25, 23, 0.08);   /* card hover */
  --shadow-lg: 0 8px 30px rgba(28, 25, 23, 0.12);
  --shadow-xl: 0 20px 50px rgba(28, 25, 23, 0.16);  /* dialogs */
  --shadow-amber: 0 8px 24px rgba(160, 85, 19, 0.18); /* premium emphasis */
  --shadow-inset: inset 0 1px 2px rgba(28, 25, 23, 0.06);

  --ring-focus: 0 0 0 3px rgba(160, 85, 19, 0.28);

  --scrim-image: linear-gradient(to top, rgba(28, 25, 23, 0.55), transparent 60%);
  --scrim-dark: rgba(28, 25, 23, 0.45);

  /* Editorial tile / overlay gradients (image-overlaid labels) */
  --overlay-tile: linear-gradient(to top,
    rgba(var(--lh-stone-900-rgb), 0.62) 0%,
    rgba(var(--lh-stone-900-rgb), 0.12) 48%,
    rgba(var(--lh-stone-900-rgb), 0) 78%);
  --overlay-tile-hover: linear-gradient(to top,
    rgba(var(--lh-amber-rgb), 0.82) 0%,
    rgba(var(--lh-stone-900-rgb), 0.32) 55%,
    rgba(var(--lh-stone-900-rgb), 0) 88%);

  /* Text shadows for type set over imagery */
  --shadow-text: 0 1px 5px rgba(var(--lh-black-rgb), 0.3);
  --shadow-text-strong: 0 1px 3px rgba(var(--lh-black-rgb), 0.35);

  /* Hairline divider on dark surfaces (footer bottom bar, etc.) */
  --border-on-dark: rgba(var(--lh-stone-50-rgb), 0.16);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  /* Named properties, never `all`: `all` also animates padding/font-size when a
     breakpoint flips and anything a later rule happens to change. `width`, `gap`
     and `border-radius` stay because the carousel dots and section links morph
     them on purpose; `scale` carries the press feedback (base.css). */
  --transition-base:
    color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    border-radius var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard),
    visibility var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    scale var(--duration-fast) var(--ease-out),
    width var(--duration-base) var(--ease-standard),
    gap var(--duration-base) var(--ease-standard),
    text-decoration-color var(--duration-base) var(--ease-standard);
  --transition-fast:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    border-radius var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    visibility var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    scale var(--duration-fast) var(--ease-out),
    width var(--duration-fast) var(--ease-standard),
    gap var(--duration-fast) var(--ease-standard),
    text-decoration-color var(--duration-fast) var(--ease-standard);
  /* Pressed controls shrink a touch — the interface heard the tap. */
  --scale-press: 0.97;
  --transition-transform: transform var(--duration-base) var(--ease-out);
}
@media (min-width: 768px) {
  :root { --cards-gap-row: var(--grid-gap); --cards-gap-col: var(--grid-gap); }
}
@media (min-width: 1024px) {
  :root { --cards-gap-row: var(--grid-gap-lg); --cards-gap-col: var(--grid-gap-lg); }
}