/*
 * Canopath — Design Tokens
 * Single source of truth for color, type, spacing, radii, shadows.
 * Imported first; all other CSS files reference these custom properties.
 */

:root {
	/* ----- Color: brand ----- */
	/* Deep teal — primary, used for nav, primary buttons, links */
	--cn-teal-50:  #effaf9;
	--cn-teal-100: #d6f1ef;
	--cn-teal-200: #aae0db;
	--cn-teal-300: #76c8c0;
	--cn-teal-400: #45a89f;
	--cn-teal-500: #2a8a82;
	--cn-teal-600: #1f6e69;   /* primary brand */
	--cn-teal-700: #1b5854;
	--cn-teal-800: #194745;
	--cn-teal-900: #173b3a;

	/* Warm coral — accent, used for highlights, secondary actions, illustration */
	--cn-coral-50:  #fff4ef;
	--cn-coral-100: #ffe5d9;
	--cn-coral-200: #ffc4ad;
	--cn-coral-300: #ff9c75;
	--cn-coral-400: #ff7a4d;
	--cn-coral-500: #ff5e2c;   /* accent brand */
	--cn-coral-600: #e64512;
	--cn-coral-700: #b8350e;
	--cn-coral-800: #8d2a0e;

	/* Cream + neutrals */
	--cn-cream:    #faf6ef;    /* page background */
	--cn-paper:    #ffffff;    /* card surfaces */
	--cn-ink-50:   #f5f3f0;
	--cn-ink-100:  #e8e3dc;
	--cn-ink-200:  #c9c2b8;
	--cn-ink-300:  #9c9489;
	--cn-ink-400:  #6b6359;
	--cn-ink-500:  #423d36;
	--cn-ink-600:  #2c2924;
	--cn-ink-700:  #1c1a17;    /* body text */
	--cn-ink-800:  #100f0d;    /* headlines */

	/* Semantic */
	--cn-success: #1f6e69;
	--cn-warning: #b8740d;
	--cn-danger:  #b8350e;
	--cn-info:    var(--cn-teal-500);

	/* ----- Typography ----- */
	--cn-font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
	--cn-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--cn-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

	/* Type scale — fluid, mobile-first */
	--cn-text-xs:   0.75rem;   /* 12 */
	--cn-text-sm:   0.875rem;  /* 14 */
	--cn-text-base: 1rem;      /* 16 (never below — iOS auto-zoom guard) */
	--cn-text-lg:   1.125rem;  /* 18 */
	--cn-text-xl:   1.25rem;   /* 20 */
	--cn-text-2xl:  clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem); /* 22→26 */
	--cn-text-3xl:  clamp(1.625rem, 1.4rem + 1vw, 2rem);       /* 26→32 */
	--cn-text-4xl:  clamp(2rem, 1.6rem + 1.6vw, 2.75rem);      /* 32→44 */
	--cn-text-5xl:  clamp(2.5rem, 1.8rem + 2.8vw, 4rem);       /* 40→64 */
	--cn-text-6xl:  clamp(3rem, 2rem + 4vw, 5.5rem);           /* 48→88 — display only */

	--cn-leading-tight:   1.15;
	--cn-leading-snug:    1.3;
	--cn-leading-normal:  1.55;
	--cn-leading-relaxed: 1.7;

	/* ----- Spacing — 4px base ----- */
	--cn-space-1:  0.25rem;
	--cn-space-2:  0.5rem;
	--cn-space-3:  0.75rem;
	--cn-space-4:  1rem;
	--cn-space-5:  1.25rem;
	--cn-space-6:  1.5rem;
	--cn-space-8:  2rem;
	--cn-space-10: 2.5rem;
	--cn-space-12: 3rem;
	--cn-space-16: 4rem;
	--cn-space-20: 5rem;
	--cn-space-24: 6rem;
	--cn-space-32: 8rem;

	/* ----- Layout ----- */
	--cn-container-max:  1180px;
	--cn-container-narrow: 720px;
	--cn-gutter-mobile:  1rem;
	--cn-gutter-desktop: 1.5rem;

	/* ----- Radii ----- */
	--cn-radius-sm:    6px;
	--cn-radius-md:    12px;
	--cn-radius-lg:    20px;
	--cn-radius-xl:    32px;
	--cn-radius-pill:  9999px;

	/* ----- Shadows — subtle, layered ----- */
	--cn-shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.04);
	--cn-shadow-sm: 0 1px 3px rgba(28, 26, 23, 0.06), 0 1px 2px rgba(28, 26, 23, 0.04);
	--cn-shadow-md: 0 4px 12px rgba(28, 26, 23, 0.06), 0 2px 4px rgba(28, 26, 23, 0.04);
	--cn-shadow-lg: 0 12px 32px rgba(28, 26, 23, 0.08), 0 4px 8px rgba(28, 26, 23, 0.04);

	/* ----- Motion ----- */
	--cn-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--cn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--cn-dur-fast:    160ms;
	--cn-dur-base:    240ms;
	--cn-dur-slow:    420ms;

	/* ----- Z-index layers ----- */
	--cn-z-base:    1;
	--cn-z-dropdown: 50;
	--cn-z-sticky:   100;
	--cn-z-overlay:  200;
	--cn-z-modal:    300;
	--cn-z-toast:    400;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
	}
}