/**
 * Design Tokens — indranil-theme
 *
 * All brand design tokens as CSS custom properties. This file defines the single
 * source of truth for colors, typography, spacing, layout, shadows, and transitions
 * used across the theme. No actual styles belong here — only :root definitions.
 *
 * Referenced by every other CSS file in the theme. Enqueue first in the stylesheet
 * loading order (see inc/enqueue.php).
 *
 * Brand system defined in docs/brand-guidelines.md
 */

:root {

	/* ----------------------------------------
	 * Core Brand Colors
	 * ---------------------------------------- */
	--color-yellow: #FFE001;
	--color-yellow-light: #FFF4B0;
	--color-yellow-hover: #E6CA01;
	--color-yellow-dark: #BFA501;
	--color-yellow-deep: #8C7901;
	--color-black: #323232;
	--color-white: #FFFFFF;

	/* ----------------------------------------
	 * Neutral Scale
	 * ---------------------------------------- */
	--color-gray-50: #FAFAF8;
	--color-gray-100: #F3F2EE;
	--color-gray-200: #E5E4E0;
	--color-gray-300: #C8C7C3;
	--color-gray-400: #9B9A97;
	--color-gray-500: #6E6D6A;
	--color-gray-600: #4A4A47;
	--color-gray-700: #323232;
	--color-gray-900: #1A1A1A;

	/* ----------------------------------------
	 * Semantic Colors
	 * ---------------------------------------- */
	--color-success: #2D8A4E;
	--color-error: #D64045;
	--color-warning: #E6A817;
	--color-info: #4A6FA5;

	/* ----------------------------------------
	 * Typography — Font Families
	 * ---------------------------------------- */
	--font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

	/* ----------------------------------------
	 * Typography — Type Scale (1.25 ratio, 16px base)
	 * ---------------------------------------- */
	--text-xs: 0.75rem;       /* 12px */
	--text-sm: 0.875rem;      /* 14px */
	--text-base: 1rem;        /* 16px */
	--text-lg: 1.125rem;      /* 18px */
	--text-xl: 1.25rem;       /* 20px */
	--text-2xl: 1.5rem;       /* 24px */
	--text-3xl: 1.75rem;      /* 28px */
	--text-4xl: 2.25rem;      /* 36px */
	--text-5xl: 3rem;         /* 48px */
	--text-6xl: 3.5rem;       /* 56px */
	--text-7xl: 4.5rem;       /* 72px */

	/* ----------------------------------------
	 * Typography — Font Weights
	 * ---------------------------------------- */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* ----------------------------------------
	 * Typography — Line Heights
	 * ---------------------------------------- */
	--leading-tighter: 1.05;
	--leading-tight: 1.1;
	--leading-snug: 1.2;
	--leading-normal: 1.3;
	--leading-relaxed: 1.6;
	--leading-loose: 1.7;

	/* ----------------------------------------
	 * Spacing (4px grid)
	 * ---------------------------------------- */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 96px;
	--space-5xl: 128px;

	/* ----------------------------------------
	 * Layout
	 * ---------------------------------------- */
	--max-width: 1200px;
	--max-text-width: 680px;

	/* ----------------------------------------
	 * Border Radius
	 * ---------------------------------------- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;

	/* ----------------------------------------
	 * Shadows
	 * ---------------------------------------- */
	--shadow-sm: 0 1px 3px rgba(50, 50, 50, 0.08);
	--shadow-md: 0 4px 12px rgba(50, 50, 50, 0.10);
	--shadow-lg: 0 8px 24px rgba(50, 50, 50, 0.14);
	--shadow-xl: 0 12px 40px rgba(50, 50, 50, 0.18);

	/* ----------------------------------------
	 * Transitions
	 * ---------------------------------------- */
	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 300ms ease;
	--transition-smooth: 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}