/* 
   GERMANIUM - Design Tokens & Variables
   Aesthetics: Clinical Beauty / Natural Dermo-cosmetics
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    /* Color Palette (HSL for natural harmony) */
    --color-bg-warm: hsl(36, 30%, 97%);        /* Warm Alabaster / Cream background */
    --color-bg-white: hsl(0, 0%, 100%);        /* Pure White for cards/sections */
    --color-primary: hsl(93, 24%, 30%);        /* Deep Olive Green (clinical & botanic) */
    --color-primary-light: hsl(93, 20%, 45%);  /* Soft Sage Green for secondary states */
    --color-primary-dark: hsl(93, 26%, 20%);   /* Very Dark Olive for text headings */
    --color-accent: hsl(38, 25%, 65%);         /* Champagne Gold for premium details */
    --color-accent-light: hsl(38, 30%, 93%);   /* Warm Gold tinted cream */
    --color-text-main: hsl(210, 15%, 15%);     /* Charcoal Slate for primary reading */
    --color-text-muted: hsl(210, 10%, 45%);    /* Muted gray-blue for minor details */
    --color-border: hsl(36, 12%, 88%);         /* Light warm gray borders */
    --color-success: hsl(140, 30%, 40%);       /* Light green for success states */
    
    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Spacing System */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2.5rem;   /* 40px */
    --space-xxl: 4.5rem;  /* 72px */
    --space-huge: 7.5rem; /* 120px */
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 28px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md: 0 4px 20px -2px rgba(77, 98, 59, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 20px 40px -8px rgba(77, 98, 59, 0.08), 0 8px 16px -4px rgba(0,0,0,0.02);
    --shadow-glow: 0 0 25px rgba(196, 181, 148, 0.25);
    
    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout Constraints */
    --max-width-content: 1200px;
    --max-width-narrow: 800px;
}

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-warm);
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-light);
}