/**
 * Core Design Tokens
 * ============================================================================
 * Generic, reusable design tokens that could be used across multiple themes.
 * These tokens define the fundamental scales for typography, spacing, layout,
 * and visual effects.
 *
 * Load order: Layer 2a (first token file)
 * Dependencies: None
 *
 * Separated from 00-tokens-ssa.css to enable future base theme extraction.
 */

:root {
	/* ==========================================================================
	   1. Typography Scale (using rem for better accessibility)
	   ========================================================================== */

	/* Font Families */
	--font-body: "Archivo", sans-serif;
	--font-heading: "Archivo", sans-serif;

	/* Font Sizes - using a modular scale (1.25 ratio) */
	--text-xs: 0.64rem;     /* 10.24px */
	--text-sm: 0.8rem;      /* 12.8px */
	--text-base: 1rem;      /* 16px */
	--text-lg: 1.25rem;     /* 20px */
	--text-xl: 1.563rem;    /* 25px */
	--text-2xl: 1.953rem;   /* 31.25px */
	--text-3xl: 2.441rem;   /* 39px */
	--text-4xl: 3.052rem;   /* 48.8px */
	--text-5xl: 3.815rem;   /* 61px */

	/* Font Weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-black: 900;

	/* Line Heights */
	--leading-none: 1;
	--leading-tight: 1.2;
	--leading-normal: 1.5;
	--leading-relaxed: 1.75;
	--leading-loose: 2;

	/* Letter Spacing */
	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.02em;
	--tracking-wider: 0.04em;

	/* ==========================================================================
	   2. Spacing Scale (8px base)
	   ========================================================================== */

	--space-0: 0;
	--space-1: 0.25rem;    /* 4px */
	--space-2: 0.5rem;     /* 8px */
	--space-3: 0.75rem;    /* 12px */
	--space-4: 1rem;       /* 16px */
	--space-5: 1.25rem;    /* 20px */
	--space-6: 1.5rem;     /* 24px */
	--space-7: 2rem;       /* 32px */
	--space-8: 2.5rem;     /* 40px */
	--space-9: 3rem;       /* 48px */
	--space-10: 4rem;      /* 64px */
	--space-11: 5rem;      /* 80px */
	--space-12: 6rem;      /* 96px */
	--space-16: 8rem;      /* 128px */
	--space-20: 10rem;     /* 160px */

	/* ==========================================================================
	   3. Breakpoints (for reference in comments and JS)
	   ========================================================================== */

	/* Legacy breakpoints (for backward compatibility): */
	--bp-mobile: 480px;
	--bp-tablet: 768px;
	--bp-desktop: 1024px;
	--bp-wide: 1280px;

	/* Extended Tailwind v4 aligned breakpoints (new standard) */
	--bp-xsm: 480px;   /* Extra small devices (phones portrait) */
	--bp-sm: 640px;    /* Small devices (phones landscape) */
	--bp-md: 768px;    /* Medium devices/tablets */
	--bp-lg: 1024px;   /* Large devices/small desktops */
	--bp-xl: 1280px;   /* Extra large devices */
	--bp-2xl: 1536px;  /* 2X large screens */

	/* ==========================================================================
	   4. Z-Index Scale
	   ========================================================================== */

	--z-below: -1;
	--z-base: 0;
	--z-above: 10;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal-backdrop: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;
	--z-notification: 800;
	--z-maximum: 9999;

	/* ==========================================================================
	   5. Border Radius
	   ========================================================================== */

	--radius-none: 0;
	--radius-sm: 0.25rem;    /* 4px */
	--radius-base: 0.5rem;   /* 8px */
	--radius-md: 0.75rem;    /* 12px */
	--radius-lg: 1rem;       /* 16px */
	--radius-xl: 1.5rem;     /* 24px */
	--radius-2xl: 2rem;      /* 32px */
	--radius-full: 9999px;   /* Pill shape */

	/* ==========================================================================
	   6. Transitions
	   ========================================================================== */

	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;
	--transition-slower: 500ms ease-in-out;

	/* Easing Functions */
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ==========================================================================
	   7. Shadows
	   ========================================================================== */

	/* Shadow color tokens (can be overridden by theme) */
	--shadow-subtle: rgb(0 0 0 / 5%);   /* Very light shadow for subtle depth */
	--shadow-light: rgb(0 0 0 / 10%);
	--shadow-medium: rgb(0 0 0 / 20%);
	--shadow-dark: rgb(0 0 0 / 30%);
	--overlay-dark: rgb(0 0 0 / 50%);

	/* Shadow definitions */
	--shadow-xs: 0 1px 2px 0 var(--shadow-light);
	--shadow-sm: 0 2px 4px 0 var(--shadow-light);
	--shadow-base: 0 4px 6px -1px var(--shadow-light);
	--shadow-md: 0 8px 16px -2px var(--shadow-light);
	--shadow-lg: 0 10px 24px -3px var(--shadow-light);
	--shadow-xl: 0 20px 48px -4px var(--shadow-light);
	--shadow-2xl: 0 25px 60px -5px var(--shadow-light);

	/* Special Shadows */
	--shadow-inner: inset 0 2px 4px 0 var(--shadow-light);

	/* ==========================================================================
	   8. Container Widths
	   ========================================================================== */

	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;

	/* ==========================================================================
	   9. Aspect Ratios
	   ========================================================================== */

	--aspect-square: 1 / 1;
	--aspect-video: 16 / 9;
	--aspect-photo: 4 / 3;
	--aspect-portrait: 3 / 4;
}

/* ==========================================================================
   Responsive Custom Properties
   ========================================================================== */

/* Tablet and up */
@media (min-width: 768px) {
	:root {
		/* Adjust base font size for larger screens */
		--text-base: 1.125rem; /* 18px */
	}
}

/* Desktop and up */
@media (min-width: 1024px) {
	:root {
		/* Fine-tune spacing for desktop */
		--space-section: 8rem; /* Section spacing */
	}
}