/*
 * Vellren design tokens: the ONLY file where raw colour / size / timing values may appear.
 * Source of truth: docs/VELLREN-MASTER-PLAN.md Part A (§3 colour, §4 type, §5 layout, §6 Stitch, §7.2 motion).
 *
 * Three layers:
 *   1. Primitive  (--v-{material})       raw brand values. Never used directly by components.
 *   2. Semantic   (--v-{role})           what a value is for. Components use these.
 *   3. Component  (--v-{component}-*)    per-component decisions built from semantic tokens.
 *
 * Dark sections: add the class `v-dark` to any section. It remaps the SEMANTIC layer only,
 * so every component inside switches automatically and Hide brown can never land on Ink.
 */

/* ---------------------------------------------------------------- 1. Primitive */
:root {
	/* Colour (§3). Warm neutrals are tints mixed from Hide, not borrowed beige. */
	--v-hide: #502e1f;
	--v-hide-deep: #3a2016;
	--v-ink: #121110;
	--v-ink-raised: #1e1c1b;      /* dark-section alternate surface */
	--v-ink-line: #3a3634;        /* dark-section decorative divider (1.58:1, decorative only) */
	--v-graphite: #5a5552;
	--v-paper: #ffffff;
	--v-chalk: #f6f5f4;           /* 5% Hide on Paper */
	--v-sand: #eae6e4;            /* 12% Hide on Paper */
	--v-line: #e0d9d7;            /* 18% Hide on Paper, decorative only */
	--v-muted: #9f8c84;           /* 3.20:1 on Paper: non-text UI only on light; 5.89:1 on Ink */
	--v-success: #2f6b3f;
	--v-error: #b3261e;
	--v-error-on-dark: #ff9b8f;   /* 9.28:1 on Ink, 8.36:1 on Ink raised */
	/* Footer newsletter band (v1.47, owner): Hide Deep mixed into Ink, laid over the band photo.
	   A tint of Hide, never a new brown; Worst case (a white sky under it): Paper 9.1:1, Sand 7.3:1. */
	--v-news-tint: #2a1811;
	--v-news-tint-opacity: 0.86;

	/* Font families (§4) */
	--v-font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, "Times New Roman", serif;
	--v-font-body: "Manrope", "Manrope Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Type scale (§4) */
	--v-text-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
	--v-text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	--v-text-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	--v-text-h3: clamp(1.75rem, 1.55rem + 0.5vw, 2rem);   /* 28-32px: the display face never below 28px */
	--v-text-h4: 1.125rem;
	--v-text-body: 1rem;
	--v-text-body-lg: 1.125rem;
	--v-text-ui: 0.9375rem;
	--v-text-small: 0.875rem;
	--v-text-label: 0.75rem;
	--v-text-price: 1.25rem;

	--v-weight-regular: 400;
	--v-weight-medium: 500;
	--v-weight-semibold: 600;
	--v-weight-bold: 700;

	--v-lh-display: 1.02;
	--v-lh-h1: 1.05;
	--v-lh-heading: 1.1;
	--v-lh-h3: 1.15;
	--v-lh-ui: 1.3;
	--v-lh-body: 1.6;
	--v-lh-long: 1.7;

	--v-track-display: -0.02em;
	--v-track-h1: -0.015em;
	--v-track-h2: -0.01em;
	--v-track-ui: 0.02em;
	--v-track-label: 0.12em;
	--v-measure: 68ch;

	/* Spacing (§5): 4px base, 13 steps, no other values */
	--v-space-1: 0.25rem;   /* 4 */
	--v-space-2: 0.5rem;    /* 8 */
	--v-space-3: 0.75rem;   /* 12 */
	--v-space-4: 1rem;      /* 16 */
	--v-space-5: 1.5rem;    /* 24 */
	--v-space-6: 2rem;      /* 32 */
	--v-space-7: 2.5rem;    /* 40 */
	--v-space-8: 3rem;      /* 48 */
	--v-space-9: 4rem;      /* 64 */
	--v-space-10: 5rem;     /* 80 */
	--v-space-11: 6rem;     /* 96 */
	--v-space-12: 8rem;     /* 128 */
	--v-space-13: 10rem;    /* 160 */

	/* Layout (§5) */
	--v-container: 1320px;
	--v-phi: 1.618;               /* golden ratio: splits, mosaic, stack */
	--v-phi-minor: 0.382;         /* 1 - 1/φ */
	--v-header-h: 64px;           /* 72px from 1024px (§11.0: 64-72) */
	--v-logo-h: 28px;             /* horizontal lockup height (~120px wide, the brand minimum) */
	--v-control-h: 48px;
	--v-control-h-lg: 52px;
	--v-hit-min: 44px;
	--v-radius: 0;
	--v-radius-round: 999px;   /* colour swatches only */
	--v-shadow-overlay: 0 24px 60px rgb(18 17 16 / 0.18);

	/* The Stitch (§6) */
	--v-stitch-width: 1.5px;
	--v-stitch-dash: 6px;
	--v-stitch-gap: 4px;
	--v-thumb-w: 72px;            /* product page thumbnail rail (§11.3.2 v1.49) */
	--v-stage-zoom: 2;            /* product page stage: hover zoom (fine pointer) */
	--v-step-mark: 32px;          /* stage marker on a progress Stitch, holds a 20px icon (§6 v1.58) */
	--v-step-icon: 20px;
	--v-film-badge: 128px;        /* film play badge: mark + label on a circle (§8 v1.54) */
	/* Scissors on the Stitch (§6, §7.1 v1.25): Phosphor Light's scissors redrawn as two blades
	   that pivot on one screw, so they can open and shut. */
	--v-scissors: 32px;           /* 12-unit Phosphor Light stroke at 32 px = the 1.5 px Stitch */
	--v-scissors-sm: 20px;        /* inside a busy button */
	--v-scissors-screw: 0.53125;  /* the screw sits at x 136 of the 256 view box, on the line */
	--v-snip-open: 20deg;         /* each blade, away from the line */
	--v-snip-shut: 3deg;          /* at rest the jaws stay a hair apart, so the Stitch runs between them */
	--v-dur-snip: 300ms;          /* one open-shut; the busy line feeds one stitch (dash + gap) per snip */

	/* Motion (§7.2) */
	--v-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--v-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--v-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--v-dur-press: 120ms;
	--v-dur-hover: 240ms;
	--v-dur-ui: 280ms;
	--v-dur-drawer-in: 420ms;
	--v-dur-drawer-out: 260ms;
	--v-dur-reveal: 700ms;
	--v-dur-image: 900ms;
	--v-dur-swap: 400ms;
	--v-dur-chapter: 600ms;       /* hero chapter photo cut (§7.1 v1.55) */
	--v-dur-stage: 200ms;         /* product page stage photo crossfade (§7.1 v1.49) */
	--v-dur-zoom: 600ms;
	--v-dur-settle: 1200ms;
	--v-dur-fill-out: 200ms;      /* button hover fill leaves faster than it arrives (§7.1) */
	--v-dur-panel-out: 160ms;     /* Jackets panel closes faster than it opens (§7.1) */
	--v-dur-bar-out: 200ms;       /* consent bar leaves faster than it arrives (§7.1 v1.40) */
	--v-stagger: 70ms;
	--v-stagger-lines: 80ms;
	--v-stagger-cards: 60ms;
	--v-stagger-drawer: 40ms;     /* cart drawer lines on open (§7.1) */
	--v-lift: 24px;
	--v-lift-sm: 8px;             /* small lift for UI content inside drawers (§7.1) */
	--v-zoom: 1.04;
	--v-inspect-lens: 6rem;       /* inspection-table fine-pointer magnifier (§7.1 v1.63) */
	--v-inspect-lens-zoom: 1.7;
	--v-inspect-ticket-turn: -1deg;
	--v-clip-settle: 1.08;        /* image scale inside the clip reveal, settles to 1 */
	--v-parallax: 20px;           /* ±drift of the one parallax band per page */

	/* Layering: the only z-index values allowed */
	--v-z-header: 100;
	--v-z-drawer: 300;
	--v-z-modal: 400;
	--v-z-toast: 500;
}

