/*
 * GLO design tokens. THE ONLY place colours, type, spacing and radii are defined.
 * Component CSS (base/shop/pages/blog/checkout) uses var(--glo-*) only, no raw values,
 * so the skin from the locked design is a change to this file.
 * Values are Option A (Aiden 2026-10-23). Source: designer/deliverables/glo-woo/tokens.css + DESIGN-SYSTEM.md.
 */
:root {
	/* Colour: Option A (Aiden 2026-10-23, Pinterest look). Ratios computed (WCAG 2.x). */
	--glo-ink: #1c1e1b;            /* body text, 15.08:1 on --glo-surface */
	--glo-ink-muted: #5a5d55;      /* secondary text, 6.02:1 on --glo-surface, 5.41:1 on --glo-surface-alt */
	--glo-line: #d8d2bb;           /* borders, dividers (decorative) */
	--glo-surface: #f6f3e4;        /* page background (cream) */
	--glo-surface-alt: #ece7d2;    /* bands, strips */
	--glo-surface-raised: #ffffff; /* cards, inputs, menus on cream */
	--glo-surface-inverse: #1f3a2b;/* footer, top bar (forest) */
	--glo-surface-dark: #1c1e1b;   /* dark feature bands (charcoal) */
	--glo-ink-inverse: #f6f3e4;    /* 11.1:1 on --glo-surface-inverse */
	--glo-ink-inverse-muted: #d8d2bb; /* 8.16:1 on --glo-surface-inverse */
	--glo-accent: #1f3a2b;         /* links, ghost buttons, active states (forest), 11.1:1 on --glo-surface */
	--glo-accent-hover: #2d5440;
	--glo-accent-ink: #f6f3e4;     /* text on --glo-accent */
	--glo-cta: #7a9a1e;            /* primary buttons (olive). Charcoal text only: white fails */
	--glo-cta-hover: #93b52c;      /* lighter on hover: 7.1:1 with --glo-cta-ink (darker olive fails) */
	--glo-cta-ink: #1c1e1b;        /* 5.17:1 on --glo-cta */
	--glo-highlight: #e8651a;      /* orange, decorative only (rules, icons), never text */
	--glo-badge: #c4500f;          /* badge bg, white text 4.67:1 */
	--glo-badge-ink: #ffffff;
	--glo-sale: #b3261e;           /* sale price text 5.87:1 on --glo-surface; errors */
	--glo-success: #1d7340;
	--glo-focus: #1f6feb;          /* focus ring, 4.16:1 on --glo-surface */
	--glo-backdrop: rgb(0 0 0 / 45%);   /* drawer overlay */
	--glo-line-inverse: rgb(246 243 228 / 14%); /* dividers on --glo-surface-inverse */

	/* Type */
	--glo-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--glo-font-display: "Oswald", "Arial Narrow", sans-serif; /* condensed caps headlines */
	--glo-fs-xs: 0.75rem;
	--glo-fs-sm: 0.875rem;
	--glo-fs-base: 1rem;
	--glo-fs-md: 1.125rem;
	--glo-fs-lg: 1.375rem;
	--glo-fs-xl: 1.75rem;
	--glo-fs-2xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
	--glo-fs-3xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
	--glo-lh-tight: 1.2;
	--glo-lh: 1.55;
	--glo-fw-regular: 400;
	--glo-fw-medium: 500;
	--glo-fw-bold: 700;

	/* Space (4px grid) */
	--glo-space-1: 0.25rem;
	--glo-space-2: 0.5rem;
	--glo-space-3: 0.75rem;
	--glo-space-4: 1rem;
	--glo-space-5: 1.5rem;
	--glo-space-6: 2rem;
	--glo-space-7: 3rem;
	--glo-space-8: 4rem;

	/* Shape + depth */
	--glo-radius-sm: 4px;
	--glo-radius: 8px;
	--glo-radius-lg: 14px;          /* cards */
	--glo-radius-pill: 999px;
	--glo-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 12px rgb(16 24 40 / 8%);
	--glo-shadow-lg: 0 12px 32px rgb(16 24 40 / 16%);

	/* Layout */
	--glo-wrap: 1360px;
	--glo-gutter: 16px;
	--glo-header-z: 50;
	--glo-drawer-z: 100;
	--glo-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
	:root { --glo-gutter: 24px; }
}
@media (min-width: 1024px) {
	:root { --glo-gutter: 32px; }
}