/**
 * Amber Coffee — Design tokens.
 *
 * Amber copper (roasted beans, lamplit Old Town Riga) with an analogous ochre
 * accent and warm stone neutrals. See DESIGN.md.
 */

:root {
	/* Brand — amber copper */
	--color-primary-50:  #fdf6ee;
	--color-primary-100: #f8e6d2;
	--color-primary-200: #efc9a3;
	--color-primary-300: #e3a66f;
	--color-primary-400: #d4863f;
	--color-primary-500: #b96a26;
	--color-primary-600: #9a541c;
	--color-primary-700: #7a4117;
	--color-primary-800: #5b3012;
	--color-primary-900: #3c1f0c;

	/* Accent — ochre */
	--color-accent-300: #f0cf7a;
	--color-accent-400: #e4b544;
	--color-accent-500: #cf9a21;
	--color-accent-600: #a97b16;

	/* Neutrals — warm stone */
	--color-neutral-0:   #ffffff;
	--color-neutral-50:  #faf7f3;
	--color-neutral-100: #f2ece4;
	--color-neutral-200: #e4dbd0;
	--color-neutral-300: #cdc1b2;
	--color-neutral-400: #a99a89;
	--color-neutral-500: #7f7265;
	--color-neutral-600: #5d5349;
	--color-neutral-700: #423a33;
	--color-neutral-800: #2b2520;
	--color-neutral-900: #1a1613;

	/* Semantic surfaces (overridden in dark mode) */
	--color-bg:            var(--color-neutral-50);
	--color-bg-alt:        var(--color-neutral-100);
	--color-surface:       var(--color-neutral-0);
	--color-surface-dark:  var(--color-neutral-900);
	--color-text:          var(--color-neutral-800);
	--color-text-muted:    var(--color-neutral-600);
	--color-text-invert:   var(--color-neutral-50);
	--color-border:        var(--color-neutral-200);
	--color-primary:       var(--color-primary-600);
	--color-primary-hover: var(--color-primary-700);
	--color-on-primary:    #ffffff;

	/* Typography */
	--font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	--text-xs:   0.78rem;
	--text-sm:   0.9rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.35rem;
	--text-2xl:  1.7rem;
	--text-3xl:  2.15rem;
	--text-4xl:  clamp(2.4rem, 6vw, 3.6rem);
	--text-5xl:  clamp(3rem, 8vw, 5rem);

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-bold: 700;
	--weight-black: 800;

	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-normal: 1.65;

	--letter-tight: -0.02em;
	--letter-wide: 0.12em;

	/* Spacing scale */
	--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;
	--space-32: 8rem;
	--space-section: clamp(3.5rem, 8vw, 6.5rem);

	/* Radii */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-full: 999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(26, 22, 19, 0.08);
	--shadow-md: 0 4px 12px rgba(26, 22, 19, 0.10);
	--shadow-lg: 0 12px 28px rgba(26, 22, 19, 0.14);
	--shadow-xl: 0 24px 56px rgba(26, 22, 19, 0.20);

	/* Layout */
	--container-max: 1200px;
	--container-pad: clamp(1.25rem, 5vw, 2.5rem);
	--header-height: 72px;

	/* Motion */
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--duration-slow: 450ms;
	--ease-default: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="dark"] {
	--color-bg:          var(--color-neutral-900);
	--color-bg-alt:      var(--color-neutral-800);
	--color-surface:     var(--color-neutral-800);
	--color-text:        var(--color-neutral-100);
	--color-text-muted:  var(--color-neutral-300);
	--color-text-invert: var(--color-neutral-50);
	--color-border:      var(--color-neutral-700);
	--color-primary:       var(--color-primary-300);
	--color-primary-hover: var(--color-primary-200);
	--color-on-primary:    var(--color-neutral-900);
}