/* Responsive layout primitives (§5) */
:root {
	--v-gutter: 16px;
	--v-gap: 16px;
	--v-section-y: var(--v-space-9);
}
@media (min-width: 768px) {
	:root { --v-gutter: 24px; --v-gap: 20px; --v-section-y: var(--v-space-10); }
}
@media (min-width: 1024px) {
	:root { --v-gutter: 40px; --v-gap: 24px; --v-section-y: var(--v-space-11); --v-text-body: 1.0625rem; --v-header-h: 72px; }
}
@media (min-width: 1440px) {
	:root { --v-gutter: 64px; --v-section-y: var(--v-space-12); }
}

/* ---------------------------------------------------------------- 2. Semantic (light, default) */
:root,
.v-light {
	--v-surface: var(--v-paper);
	--v-surface-alt: var(--v-chalk);
	--v-surface-sunken: var(--v-sand);
	--v-text: var(--v-ink);
	--v-text-muted: var(--v-graphite);
	--v-heading: var(--v-ink);
	--v-action: var(--v-hide);
	--v-action-hover: var(--v-hide-deep);
	--v-action-text: var(--v-paper);
	--v-action-secondary: var(--v-ink);
	--v-link: var(--v-hide);
	--v-link-hover: var(--v-hide-deep);
	--v-border: var(--v-line);
	--v-border-strong: var(--v-ink);
	--v-border-input: var(--v-muted);
	--v-focus: var(--v-hide);
	--v-focus-offset: var(--v-paper);
	--v-stitch: var(--v-hide);
	--v-positive: var(--v-success);
	--v-negative: var(--v-error);
	--v-selection-bg: var(--v-hide);
	--v-selection-text: var(--v-paper);
	--v-disabled-bg: var(--v-sand);
	--v-disabled-text: var(--v-graphite);
	--v-placeholder: var(--v-sand);
}

