@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");

:root {
    /* Color Tokens (Liquid Edge Palette) */
    --surface: #fff9ef;
    --surface-dim: #ffd709;
    --surface-bright: #fff9ef;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #fff3d1;
    --surface-container: #ffedb3;
    --surface-container-high: #ffe792;
    --surface-container-highest: #ffe16d;
    --on-surface: #221b00;
    --on-surface-variant: #3e4948;
    --inverse-surface: #3a3000;
    --inverse-on-surface: #fff0c2;
    --outline: #6e7979;
    --outline-variant: #bdc9c8;
    --surface-tint: #006a69;
    --primary: #006766;
    --on-primary: #ffffff;
    --primary-container: #058281;
    --on-primary-container: #f3fffe;
    --inverse-primary: #76d6d4;
    --secondary: #5d5f5f;
    --on-secondary: #ffffff;
    --secondary-container: #dfe0e0;
    --on-secondary-container: #616363;
    --tertiary: #5d5e5f;
    --on-tertiary: #ffffff;
    --tertiary-container: #767777;
    --on-tertiary-container: #040506;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    --primary-fixed: #93f2f1;
    --primary-fixed-dim: #76d6d4;
    --on-primary-fixed: #002020;
    --on-primary-fixed-variant: #00504f;
    --secondary-fixed: #e2e2e2;
    --secondary-fixed-dim: #c6c6c7;
    --on-secondary-fixed: #1a1c1c;
    --on-secondary-fixed-variant: #454747;
    --tertiary-fixed: #e2e2e2;
    --tertiary-fixed-dim: #c6c6c6;
    --on-tertiary-fixed: #1a1c1c;
    --on-tertiary-fixed-variant: #454747;
    --background: #fff9ef;
    --on-background: #221b00;
    --surface-variant: #ffe16d;
    --accent-salmon: rgb(250, 128, 114);

    /* Elevation & Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-blur: 12px;
    --liquid-shadow: 0 10px 40px -10px rgba(0, 103, 102, 0.15);
    --soft-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    --hover-shadow: 0 15px 35px rgba(0, 103, 102, 0.1);

    /* Shapes */
    --rounded-sm: 0.25rem;
    --rounded-default: 0.5rem;
    --rounded-md: 0.75rem;
    --rounded-lg: 1rem;
    --rounded-xl: 1.5rem;
    --rounded-full: 9999px;

    /* Spacing Grid */
    --base-spacing: 8px;
    --container-max: 1280px;
    --gutter: 24px;
    --margin-mobile: 16px;
    --margin-desktop: 48px;
    --section-gap: 120px;
}