/**
 * LensScape Gallery — Design Tokens
 * Source of truth: Design Brief + Website Questionnaire
 *
 * NOTE ON COLOUR: the Design Brief and the Questionnaire specify slightly
 * different hex values for two tokens (Soft Sand, Muted Seafoam agrees,
 * but the Questionnaire adds "Very Soft Cyan" #B4E6E6 and a darker
 * "Deep Ocean Slate" #2F3E46 not present in the Brief). Per your instruction
 * to follow the documents as source of truth, both palettes are included
 * below as CSS variables so nothing is lost — the theme currently uses the
 * Design Brief values as primary, with the Questionnaire values available
 * as --ls-color-accent-cyan and --ls-color-ocean-deep. Flag this for the
 * client to confirm final palette before launch.
 */

:root {
  /* ---------------------------------------------
     COLOUR — Design Brief (primary/default)
  --------------------------------------------- */
  --ls-color-sand: #FAF8F5;          /* Soft Sand */
  --ls-color-warm-white: #F5F2EE;    /* Warm White */
  --ls-color-ocean-slate: #22343C;   /* Ocean Slate */
  --ls-color-seafoam: #7FA8A6;       /* Muted Seafoam */
  --ls-color-driftwood: #8B8E8A;     /* Driftwood Grey */
  --ls-color-stone: #C7BDB1;         /* Warm Stone */

  /* ---------------------------------------------
     COLOUR — Questionnaire values (confirm w/ client)
  --------------------------------------------- */
  --ls-color-accent-cyan: #B4E6E6;   /* Very Soft Cyan */
  --ls-color-ocean-deep: #2F3E46;    /* Deep Ocean Slate (Questionnaire) */

  /* Semantic aliases used throughout templates */
  --ls-color-bg: var(--ls-color-sand);
  --ls-color-bg-alt: var(--ls-color-warm-white);
  --ls-color-text: var(--ls-color-ocean-slate);
  --ls-color-text-muted: var(--ls-color-driftwood);
  --ls-color-border: var(--ls-color-stone);
  --ls-color-accent: var(--ls-color-seafoam);
  --ls-color-white: #FFFFFF;

  /* ---------------------------------------------
     TYPOGRAPHY
     Brief: Cormorant Garamond (headings) + Inter (body)
     Questionnaire: adds Canela as alt luxury serif option
     and Source Sans Pro as alt body font.
     Primary stack below follows the Brief; alternates
     are available via --ls-font-heading-alt / --ls-font-body-alt.
  --------------------------------------------- */
  --ls-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ls-font-heading-alt: 'Canela', 'Cormorant Garamond', Georgia, serif;
  --ls-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ls-font-body-alt: 'Source Sans Pro', 'Inter', sans-serif;

  --ls-fs-h1: clamp(2.75rem, 6vw, 5.5rem);
  --ls-fs-h2: clamp(2.25rem, 4.5vw, 3.75rem);
  --ls-fs-h3: clamp(1.5rem, 2.5vw, 2.25rem);
  --ls-fs-h4: 1.375rem;
  --ls-fs-lead: 1.25rem;
  --ls-fs-body: 1rem;
  --ls-fs-small: 0.875rem;
  --ls-fs-eyebrow: 0.8125rem;

  --ls-lh-heading: 1.1;
  --ls-lh-body: 1.65;
  --ls-ls-eyebrow: 0.18em; /* letter-spacing for eyebrow labels */

  /* ---------------------------------------------
     SPACING — 8px base scale
  --------------------------------------------- */
  --ls-space-3xs: 0.25rem;
  --ls-space-2xs: 0.5rem;
  --ls-space-xs: 0.75rem;
  --ls-space-sm: 1rem;
  --ls-space-md: 1.5rem;
  --ls-space-lg: 2.5rem;
  --ls-space-xl: 4rem;
  --ls-space-2xl: 6rem;
  --ls-space-3xl: 9rem;
  --ls-space-section: clamp(4rem, 10vw, 9rem);

  /* ---------------------------------------------
     LAYOUT
  --------------------------------------------- */
  --ls-container-max: 1400px;
  --ls-container-narrow: 860px;
  --ls-container-padding: clamp(1.25rem, 4vw, 4rem);
  --ls-radius-sm: 2px;
  --ls-radius-md: 4px;

  /* ---------------------------------------------
     MOTION — "Apple level", no bounce, no flash
  --------------------------------------------- */
  --ls-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ls-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ls-duration-fast: 300ms;
  --ls-duration-base: 600ms;
  --ls-duration-slow: 1000ms;
  --ls-duration-hero-fade: 3000ms; /* client: 3s dissolve between hero images */

  /* ---------------------------------------------
     Z-INDEX SCALE
  --------------------------------------------- */
  --ls-z-header: 100;
  --ls-z-mobile-menu: 200;
  --ls-z-modal: 300;
  --ls-z-toast: 400;
}