/**
 * HT Digital Hub Elevate Agency Inspired Design Tokens & CSS Variables
 * Aesthetics matching provided design reference: Beige (#eee9e3), Black (#000000), Brand Orange (#f43c00).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root {
    /* Primary Design Palette */
    --color-bg-beige: #eee9e3;
    --color-brand-orange: #f43c00;
    --color-brand-orange-hover: #d03300;
    --color-brand-orange-alpha: rgba(244, 60, 0, 0.12);
    
    --color-text-dark: #000000;
    --color-text-muted: rgba(0, 0, 0, 0.6);
    --color-text-light: #ffffff;
    
    --color-bg-dark: #000000;
    --color-card-dark: #141414;
    --color-card-dark-hover: #1c1c1c;

    /* Borders & Outlines */
    --color-border-dark: rgba(0, 0, 0, 0.1);
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-orange: rgba(244, 60, 0, 0.4);

    /* Typography Fonts */
    --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing & Radiuses */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-xl: 48px;     /* rounded-[3rem] */
    --radius-full: 9999px;

    --container-max: 1440px;
    --container-narrow: 960px;
    --header-height: 90px;

    --transition-base: 300ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
}