/**
 * ZenTea Manor Design Tokens
 * 3-layer token spine: primitive -> semantic -> component
 * Generated from Phase 3.1 specification.
 */

:root {
	/* ========== PRIMITIVES ========== */

	/* Neutral ramp - rice paper / xuan zhi */
	--gray-50:  oklch(0.98 0.004 80);
	--gray-100: oklch(0.95 0.006 80);
	--gray-200: oklch(0.90 0.008 80);
	--gray-300: oklch(0.84 0.010 75);
	--gray-400: oklch(0.72 0.012 70);
	--gray-500: oklch(0.60 0.014 65);
	--gray-600: oklch(0.48 0.014 60);
	--gray-700: oklch(0.38 0.013 55);
	--gray-800: oklch(0.28 0.012 50);
	--gray-900: oklch(0.20 0.010 45);
	--gray-950: oklch(0.14 0.008 40);

	/* Accent ramp - ink green */
	--accent-50:  oklch(0.96 0.015 155);
	--accent-100: oklch(0.92 0.030 155);
	--accent-200: oklch(0.85 0.050 155);
	--accent-300: oklch(0.75 0.070 155);
	--accent-400: oklch(0.65 0.080 155);
	--accent-500: oklch(0.55 0.085 155);
	--accent-600: oklch(0.47 0.080 155);
	--accent-700: oklch(0.39 0.070 155);
	--accent-800: oklch(0.30 0.055 155);
	--accent-900: oklch(0.23 0.040 155);

	/* Earth tones - tea brown (secondary accent) */
	--earth-500: oklch(0.62 0.070 55);
	--earth-600: oklch(0.54 0.070 55);
	--earth-700: oklch(0.45 0.065 55);

	/* Status */
	--success: oklch(0.62 0.120 155);
	--warning: oklch(0.75 0.130 85);
	--error:   oklch(0.58 0.180 25);
	--info:    oklch(0.65 0.080 235);

	/* Spacing */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;

	/* Type scale */
	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 16px;
	--text-lg: 20px;
	--text-xl: 24px;
	--text-2xl: 32px;
	--text-3xl: 48px;
	--text-4xl: 64px;
	--text-5xl: 72px;

	/* Radii */
	--radius-none: 0;
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-focus: 0 0 0 3px oklch(0.55 0.085 155 / 0.3);

	/* Motion */
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--duration-slow: 400ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	/* Z-index */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal: 400;
	--z-toast: 500;

	/* ========== SEMANTICS ========== */

	/* Surface stack */
	--surface-canvas: var(--gray-50);
	--surface-raised: #ffffff;
	--surface-sunken: var(--gray-100);
	--surface-overlay: rgba(0, 0, 0, 0.5);
	--surface-inverse: var(--gray-900);

	/* Text roles */
	--text-primary: var(--gray-900);
	--text-secondary: var(--gray-600);
	--text-tertiary: var(--gray-400);
	--text-inverse: var(--gray-50);
	--text-link: var(--accent-600);

	/* Border roles */
	--border-default: var(--gray-200);
	--border-strong: var(--gray-300);
	--border-accent: var(--accent-300);

	/* Accent roles */
	--accent-bg: var(--accent-500);
	--accent-bg-hover: var(--accent-600);
	--accent-text: var(--accent-700);
	--accent-tint: oklch(0.55 0.085 155 / 0.08);

	/* Status roles */
	--status-success: var(--success);
	--status-warning: var(--warning);
	--status-error: var(--error);
	--status-info: var(--info);

	/* ========== COMPONENTS ========== */

	/* Button */
	--btn-primary-bg: var(--accent-bg);
	--btn-primary-text: var(--text-inverse);
	--btn-primary-hover: var(--accent-bg-hover);
	--btn-secondary-bg: transparent;
	--btn-secondary-text: var(--text-primary);
	--btn-secondary-border: var(--border-strong);

	/* Card */
	--card-bg: var(--surface-raised);
	--card-border: var(--border-default);
	--card-radius: var(--radius-md);
	--card-shadow: var(--shadow-sm);
	--card-hover-shadow: var(--shadow-md);

	/* Price */
	--price-currency: "HK$";
	--price-text: var(--earth-700);
	--price-text-large: var(--text-2xl);
	--price-text-weight: 600;

	/* Input */
	--input-bg: var(--surface-raised);
	--input-border: var(--border-default);
	--input-focus: var(--shadow-focus);
	--input-radius: var(--radius-sm);

	/* Tag */
	--tag-bg: var(--accent-tint);
	--tag-text: var(--accent-text);
	--tag-radius: var(--radius-full);
}