/**
 * Design tokens
 * Single source of truth for the Thyme visual language (Style Guide v1.0).
 * Raw brand values are defined once, then mapped to semantic tokens that
 * components consume. Only change the semantic layer when re-theming.
 */

:root {
	/* --- Brand palette (Style Guide 01) --- */
	/* Neutral greys, not green — kept the "forest"/"sage" names so every
	   token reference below still reads, but the hues themselves are gone. */
	--forest: #2b2b2b; /* primary brand colour */
	--sage: #e0e0e0;   /* subtle backgrounds, secondary elements */
	--ivory: #fffdf5;  /* main background */
	--clay: #b62013;   /* accents, sale tags, highlights */

	/* Tints and shades derived from the palette */
	--forest-dark: #202020;
	--forest-soft: rgba(30, 30, 30, 0.08);
	--sage-light: #eeeeee;
	--sage-dark: #bdbdbd;
	--clay-dark: #8e1810;
	--clay-soft: rgba(182, 32, 19, 0.08);
	--ink: #1f1f1f;
	--ink-dark: #101010;
	--ink-muted: #606060;

	/* --- Semantic colours --- */
	--color-primary: var(--forest);
	--color-primary-hover: var(--forest-dark);
	--color-accent: var(--clay);
	--color-accent-hover: var(--clay-dark);
	--color-danger: var(--clay);

	--color-background: #ffffff;;
	--color-surface: #ffffff;
	--color-surface-muted: var(--sage-light);
	--color-surface-strong: var(--sage);
	--color-surface-inverse: var(--forest);

	--color-border: #dcdbd0;
	--color-border-muted: #e8e7dd;
	--color-border-strong: var(--forest);

	--color-heading: #000000;
	--color-text: var(--ink);
	--color-muted: var(--ink-muted);
	--color-inverse: var(--ivory);

	/* --- Typography (Style Guide 02) --- */
	/* Overused Grotesk: Semibold for headings/nav/labels, Medium for body. */
	--font-sans: "Overused Grotesk", "Helvetica Neue", Arial, sans-serif;
	/* Geist Mono: prices, product codes, metadata and highlights. */
	--font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Courier New", monospace;

	--font-heading: var(--font-sans);
	--font-body: var(--font-sans);

	--weight-medium: 500;
	--weight-semibold: 600;

	--text-2xs: 0.6875rem; /* 11 */
	--text-xs: 0.75rem;    /* 12 */
	--text-sm: 0.875rem;   /* 14 */
	--text-md: 1rem;       /* 16 */
	--text-lg: 1.125rem;   /* 18 */
	--text-xl: 1.375rem;   /* 22 */
	--text-2xl: 1.75rem;   /* 28 */
	--text-3xl: 2.25rem;   /* 36 */
	--text-4xl: 3rem;      /* 48 */
	--text-5xl: 4rem;      /* 64 */

	--line-tight: 1.1;
	--line-snug: 1.3;
	--line-normal: 1.55;
	--line-relaxed: 1.75;

	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.06em;
	--tracking-wider: 0.12em; /* uppercase mono labels */

	/* --- Spacing scale --- */
	--space-1: 0.25rem;  /* 4 */
	--space-2: 0.5rem;   /* 8 */
	--space-3: 0.75rem;  /* 12 */
	--space-4: 1rem;     /* 16 */
	--space-5: 1.25rem;  /* 20 */
	--space-6: 1.5rem;   /* 24 */
	--space-8: 2rem;     /* 32 */
	--space-10: 2.5rem;  /* 40 */
	--space-12: 3rem;    /* 48 */
	--space-16: 4rem;    /* 64 */
	--space-24: 6rem;    /* 96 */

	/* --- Borders --- */
	/* The visual language is flat and square: corners stay at 0. */
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-full: 999px;

	--border-width: 1px;
	--border-width-strong: 2px;

	/* --- Control sizing --- */
	--control-height-sm: 2.25rem; /* 36 */
	--control-height: 3rem;       /* 48 */
	--control-height-lg: 3.5rem;  /* 56 */

	/* --- Motion --- */
	--transition-fast: 120ms ease;
	--transition: 200ms ease;

	/* --- Focus --- */
	--focus-ring: 0 0 0 3px var(--forest-soft);

	/* --- Containers --- */
	--container-sm: 36rem;
	--container-md: 48rem;
	--container-lg: 64rem;
	--container-xl: 75rem;
	--container-2xl: 90rem;
}