/* Dark sections (§3: Hide is never used on Ink; actions become Paper) */
.v-dark {
	--v-surface: var(--v-ink);
	--v-surface-alt: var(--v-ink-raised);
	--v-surface-sunken: var(--v-ink-raised);
	--v-text: var(--v-paper);
	--v-text-muted: var(--v-muted);
	--v-heading: var(--v-paper);
	--v-action: var(--v-paper);
	--v-action-hover: var(--v-sand);
	--v-action-text: var(--v-ink);
	--v-action-secondary: var(--v-paper);
	--v-link: var(--v-paper);
	--v-link-hover: var(--v-sand);
	--v-border: var(--v-ink-line);
	--v-border-strong: var(--v-paper);
	--v-border-input: var(--v-muted);
	--v-focus: var(--v-paper);
	--v-focus-offset: var(--v-ink);
	--v-stitch: var(--v-paper);
	--v-negative: var(--v-error-on-dark);
	--v-selection-bg: var(--v-paper);
	--v-selection-text: var(--v-ink);
	--v-disabled-bg: var(--v-ink-raised);
	--v-disabled-text: var(--v-muted);
	--v-placeholder: var(--v-ink-raised);
	background-color: var(--v-surface);
	color: var(--v-text);
}

/* ---------------------------------------------------------------- 3. Component */
:root,
.v-light,
.v-dark {
	/* Buttons (§8) */
	--v-btn-h: var(--v-control-h);
	--v-btn-px: var(--v-space-6);
	--v-btn-primary-bg: var(--v-action);
	--v-btn-primary-bg-hover: var(--v-action-hover);
	--v-btn-primary-text: var(--v-action-text);
	--v-btn-secondary-border: var(--v-action-secondary);
	--v-btn-secondary-text: var(--v-action-secondary);
	--v-btn-press-scale: 0.97;

	/* Form fields */
	--v-field-h: var(--v-control-h);
	--v-field-bg: var(--v-surface);
	--v-field-border: var(--v-border-input);
	--v-field-border-focus: var(--v-focus);
	--v-field-text: var(--v-text);
	--v-field-help: var(--v-text-muted);
	--v-field-error: var(--v-negative);

	/* Size pill */
	--v-pill-size: var(--v-control-h);
	--v-pill-border: var(--v-border-input);
	--v-pill-selected-bg: var(--v-action);
	--v-pill-selected-text: var(--v-action-text);

	/* Product card */
	--v-card-ratio: 4 / 5;
	--v-card-gap: var(--v-space-3);
	--v-card-image-bg: var(--v-placeholder);

	/* Component geometry */
	--v-check-size: 20px;
	--v-check-mark: 14px;
	--v-swatch-size: 32px;
	--v-dot-size: 12px;
	--v-caret-size: 16px;
	--v-accordion-icon: 14px;
	--v-drawer-w: 440px;
	--v-modal-w: 640px;
	--v-lightbox-img-max: 1600px; /* full-screen gallery viewer: largest drawn photo width */
	--v-modal-max-h: 800px;
	--v-toast-w: 440px;
	--v-panel-feature-w: 280px;   /* Jackets panel image */
	--v-bag-count: 18px;          /* bag count badge */
	--v-line-thumb: 96px;         /* bag line photo (4:5), drawer and phones */
	--v-line-thumb-lg: 128px;     /* bag line photo on the bag page from 768px */
	--v-order-thumb: 64px;        /* checkout order summary photo (4:5) */
	--v-trust-min: 220px;
	--v-hairline: 1px;
	--v-hairline-strong: 2px;
	--v-scrim: rgb(18 17 16 / 0.45);
	--v-film-backdrop: rgb(18 17 16 / 0.94);   /* making-of film modal (§8 v1.52) */
	--v-scrim-none: rgb(18 17 16 / 0);
	--v-inset-edge: rgb(18 17 16 / 0.15);
	--v-dur-stitch-run: 600ms;

	/* Sticky story (§7.1, §11.1 #7) */
	--v-story-step-min: 70vh;     /* scroll distance per step */
	--v-dur-skeleton: 1400ms;

	/* Focus ring */
	--v-focus-ring: 0 0 0 2px var(--v-focus-offset), 0 0 0 4px var(--v-focus);
}