/* =====================================================================
THEME — Single Source of Truth
---------------------------------------------------------------------
This file defines brand colors, spacing scale, type scale, radii,
shadows, layout constants, and motion. All utilities & components
consume these variables. Keep names semantic and stable.
===================================================================== */

:root {
/* ----------------------------- COLORS ----------------------------- */
/* Backgrounds */
--color-bg-primary: #000000; /* Page background */
--color-bg-secondary: #111111; /* Alt sections/cards */

/* Surfaces & Borders */
--color-surface: #111111; /* Card & panel surface */
--color-border-subtle: #333333; /* Hairline borders, dividers */

/* Text */ 
--color-text-primary: #FFFFFF; /* Body copy */
--color-text-secondary: #A0A0A0; /* Muted copy */
--color-text-inverse: #000000; /* On dark buttons, etc. */

/* Brand / Accents */
--color-accent: #FFFFFF; /* Brand primary */
--color-accent-hover: #CCCCCC; /* Hover state */
--color-accent-weak: #222222; /* Subtle backgrounds */

/* ----------------------------- MOTION ----------------------------- */
--anim-duration-default: 0.6s; /* For page reveals */
--anim-easing-default: ease-out;
--anim-translate-distance: 30px;
--anim-duration-fast: 0.3s;    /* For hover states */
--anim-easing-hover: ease;

/* --------------------------- TYPOGRAPHY --------------------------- */
--font-family-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--font-family-header: var(--font-family-body);

/* Font sizes (semantic) */
--font-size-xs: 0.8125rem; /* 13px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.5rem; /* 24px */
--font-size-2xl: 2rem; /* 32px */

/* Line-heights */
--leading-tight: 1.2;
--leading-normal: 1.5;

/* Weights */
--weight-light: 200;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;

/* ---------------------------- SPACING ----------------------------- */
/* Raw scale (4-based) */
--spacing-0: 0rem; /* 0 */
--spacing-2: 0.125rem; /* 2px */
--spacing-4: 0.25rem; /* 4px */
--spacing-8: 0.5rem; /* 8px */
--spacing-12: 0.75rem; /* 12px */
--spacing-16: 1rem; /* 16px */
--spacing-24: 1.5rem; /* 24px */
--spacing-32: 2rem; /* 32px */
--spacing-48: 3rem; /* 48px */

/* Semantic aliases */
--spacing-xs: var(--spacing-8);
--spacing-sm: var(--spacing-12);
--spacing-md: var(--spacing-16);
--spacing-lg: var(--spacing-32);
--spacing-xl: var(--spacing-48);

/* --------------------------- RADII & FX --------------------------- */
--border-radius-base: 0px;
--border-radius-img: 0px;

--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 8px 24px rgba(0,0,0,0.08);

/* ---------------------------- LAYOUT ------------------------------ */
--container-max: 1200px; /* Max readable width */
--container-pad: var(--spacing-md); /* Inline padding */

/* Breakpoints (used by utilities) */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;

}