/* ============================================
   NOBLE HANDKRAFT — Design Tokens
   ============================================ */

:root {
    /* === Colors === */
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #faf8f5;
    --color-accent: #c9a96e;
    --color-accent-light: #d4ba85;
    --color-accent-dark: #b08d4a;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #6b6560;
    --color-text-light: #faf8f5;
    --color-text-muted: #9a9490;
    --color-border: rgba(26, 26, 26, 0.1);
    --color-border-gold: rgba(201, 169, 110, 0.3);
    --color-surface: #ffffff;
    --color-surface-warm: #f5f0eb;
    --color-overlay-dark: rgba(26, 26, 26, 0.6);
    --color-overlay-gold: rgba(201, 169, 110, 0.1);

    /* === Typography === */
    --font-heading: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-display: clamp(3rem, 8vw, 6.5rem);
    --fs-h1: clamp(2.25rem, 5vw, 3.75rem);
    --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
    --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
    --fs-body: clamp(0.975rem, 1.2vw, 1.125rem);
    --fs-small: clamp(0.8rem, 1vw, 0.875rem);
    --fs-label: 0.75rem;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-heading: 1.2;
    --lh-body: 1.7;

    --ls-label: 0.2em;
    --ls-heading: -0.02em;
    --ls-wide: 0.15em;

    /* === Spacing === */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;
    --space-section: clamp(5rem, 10vw, 8rem);

    /* === Layout === */
    --container-max: 1200px;
    --container-padding: clamp(1.25rem, 4vw, 2.5rem);
    --grid-gap: clamp(1.5rem, 3vw, 2.5rem);

    /* === Borders & Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* === Shadows === */
    --shadow-subtle: 0 2px 20px rgba(26, 26, 26, 0.06);
    --shadow-medium: 0 4px 30px rgba(26, 26, 26, 0.1);
    --shadow-elevated: 0 8px 40px rgba(26, 26, 26, 0.15);

    /* === Transitions === */
    --transition-fast: 200ms ease;
    --transition-base: 350ms ease;
    --transition-slow: 600ms ease;
    --transition-reveal: 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* === Z-index Scale === */
    --z-base: 1;
    --z-navbar: 100;
    --z-overlay: 200;
    --z-loader: 1000;
}