/* Fonts are loaded via <link> in HTML head to avoid render-blocking @import */

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  @property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  @property --hero-parallax {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
  }

  @property --reveal-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
  }

  :root {
    /* Color Tokens */
    --color-forest: #23412E;
    --color-forest-light: #345e43;
    --color-forest-dark: #15271c;
    --color-forest-glass: rgba(35, 65, 46, 0.85);
    
    --color-beige: #F5F2EC;
    --color-beige-light: #fcfbfa;
    --color-beige-dark: #e8e2d5;
    --color-beige-glass: rgba(245, 242, 236, 0.85);

    --color-stone: #8A8A8A;
    --color-stone-light: #a3a3a3;
    --color-stone-dark: #5c5c5c;

    --color-charcoal: #1E1E1E;
    --color-charcoal-light: #333333;
    --color-charcoal-glass: rgba(30, 30, 30, 0.4);

    --color-white: #FFFFFF;
    --color-white-glass: rgba(255, 255, 255, 0.15);
    --color-white-glass-hover: rgba(255, 255, 255, 0.25);

    /* Typography Tokens - Luxury Estate Editorial */
    --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-subheading: 'Playfair Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Fluid Sizing (Mobile to Desktop) */
    --text-xs: clamp(0.75rem, 0.72rem + 0.2vw, 0.85rem);
    --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 0.95rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.08rem);
    --text-lg: clamp(1.1rem, 1.02rem + 0.35vw, 1.22rem);
    --text-xl: clamp(1.28rem, 1.18rem + 0.5vw, 1.55rem);
    --text-2xl: clamp(1.55rem, 1.38rem + 0.75vw, 2.1rem);
    --text-3xl: clamp(1.95rem, 1.7rem + 1.25vw, 2.75rem);
    --text-4xl: clamp(2.4rem, 2.0rem + 1.75vw, 3.4rem);
    --text-display: clamp(3.1rem, 2.5rem + 3.0vw, 5.2rem);

    /* Spacing Tokens - Compact & Balanced */
    --space-xs: clamp(0.35rem, 0.3rem + 0.2vw, 0.5rem);
    --space-sm: clamp(0.75rem, 0.7rem + 0.35vw, 1.1rem);
    --space-md: clamp(1.2rem, 1.0rem + 0.5vw, 1.6rem);
    --space-lg: clamp(1.75rem, 1.5rem + 0.75vw, 2.5rem);
    --space-xl: clamp(2.5rem, 2.2rem + 1.25vw, 3.5rem);
    --space-2xl: clamp(3.5rem, 3.0rem + 1.75vw, 4.5rem);
    --space-3xl: clamp(4.5rem, 4.0rem + 2.25vw, 6rem);

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

    /* Shadows */
    --shadow-sm: 0 2px 8px -2px rgba(30, 30, 30, 0.05), 0 4px 16px -4px rgba(30, 30, 30, 0.02);
    --shadow-md: 0 4px 16px -4px rgba(30, 30, 30, 0.08), 0 8px 32px -8px rgba(30, 30, 30, 0.04);
    --shadow-lg: 0 8px 32px -8px rgba(30, 30, 30, 0.12), 0 16px 64px -16px rgba(30, 30, 30, 0.06);
    --shadow-xl: 0 16px 64px -16px rgba(30, 30, 30, 0.16), 0 32px 128px -32px rgba(30, 30, 30, 0.08);

    /* Transitions */
    --ease-organic: cubic-bezier(0.25, 1, 0.35, 1);
    --transition-fast: 0.2s var(--ease-organic);
    --transition-base: 0.4s var(--ease-organic);
    --transition-slow: 0.8s var(--ease-organic);

    /* Z-Index */
    --z-base: 1;
    --z-lift: 10;
    --z-nav: 100;
    --z-popover: 200;
    --z-overlay: 1000;
  }
}