:root {
    --background: #111415;
    --surface: #111415;
    --surface-dim: #111415;
    --surface-bright: #37393b;
    --surface-container: #1e2021;
    --surface-container-low: #1a1c1d;
    --surface-container-lowest: #0c0e10;
    --surface-container-high: #282a2c;
    --surface-container-highest: #333537;
    --surface-variant: #333537;
    --surface-tint: #ffb59d;
    --primary: #ffb59d;
    --primary-container: #ff6b35;
    --primary-fixed: #ffdbd0;
    --primary-fixed-dim: #ffb59d;
    --secondary: #a9c9f2;
    --secondary-container: #27496c;
    --secondary-fixed: #d1e4ff;
    --secondary-fixed-dim: #a9c9f2;
    --tertiary: #59d5fb;
    --tertiary-container: #00a7cb;
    --tertiary-fixed: #b5ebff;
    --tertiary-fixed-dim: #59d5fb;
    --error: #ffb4ab;
    --error-container: #93000a;
    --outline: #a98a80;
    --outline-variant: #594139;
    --on-background: #e2e2e4;
    --on-surface: #e2e2e4;
    --on-surface-variant: #e1bfb5;
    --on-primary: #5d1900;
    --on-primary-container: #5f1900;
    --on-primary-fixed: #390c00;
    --on-primary-fixed-variant: #832600;
    --on-secondary: #0b3254;
    --on-secondary-container: #98b8e0;
    --on-secondary-fixed: #001d36;
    --on-secondary-fixed-variant: #27496c;
    --on-tertiary: #003543;
    --on-tertiary-container: #003744;
    --on-tertiary-fixed: #001f28;
    --on-tertiary-fixed-variant: #004e60;
    --on-error: #690005;
    --on-error-container: #ffdad6;
    --inverse-surface: #e2e2e4;
    --inverse-on-surface: #2f3132;
    --inverse-primary: #ab3500;
}

/* Typography utilities */
.font-body-md,
.font-body-lg,
.font-display-lg,
.font-display-lg-mobile,
.font-headline-md,
.font-headline-xl,
.font-headline-xl-mobile,
.font-label-md,
.font-label-sm {
    font-family: "Inter", sans-serif;
}
.text-body-md { font-size:16px; line-height:1.6; letter-spacing:0em; font-weight:400; }
.text-body-lg { font-size:18px; line-height:1.6; letter-spacing:0em; font-weight:400; }
.text-display-lg-mobile { font-size:40px; line-height:1.1; letter-spacing:-0.03em; font-weight:700; }
.text-display-lg { font-size:64px; line-height:1.1; letter-spacing:-0.04em; font-weight:700; }
.text-headline-md { font-size:24px; line-height:1.3; letter-spacing:-0.01em; font-weight:600; }
.text-headline-xl { font-size:40px; line-height:1.2; letter-spacing:-0.02em; font-weight:600; }
.text-headline-xl-mobile { font-size:32px; line-height:1.2; letter-spacing:-0.02em; font-weight:600; }
.text-label-md { font-size:14px; line-height:1.2; letter-spacing:0.02em; font-weight:500; }
.text-label-sm { font-size:12px; line-height:1.2; letter-spacing:0.05em; font-weight:600; }

/* Spacing utilities */
.px-gutter { padding-left:24px; padding-right:24px; }
.px-margin { padding-left:32px; padding-right:32px; }
.py-xxl { padding-top:80px; padding-bottom:80px; }
.py-xl { padding-top:40px; padding-bottom:40px; }
.pt-xl { padding-top:40px; }
.pb-xxl { padding-bottom:80px; }
.gap-xxl { gap:80px; }
.gap-xl { gap:40px; }
.gap-lg { gap:24px; }
.gap-bento-gap { gap:16px; }

/* Color utilities */
.bg-background { background-color: var(--background); }
.bg-surface { background-color: var(--surface); }
.bg-surface-container { background-color: var(--surface-container); }
.bg-surface-container-highest { background-color: var(--surface-container-highest); }
.bg-surface-bright { background-color: var(--surface-bright); }
.bg-surface-dim { background-color: var(--surface-dim); }
.bg-primary-container { background-color: var(--primary-container); }
.bg-secondary-container { background-color: var(--secondary-container); }
.bg-tertiary-container { background-color: var(--tertiary-container); }
.text-on-background { color: var(--on-background); }
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-primary { color: var(--primary); }
.text-primary-container { color: var(--primary-container); }
.text-secondary { color: var(--secondary); }
.text-secondary-fixed { color: var(--secondary-fixed); }
.text-tertiary { color: var(--tertiary); }
.text-error { color: var(--error); }
.text-outline { color: var(--outline); }
.border-primary-container\/50 { border-color: rgba(255, 107, 53, 0.5); }
.bg-surface\/30 { background-color: rgba(17, 20, 21, 0.3); }
.bg-surface\/80 { background-color: rgba(17, 20, 21, 0.8); }

/* Cards */
.glass-panel {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-panel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.bento-card { transition: all 0.3s ease; }
.bento-card:hover { transform: scale(1.02); box-shadow: 0 0 20px rgba(255, 107, 53, 0.1); }