Frosted Glass UI Kit - Free HTML/CSS UI Kit

A vibrant, light-themed frosted glass UI kit featuring warm sunset gradients and translucent layered components.

Download Full Kit (.zip)

Complete kit with all components & styles

Just need one component?

Download base.css and add the following line to your HTML:

<link rel="stylesheet" href="base.css">

Then grab a component below and add it to your HTML.

Color Palette

Sunset Gradient linear-gradient
Primary #EA580C
Accent #E11D48
Frosted Base rgba(255, 255, 255, 0.45)
Frosted Border rgba(255, 255, 255, 0.6)
Dark Text #1F2937

Typography

Navbars

Frosted Simple Navbar

HTML 
<nav class="fg-navbar fg-glass">
    <div class="fg-nav-container">
        <div class="fg-logo">
            <div class="fg-logo-icon"></div>
            <span>Frosted<span>UI</span></span>
        </div>
        
        <div class="fg-nav-links">
            <a href="#" class="active">Features</a>
            <a href="#">Solutions</a>
            <a href="#">Resources</a>
            <a href="#">Pricing</a>
        </div>
        
        <div class="fg-nav-actions">
            <a href="#" class="fg-btn fg-btn-ghost">Log In</a>
            <a href="#" class="fg-btn fg-btn-primary">Get Started</a>
        </div>
        
        <button class="fg-mobile-toggle">
            <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
        </button>
    </div>
</nav>
CSS (Component Only) 
/* Component: Frosted Simple Navbar */
/* NOTE: This component requires base.css to be included in your page. */

.fg-navbar {
    width: 100%;
    position: relative;
    top: 0;
    z-index: 100;
}

.fg-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fg-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--fg-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg-text-main);
}

.fg-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--fg-primary-glow);
}

.fg-logo span span {
    font-weight: 400;
    color: var(--fg-text-muted);
}

.fg-nav-links {
    display: flex;
    gap: 2rem;
}

.fg-nav-links a {
    text-decoration: none;
    color: var(--fg-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    position: relative;
}

.fg-nav-links a:hover, .fg-nav-links a.active {
    color: var(--fg-primary);
}

.fg-nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--fg-primary);
    border-radius: 2px;
}

.fg-nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.fg-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--fg-text-main);
    cursor: pointer;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .fg-nav-links, .fg-nav-actions {
        display: none;
    }
    .fg-mobile-toggle {
        display: block;
    }
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-navbar {
    width: 100%;
    position: relative;
    top: 0;
    z-index: 100;
}

.fg-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fg-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--fg-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg-text-main);
}

.fg-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--fg-primary-glow);
}

.fg-logo span span {
    font-weight: 400;
    color: var(--fg-text-muted);
}

.fg-nav-links {
    display: flex;
    gap: 2rem;
}

.fg-nav-links a {
    text-decoration: none;
    color: var(--fg-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    position: relative;
}

.fg-nav-links a:hover, .fg-nav-links a.active {
    color: var(--fg-primary);
}

.fg-nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--fg-primary);
    border-radius: 2px;
}

.fg-nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.fg-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--fg-text-main);
    cursor: pointer;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .fg-nav-links, .fg-nav-actions {
        display: none;
    }
    .fg-mobile-toggle {
        display: block;
    }
}

Frosted Sidebar

HTML 
<aside class="fg-sidebar fg-glass">
    <div class="fg-sidebar-header">
        <div class="fg-logo">
            <div class="fg-logo-icon"></div>
            <span>Frosted<span>UI</span></span>
        </div>
    </div>
    <nav class="fg-sidebar-nav">
        <ul>
            <li><a href="#" class="active"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg> Dashboard</a></li>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg> Team</a></li>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg> Projects</a></li>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> Calendar</a></li>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg> Inbox</a></li>
        </ul>
        <div class="fg-nav-divider"></div>
        <ul>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> Settings</a></li>
        </ul>
    </nav>
    <div class="fg-sidebar-footer">
        <div class="fg-user-profile">
            <div class="fg-avatar">
                <img src="https://i.pravatar.cc/100?img=32" alt="User">
                <div class="fg-status-indicator"></div>
            </div>
            <div class="fg-user-info">
                <strong>Sarah Jenkins</strong>
                <span>Pro Member</span>
            </div>
        </div>
    </div>
</aside>
CSS (Component Only) 
/* Component: Frosted Sidebar */
/* NOTE: This component requires base.css to be included in your page. */

.fg-sidebar {
    width: 280px;
    height: 600px; /* Fixed height for preview purposes */
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: 20px;
    font-family: var(--fg-font-body);
}

.fg-sidebar-header {
    margin-bottom: 2.5rem;
}

.fg-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--fg-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg-text-main);
}

.fg-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--fg-primary-glow);
}

.fg-logo span span {
    font-weight: 400;
    color: var(--fg-text-muted);
}

.fg-sidebar-nav {
    flex: 1;
}

.fg-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fg-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: var(--fg-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.fg-sidebar-nav a svg {
    color: var(--fg-text-muted);
    transition: color 0.2s ease;
}

.fg-sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--fg-text-main);
}

.fg-sidebar-nav a:hover svg {
    color: var(--fg-primary);
}

.fg-sidebar-nav a.active {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(225, 29, 72, 0.15) 100%);
    color: var(--fg-primary);
    font-weight: 600;
    border: 1px solid rgba(234, 88, 12, 0.2);
}

.fg-sidebar-nav a.active svg {
    color: var(--fg-primary);
}

.fg-nav-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 1.5rem 0;
}

.fg-sidebar-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.fg-user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.fg-user-profile:hover {
    background: rgba(255, 255, 255, 0.5);
}

.fg-avatar {
    position: relative;
}

.fg-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
}

.fg-status-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid white;
}

.fg-user-info {
    display: flex;
    flex-direction: column;
}

.fg-user-info strong {
    font-size: 0.95rem;
    color: var(--fg-text-main);
    font-weight: 600;
}

.fg-user-info span {
    font-size: 0.8rem;
    color: var(--fg-text-muted);
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-sidebar {
    width: 280px;
    height: 600px; /* Fixed height for preview purposes */
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: 20px;
    font-family: var(--fg-font-body);
}

.fg-sidebar-header {
    margin-bottom: 2.5rem;
}

.fg-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--fg-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg-text-main);
}

.fg-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--fg-primary-glow);
}

.fg-logo span span {
    font-weight: 400;
    color: var(--fg-text-muted);
}

.fg-sidebar-nav {
    flex: 1;
}

.fg-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fg-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: var(--fg-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.fg-sidebar-nav a svg {
    color: var(--fg-text-muted);
    transition: color 0.2s ease;
}

.fg-sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--fg-text-main);
}

.fg-sidebar-nav a:hover svg {
    color: var(--fg-primary);
}

.fg-sidebar-nav a.active {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15) 0%, rgba(225, 29, 72, 0.15) 100%);
    color: var(--fg-primary);
    font-weight: 600;
    border: 1px solid rgba(234, 88, 12, 0.2);
}

.fg-sidebar-nav a.active svg {
    color: var(--fg-primary);
}

.fg-nav-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 1.5rem 0;
}

.fg-sidebar-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.fg-user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.fg-user-profile:hover {
    background: rgba(255, 255, 255, 0.5);
}

.fg-avatar {
    position: relative;
}

.fg-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
}

.fg-status-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid white;
}

.fg-user-info {
    display: flex;
    flex-direction: column;
}

.fg-user-info strong {
    font-size: 0.95rem;
    color: var(--fg-text-main);
    font-weight: 600;
}

.fg-user-info span {
    font-size: 0.8rem;
    color: var(--fg-text-muted);
}

Hero Sections

Frosted Centered Hero

HTML 
<section class="fg-hero-centered">
    <div class="fg-mesh-bg"></div>
    <div class="fg-hero-container">
        <div class="fg-badge fg-glass">
            <span class="fg-badge-dot"></span>
            New Version 2.0 is Live
        </div>
        <h1 class="fg-hero-title">
            Design beautifully with<br>
            <span class="fg-text-gradient">Frosted Glass</span>
        </h1>
        <p class="fg-hero-subtitle">
            Create stunning, lightweight user interfaces with our premium frosted glass component library. Built for modern web applications.
        </p>
        <div class="fg-hero-actions">
            <button class="fg-btn fg-btn-primary">Get Started Free</button>
            <button class="fg-btn fg-btn-outline">View Documentation</button>
        </div>
        
        <div class="fg-hero-preview fg-glass">
            <div class="fg-preview-header">
                <div class="fg-window-dots">
                    <span></span><span></span><span></span>
                </div>
            </div>
            <div class="fg-preview-body">
                <div class="fg-skeleton-line w-3/4"></div>
                <div class="fg-skeleton-line w-1/2"></div>
                <div class="fg-skeleton-line w-full mt-4"></div>
                <div class="fg-skeleton-line w-full"></div>
                <div class="fg-skeleton-line w-5/6"></div>
            </div>
        </div>
    </div>
</section>
CSS (Component Only) 
/* Component: Frosted Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */

.fg-hero-centered {
    position: relative;
    padding: 6rem 1rem 4rem;
    text-align: center;
    overflow: hidden;
}

.fg-hero-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--fg-primary);
}

.fg-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--fg-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--fg-primary);
}

.fg-hero-title {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.fg-hero-subtitle {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.fg-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 4rem;
}

.fg-hero-preview {
    width: 100%;
    max-width: 800px;
    border-radius: 16px;
    padding: 1rem;
    text-align: left;
}

.fg-preview-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5rem;
}

.fg-window-dots {
    display: flex;
    gap: 0.5rem;
}

.fg-window-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
}

.fg-window-dots span:nth-child(1) { background: #ff5f56; }
.fg-window-dots span:nth-child(2) { background: #ffbd2e; }
.fg-window-dots span:nth-child(3) { background: #27c93f; }

.fg-skeleton-line {
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.w-3\/4 { width: 75%; }
.w-1\/2 { width: 50%; }
.w-full { width: 100%; }
.w-5\/6 { width: 83.333%; }
.mt-4 { margin-top: 1rem; }

@media (max-width: 768px) {
    .fg-hero-title { font-size: 2.5rem; }
    .fg-hero-subtitle { font-size: 1.1rem; }
    .fg-hero-actions { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto 3rem; }
    .fg-hero-actions button { width: 100%; }
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-hero-centered {
    position: relative;
    padding: 6rem 1rem 4rem;
    text-align: center;
    overflow: hidden;
}

.fg-hero-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--fg-primary);
}

.fg-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--fg-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--fg-primary);
}

.fg-hero-title {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.fg-hero-subtitle {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.fg-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 4rem;
}

.fg-hero-preview {
    width: 100%;
    max-width: 800px;
    border-radius: 16px;
    padding: 1rem;
    text-align: left;
}

.fg-preview-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5rem;
}

.fg-window-dots {
    display: flex;
    gap: 0.5rem;
}

.fg-window-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
}

.fg-window-dots span:nth-child(1) { background: #ff5f56; }
.fg-window-dots span:nth-child(2) { background: #ffbd2e; }
.fg-window-dots span:nth-child(3) { background: #27c93f; }

.fg-skeleton-line {
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.w-3\/4 { width: 75%; }
.w-1\/2 { width: 50%; }
.w-full { width: 100%; }
.w-5\/6 { width: 83.333%; }
.mt-4 { margin-top: 1rem; }

@media (max-width: 768px) {
    .fg-hero-title { font-size: 2.5rem; }
    .fg-hero-subtitle { font-size: 1.1rem; }
    .fg-hero-actions { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto 3rem; }
    .fg-hero-actions button { width: 100%; }
}

Frosted Split Hero

HTML 
<section class="fg-hero-split">
    <div class="fg-hero-content">
        <h2 class="fg-hero-title">Warm & Vibrant <span class="fg-text-gradient">Interfaces</span></h2>
        <p class="fg-hero-subtitle">High-quality components with frosted glass at its core. Create stunning dashboards and landing pages in minutes with our bright new kit.</p>
        <div class="fg-hero-actions">
            <a href="#" class="fg-btn fg-btn-primary">Start Building</a>
            <a href="#" class="fg-btn fg-btn-outline">Browse Components</a>
        </div>
    </div>
    <div class="fg-hero-visual">
        <div class="fg-visual-card fg-glass card-1">
            <div class="fg-card-icon">🔥</div>
            <div class="fg-card-val">3x Faster</div>
            <div class="fg-card-label">Development Speed</div>
        </div>
        <div class="fg-visual-card fg-glass card-2">
            <div class="fg-card-icon">✨</div>
            <div class="fg-card-val">100%</div>
            <div class="fg-card-label">Beautiful Design</div>
        </div>
        <div class="fg-visual-circle circle-1"></div>
        <div class="fg-visual-circle circle-2"></div>
    </div>
</section>
CSS (Component Only) 
/* Component: Frosted Split Hero */
/* NOTE: This component requires base.css to be included in your page. */

.fg-hero-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.fg-hero-visual {
    position: relative;
    height: 400px;
}

.fg-visual-card {
    position: absolute;
    padding: 1.5rem;
    border-radius: 24px;
    width: 200px;
    z-index: 10;
    transition: transform 0.5s ease;
}

.card-1 { top: 20%; left: 0%; transform: rotate(-5deg); }
.card-2 { top: 40%; right: 10%; transform: rotate(5deg); }

.fg-visual-card:hover { transform: scale(1.05) rotate(0deg); }

.fg-card-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.fg-card-val { font-size: 1.5rem; font-weight: 800; color: var(--fg-text-main); }
.fg-card-label { font-size: 0.85rem; color: var(--fg-text-muted); }

.fg-visual-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    filter: blur(40px);
}

.circle-1 {
    width: 250px; height: 250px;
    background: var(--fg-primary);
    top: 0; right: 0;
    opacity: 0.4;
}

.circle-2 {
    width: 200px; height: 200px;
    background: var(--fg-accent);
    bottom: 0; left: 10%;
    opacity: 0.3;
}

@media (max-width: 992px) {
    .fg-hero-split { grid-template-columns: 1fr; text-align: center; }
    .fg-hero-visual { height: 300px; display: flex; justify-content: center; align-items: center; }
    .card-1, .card-2 { position: relative; top: 0; left: 0; right: 0; transform: none; }
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-hero-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.fg-hero-visual {
    position: relative;
    height: 400px;
}

.fg-visual-card {
    position: absolute;
    padding: 1.5rem;
    border-radius: 24px;
    width: 200px;
    z-index: 10;
    transition: transform 0.5s ease;
}

.card-1 { top: 20%; left: 0%; transform: rotate(-5deg); }
.card-2 { top: 40%; right: 10%; transform: rotate(5deg); }

.fg-visual-card:hover { transform: scale(1.05) rotate(0deg); }

.fg-card-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.fg-card-val { font-size: 1.5rem; font-weight: 800; color: var(--fg-text-main); }
.fg-card-label { font-size: 0.85rem; color: var(--fg-text-muted); }

.fg-visual-circle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    filter: blur(40px);
}

.circle-1 {
    width: 250px; height: 250px;
    background: var(--fg-primary);
    top: 0; right: 0;
    opacity: 0.4;
}

.circle-2 {
    width: 200px; height: 200px;
    background: var(--fg-accent);
    bottom: 0; left: 10%;
    opacity: 0.3;
}

@media (max-width: 992px) {
    .fg-hero-split { grid-template-columns: 1fr; text-align: center; }
    .fg-hero-visual { height: 300px; display: flex; justify-content: center; align-items: center; }
    .card-1, .card-2 { position: relative; top: 0; left: 0; right: 0; transform: none; }
}

Buttons

Frosted Primary Buttons

HTML 
<div class="fg-btn-group">
    <button class="fg-btn fg-btn-primary">Primary Action</button>
    <button class="fg-btn fg-btn-primary">
        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M5 12h14"></path><path d="M12 5l7 7-7 7"></path></svg>
        With Icon
    </button>
    <button class="fg-btn fg-btn-primary fg-btn-loading" disabled>
        Processing...
    </button>
</div>
CSS (Component Only) 
/* Component: Frosted Primary Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.fg-btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.fg-btn-loading {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    padding-left: 2.5rem;
}

.fg-btn-loading::before {
    content: '';
    position: absolute;
    left: 1rem;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: fg-spin 1s linear infinite;
}

@keyframes fg-spin {
    to { transform: rotate(360deg); }
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.fg-btn-loading {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    padding-left: 2.5rem;
}

.fg-btn-loading::before {
    content: '';
    position: absolute;
    left: 1rem;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: fg-spin 1s linear infinite;
}

@keyframes fg-spin {
    to { transform: rotate(360deg); }
}

Frosted Outline Buttons

HTML 
<div class="fg-btn-group">
    <button class="fg-btn fg-btn-outline">Outline Action</button>
    <button class="fg-btn fg-btn-outline">
        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
        Add Item
    </button>
</div>
CSS (Component Only) 
/* Component: Frosted Outline Buttons */
/* NOTE: This component requires base.css to be included in your page. */

/* Note: .fg-btn-group is required if using alongside primary buttons */
.fg-btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
/* Note: .fg-btn-group is required if using alongside primary buttons */
.fg-btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

Forms

Frosted Login Form

HTML 
<div class="fg-login-card fg-glass">
    <div class="fg-login-header">
        <h3>Welcome Back</h3>
        <p>Please enter your details to sign in</p>
    </div>
    <form class="fg-form">
        <div class="fg-form-group">
            <label for="email">Email</label>
            <input type="email" id="email" placeholder="Enter your email" class="fg-input fg-glass">
        </div>
        <div class="fg-form-group">
            <div class="fg-label-flex">
                <label for="password">Password</label>
                <a href="#" class="fg-forgot-link">Forgot password?</a>
            </div>
            <input type="password" id="password" placeholder="••••••••" class="fg-input fg-glass">
        </div>
        <div class="fg-form-group fg-checkbox-group">
            <input type="checkbox" id="remember">
            <label for="remember">Remember me for 30 days</label>
        </div>
        <button type="submit" class="fg-btn fg-btn-primary fg-btn-block">Sign In</button>
    </form>
    <div class="fg-login-footer">
        <p>Don't have an account? <a href="#">Sign up</a></p>
    </div>
</div>
CSS (Component Only) 
/* Component: Frosted Login Form */
/* NOTE: This component requires base.css to be included in your page. */

.fg-login-card {
    max-width: 400px;
    margin: 0 auto;
    padding: 2.5rem;
    border-radius: 24px;
}

.fg-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.fg-login-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.fg-form-group {
    margin-bottom: 1.5rem;
}

.fg-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fg-text-main);
}

.fg-label-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fg-forgot-link {
    font-size: 0.85rem;
    color: var(--fg-primary);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.fg-forgot-link:hover {
    text-decoration: underline;
}

.fg-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-family: var(--fg-font-body);
    font-size: 0.95rem;
    color: var(--fg-text-main);
    transition: all 0.2s ease;
    outline: none;
}

.fg-input::placeholder {
    color: var(--fg-text-muted);
    opacity: 0.7;
}

.fg-input:focus {
    border-color: var(--fg-primary);
    box-shadow: 0 0 0 3px var(--fg-primary-glow);
    background: rgba(255, 255, 255, 0.7);
}

.fg-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fg-checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--fg-primary);
    cursor: pointer;
}

.fg-checkbox-group label {
    margin-bottom: 0;
    cursor: pointer;
}

.fg-login-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
}

.fg-login-footer a {
    color: var(--fg-primary);
    text-decoration: none;
    font-weight: 600;
}

.fg-login-footer a:hover {
    text-decoration: underline;
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-login-card {
    max-width: 400px;
    margin: 0 auto;
    padding: 2.5rem;
    border-radius: 24px;
}

.fg-login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.fg-login-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.fg-form-group {
    margin-bottom: 1.5rem;
}

.fg-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fg-text-main);
}

.fg-label-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fg-forgot-link {
    font-size: 0.85rem;
    color: var(--fg-primary);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.fg-forgot-link:hover {
    text-decoration: underline;
}

.fg-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-family: var(--fg-font-body);
    font-size: 0.95rem;
    color: var(--fg-text-main);
    transition: all 0.2s ease;
    outline: none;
}

.fg-input::placeholder {
    color: var(--fg-text-muted);
    opacity: 0.7;
}

.fg-input:focus {
    border-color: var(--fg-primary);
    box-shadow: 0 0 0 3px var(--fg-primary-glow);
    background: rgba(255, 255, 255, 0.7);
}

.fg-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fg-checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--fg-primary);
    cursor: pointer;
}

.fg-checkbox-group label {
    margin-bottom: 0;
    cursor: pointer;
}

.fg-login-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
}

.fg-login-footer a {
    color: var(--fg-primary);
    text-decoration: none;
    font-weight: 600;
}

.fg-login-footer a:hover {
    text-decoration: underline;
}

Frosted Settings Form

HTML 
<div class="fg-settings-panel fg-glass">
    <div class="fg-panel-header">
        <h3>Profile Settings</h3>
        <p>Update your account information and preferences</p>
    </div>
    
    <div class="fg-settings-body">
        <div class="fg-avatar-upload">
            <img src="https://i.pravatar.cc/150?img=32" alt="Profile" class="fg-avatar-lg">
            <div class="fg-upload-actions">
                <button class="fg-btn fg-btn-outline">Change Avatar</button>
                <button class="fg-btn fg-btn-ghost">Remove</button>
            </div>
        </div>
        
        <form class="fg-form-grid">
            <div class="fg-form-group">
                <label>First Name</label>
                <input type="text" class="fg-input fg-glass" value="Sarah">
            </div>
            <div class="fg-form-group">
                <label>Last Name</label>
                <input type="text" class="fg-input fg-glass" value="Jenkins">
            </div>
            <div class="fg-form-group full-width">
                <label>Email Address</label>
                <input type="email" class="fg-input fg-glass" value="[email protected]">
            </div>
            <div class="fg-form-group full-width">
                <label>Bio</label>
                <textarea class="fg-input fg-glass fg-textarea" rows="4">Product designer focusing on intuitive user experiences and clean interfaces.</textarea>
            </div>
            
            <div class="fg-form-group full-width fg-toggle-group">
                <div class="fg-toggle-info">
                    <label>Email Notifications</label>
                    <p>Receive weekly digest emails</p>
                </div>
                <label class="fg-toggle">
                    <input type="checkbox" checked>
                    <span class="fg-slider"></span>
                </label>
            </div>
        </form>
    </div>
    
    <div class="fg-panel-footer">
        <button class="fg-btn fg-btn-ghost">Cancel</button>
        <button class="fg-btn fg-btn-primary">Save Changes</button>
    </div>
</div>
CSS (Component Only) 
/* Component: Frosted Settings Form */
/* NOTE: This component requires base.css to be included in your page. */

.fg-settings-panel {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
}

.fg-panel-header {
    padding: 2rem 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.fg-panel-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.fg-settings-body {
    padding: 2.5rem;
}

.fg-avatar-upload {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.fg-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.fg-upload-actions {
    display: flex;
    gap: 1rem;
}

.fg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.fg-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fg-text-main);
}

.fg-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-family: var(--fg-font-body);
    font-size: 0.95rem;
    color: var(--fg-text-main);
    transition: all 0.2s ease;
    outline: none;
}

.fg-input::placeholder {
    color: var(--fg-text-muted);
    opacity: 0.7;
}

.fg-input:focus {
    border-color: var(--fg-primary);
    box-shadow: 0 0 0 3px var(--fg-primary-glow);
    background: rgba(255, 255, 255, 0.7);
}

.fg-form-group.full-width {
    grid-column: 1 / -1;
}

.fg-textarea {
    resize: vertical;
    min-height: 100px;
}

.fg-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 1rem;
}

.fg-toggle-info p {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.fg-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.fg-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.fg-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.1);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,0.5);
}

.fg-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

input:checked + .fg-slider {
    background-color: var(--fg-primary);
    border-color: var(--fg-primary);
}

input:checked + .fg-slider:before {
    transform: translateX(22px);
}

.fg-panel-footer {
    padding: 1.5rem 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

@media (max-width: 600px) {
    .fg-form-grid {
        grid-template-columns: 1fr;
    }
    .fg-avatar-upload {
        flex-direction: column;
        align-items: flex-start;
    }
    .fg-panel-header, .fg-settings-body, .fg-panel-footer {
        padding: 1.5rem;
    }
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-settings-panel {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
}

.fg-panel-header {
    padding: 2rem 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.fg-panel-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.fg-settings-body {
    padding: 2.5rem;
}

.fg-avatar-upload {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.fg-avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.fg-upload-actions {
    display: flex;
    gap: 1rem;
}

.fg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.fg-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fg-text-main);
}

.fg-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    font-family: var(--fg-font-body);
    font-size: 0.95rem;
    color: var(--fg-text-main);
    transition: all 0.2s ease;
    outline: none;
}

.fg-input::placeholder {
    color: var(--fg-text-muted);
    opacity: 0.7;
}

.fg-input:focus {
    border-color: var(--fg-primary);
    box-shadow: 0 0 0 3px var(--fg-primary-glow);
    background: rgba(255, 255, 255, 0.7);
}

.fg-form-group.full-width {
    grid-column: 1 / -1;
}

.fg-textarea {
    resize: vertical;
    min-height: 100px;
}

.fg-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 1rem;
}

.fg-toggle-info p {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.fg-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.fg-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.fg-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.1);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,0.5);
}

.fg-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

input:checked + .fg-slider {
    background-color: var(--fg-primary);
    border-color: var(--fg-primary);
}

input:checked + .fg-slider:before {
    transform: translateX(22px);
}

.fg-panel-footer {
    padding: 1.5rem 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

@media (max-width: 600px) {
    .fg-form-grid {
        grid-template-columns: 1fr;
    }
    .fg-avatar-upload {
        flex-direction: column;
        align-items: flex-start;
    }
    .fg-panel-header, .fg-settings-body, .fg-panel-footer {
        padding: 1.5rem;
    }
}

Cards

Frosted Stat Cards

HTML 
<div class="fg-stats-grid">
    <div class="fg-stat-card fg-glass">
        <div class="fg-stat-header">
            <span class="fg-stat-title">Total Revenue</span>
            <div class="fg-stat-icon" style="color: var(--fg-primary); background: rgba(234, 88, 12, 0.1);">
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
            </div>
        </div>
        <div class="fg-stat-value">$124,563.00</div>
        <div class="fg-stat-footer">
            <span class="fg-trend fg-trend-up">↑ 14%</span>
            <span class="fg-trend-label">vs last month</span>
        </div>
    </div>
    
    <div class="fg-stat-card fg-glass">
        <div class="fg-stat-header">
            <span class="fg-stat-title">Active Users</span>
            <div class="fg-stat-icon" style="color: var(--fg-accent); background: rgba(225, 29, 72, 0.1);">
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
            </div>
        </div>
        <div class="fg-stat-value">8,492</div>
        <div class="fg-stat-footer">
            <span class="fg-trend fg-trend-up">↑ 5.2%</span>
            <span class="fg-trend-label">vs last month</span>
        </div>
    </div>
    
    <div class="fg-stat-card fg-glass">
        <div class="fg-stat-header">
            <span class="fg-stat-title">Bounce Rate</span>
            <div class="fg-stat-icon" style="color: #8b5cf6; background: rgba(139, 92, 246, 0.1);">
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
            </div>
        </div>
        <div class="fg-stat-value">24.5%</div>
        <div class="fg-stat-footer">
            <span class="fg-trend fg-trend-down">↓ 1.2%</span>
            <span class="fg-trend-label">vs last month</span>
        </div>
    </div>
</div>
CSS (Component Only) 
/* Component: Frosted Stat Cards */
/* NOTE: This component requires base.css to be included in your page. */

.fg-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.fg-stat-card {
    padding: 1.5rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.fg-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.fg-stat-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fg-text-muted);
}

.fg-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fg-stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--fg-font-heading);
    color: var(--fg-text-main);
    margin-bottom: 1rem;
}

.fg-stat-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.fg-trend {
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.fg-trend-up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.fg-trend-down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.fg-trend-label {
    color: var(--fg-text-muted);
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.fg-stat-card {
    padding: 1.5rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.fg-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.fg-stat-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fg-text-muted);
}

.fg-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fg-stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--fg-font-heading);
    color: var(--fg-text-main);
    margin-bottom: 1rem;
}

.fg-stat-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.fg-trend {
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.fg-trend-up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.fg-trend-down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.fg-trend-label {
    color: var(--fg-text-muted);
}

Frosted Pricing Card

HTML 
<div class="fg-pricing-card fg-glass">
    <div class="fg-pricing-header">
        <h3 class="fg-pricing-title">Pro Plan</h3>
        <p class="fg-pricing-desc">Perfect for growing teams and businesses.</p>
        <div class="fg-pricing-price">
            <span class="fg-currency">$</span>
            <span class="fg-amount">49</span>
            <span class="fg-period">/mo</span>
        </div>
    </div>
    <div class="fg-pricing-features">
        <ul>
            <li>
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--fg-primary)" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                Up to 10 users
            </li>
            <li>
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--fg-primary)" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                50GB Storage
            </li>
            <li>
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--fg-primary)" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                Priority Email Support
            </li>
            <li>
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--fg-primary)" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                Advanced Analytics
            </li>
            <li class="fg-feature-disabled">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                Custom Domain
            </li>
        </ul>
    </div>
    <div class="fg-pricing-footer">
        <button class="fg-btn fg-btn-primary fg-btn-block">Choose Pro</button>
    </div>
</div>
CSS (Component Only) 
/* Component: Frosted Pricing Card */
/* NOTE: This component requires base.css to be included in your page. */

.fg-pricing-card {
    max-width: 350px;
    margin: 0 auto;
    padding: 2.5rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.fg-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
}

.fg-pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.fg-pricing-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--fg-text-main);
}

.fg-pricing-desc {
    font-size: 0.9rem;
    color: var(--fg-text-muted);
    margin-bottom: 1.5rem;
}

.fg-pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--fg-text-main);
}

.fg-currency {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-right: 0.2rem;
}

.fg-amount {
    font-size: 4rem;
    font-family: var(--fg-font-heading);
    font-weight: 800;
    line-height: 1;
}

.fg-period {
    color: var(--fg-text-muted);
    margin-bottom: 0.5rem;
    margin-left: 0.2rem;
}

.fg-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fg-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--fg-text-main);
}

.fg-feature-disabled {
    color: var(--fg-text-muted) !important;
    opacity: 0.6;
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-pricing-card {
    max-width: 350px;
    margin: 0 auto;
    padding: 2.5rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.fg-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
}

.fg-pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.fg-pricing-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--fg-text-main);
}

.fg-pricing-desc {
    font-size: 0.9rem;
    color: var(--fg-text-muted);
    margin-bottom: 1.5rem;
}

.fg-pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--fg-text-main);
}

.fg-currency {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-right: 0.2rem;
}

.fg-amount {
    font-size: 4rem;
    font-family: var(--fg-font-heading);
    font-weight: 800;
    line-height: 1;
}

.fg-period {
    color: var(--fg-text-muted);
    margin-bottom: 0.5rem;
    margin-left: 0.2rem;
}

.fg-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fg-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--fg-text-main);
}

.fg-feature-disabled {
    color: var(--fg-text-muted) !important;
    opacity: 0.6;
}

Tables

Frosted Data Grid

HTML 
<div class="fg-table-wrapper fg-glass">
    <div class="fg-table-header">
        <h3>Recent Transactions</h3>
        <button class="fg-btn fg-btn-outline" style="padding: 0.5rem 1rem; font-size: 0.85rem;">Export CSV</button>
    </div>
    <div class="fg-table-container">
        <table class="fg-table">
            <thead>
                <tr>
                    <th>Transaction ID</th>
                    <th>Customer</th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>#TRX-8492</td>
                    <td>
                        <div class="fg-table-user">
                            <img src="https://i.pravatar.cc/150?img=11" alt="Avatar">
                            <span>Michael Chen</span>
                        </div>
                    </td>
                    <td>Oct 24, 2023</td>
                    <td>$450.00</td>
                    <td><span class="fg-status fg-status-success">Completed</span></td>
                </tr>
                <tr>
                    <td>#TRX-8493</td>
                    <td>
                        <div class="fg-table-user">
                            <img src="https://i.pravatar.cc/150?img=47" alt="Avatar">
                            <span>Sarah Jenkins</span>
                        </div>
                    </td>
                    <td>Oct 24, 2023</td>
                    <td>$120.50</td>
                    <td><span class="fg-status fg-status-pending">Pending</span></td>
                </tr>
                <tr>
                    <td>#TRX-8494</td>
                    <td>
                        <div class="fg-table-user">
                            <img src="https://i.pravatar.cc/150?img=12" alt="Avatar">
                            <span>David Smith</span>
                        </div>
                    </td>
                    <td>Oct 23, 2023</td>
                    <td>$890.00</td>
                    <td><span class="fg-status fg-status-success">Completed</span></td>
                </tr>
                <tr>
                    <td>#TRX-8495</td>
                    <td>
                        <div class="fg-table-user">
                            <img src="https://i.pravatar.cc/150?img=41" alt="Avatar">
                            <span>Emily Davis</span>
                        </div>
                    </td>
                    <td>Oct 22, 2023</td>
                    <td>$65.00</td>
                    <td><span class="fg-status fg-status-failed">Failed</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="fg-table-pagination">
        <span class="fg-text-muted">Showing 1 to 4 of 24 entries</span>
        <div class="fg-pagination-controls">
            <button class="fg-btn fg-btn-ghost" disabled>Prev</button>
            <button class="fg-btn fg-btn-primary" style="padding: 0.4rem 0.8rem; border-radius: 8px;">1</button>
            <button class="fg-btn fg-btn-ghost">2</button>
            <button class="fg-btn fg-btn-ghost">3</button>
            <button class="fg-btn fg-btn-ghost">Next</button>
        </div>
    </div>
</div>
CSS (Component Only) 
/* Component: Frosted Data Grid */
/* NOTE: This component requires base.css to be included in your page. */

.fg-table-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
}

.fg-table-header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.fg-table-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.fg-table-container {
    width: 100%;
    overflow-x: auto;
}

.fg-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.fg-table th {
    text-align: left;
    padding: 1rem 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.2);
}

.fg-table td {
    padding: 1rem 2rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--fg-text-main);
    vertical-align: middle;
}

.fg-table tbody tr:last-child td {
    border-bottom: none;
}

.fg-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-table-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fg-table-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
}

.fg-table-user span {
    font-weight: 500;
}

.fg-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.fg-status-success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.fg-status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.fg-status-failed {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.fg-table-pagination {
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

.fg-pagination-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.fg-pagination-controls .fg-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .fg-table-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .fg-table-pagination { flex-direction: column; gap: 1rem; text-align: center; }
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-table-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
}

.fg-table-header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.fg-table-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.fg-table-container {
    width: 100%;
    overflow-x: auto;
}

.fg-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.fg-table th {
    text-align: left;
    padding: 1rem 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.2);
}

.fg-table td {
    padding: 1rem 2rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--fg-text-main);
    vertical-align: middle;
}

.fg-table tbody tr:last-child td {
    border-bottom: none;
}

.fg-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-table-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fg-table-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
}

.fg-table-user span {
    font-weight: 500;
}

.fg-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.fg-status-success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.fg-status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.fg-status-failed {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.fg-table-pagination {
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

.fg-pagination-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.fg-pagination-controls .fg-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .fg-table-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .fg-table-pagination { flex-direction: column; gap: 1rem; text-align: center; }
}

Lists

Frosted Activity Feed

HTML 
<div class="fg-activity-feed fg-glass">
    <div class="fg-feed-header">
        <h3>Recent Activity</h3>
        <button class="fg-btn fg-btn-ghost" style="padding: 0.5rem; font-size: 0.85rem;">Mark all as read</button>
    </div>
    <ul class="fg-feed-list">
        <li class="fg-feed-item unread">
            <div class="fg-feed-icon" style="background: rgba(234, 88, 12, 0.15); color: var(--fg-primary);">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
            </div>
            <div class="fg-feed-content">
                <p><strong>Sarah Jenkins</strong> commented on your post</p>
                <span class="fg-feed-time">2 hours ago</span>
            </div>
            <div class="fg-unread-dot"></div>
        </li>
        <li class="fg-feed-item unread">
            <div class="fg-feed-icon" style="background: rgba(225, 29, 72, 0.15); color: var(--fg-accent);">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
            </div>
            <div class="fg-feed-content">
                <p><strong>Michael Chen</strong> liked your photo</p>
                <span class="fg-feed-time">4 hours ago</span>
            </div>
            <div class="fg-unread-dot"></div>
        </li>
        <li class="fg-feed-item">
            <div class="fg-feed-icon" style="background: rgba(16, 185, 129, 0.15); color: #059669;">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
            </div>
            <div class="fg-feed-content">
                <p>System successfully updated to version 2.4</p>
                <span class="fg-feed-time">Yesterday at 4:30 PM</span>
            </div>
        </li>
        <li class="fg-feed-item">
            <div class="fg-feed-icon" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
            </div>
            <div class="fg-feed-content">
                <p><strong>Emily Davis</strong> joined the team</p>
                <span class="fg-feed-time">Oct 22, 2023</span>
            </div>
        </li>
    </ul>
    <div class="fg-feed-footer">
        <a href="#" class="fg-btn fg-btn-ghost fg-btn-block">View All Activity</a>
    </div>
</div>
CSS (Component Only) 
/* Component: Frosted Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */

.fg-activity-feed {
    max-width: 500px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
}

.fg-feed-header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.fg-feed-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.fg-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fg-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    transition: background 0.2s ease;
}

.fg-feed-item:last-child {
    border-bottom: none;
}

.fg-feed-item:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-feed-item.unread {
    background: rgba(255, 255, 255, 0.15);
}

.fg-feed-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fg-feed-content {
    flex: 1;
}

.fg-feed-content p {
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
    color: var(--fg-text-main);
}

.fg-feed-content strong {
    font-weight: 600;
}

.fg-feed-time {
    font-size: 0.8rem;
    color: var(--fg-text-muted);
}

.fg-unread-dot {
    width: 8px;
    height: 8px;
    background: var(--fg-primary);
    border-radius: 50%;
    margin-top: 0.5rem;
}

.fg-feed-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-activity-feed {
    max-width: 500px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
}

.fg-feed-header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.fg-feed-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.fg-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fg-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    transition: background 0.2s ease;
}

.fg-feed-item:last-child {
    border-bottom: none;
}

.fg-feed-item:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-feed-item.unread {
    background: rgba(255, 255, 255, 0.15);
}

.fg-feed-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fg-feed-content {
    flex: 1;
}

.fg-feed-content p {
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
    color: var(--fg-text-main);
}

.fg-feed-content strong {
    font-weight: 600;
}

.fg-feed-time {
    font-size: 0.8rem;
    color: var(--fg-text-muted);
}

.fg-unread-dot {
    width: 8px;
    height: 8px;
    background: var(--fg-primary);
    border-radius: 50%;
    margin-top: 0.5rem;
}

.fg-feed-footer {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

Modals

Frosted Confirmation Modal

HTML 
<!-- Note: For preview purposes, the modal is shown inline. In production, wrap this in a fixed overlay. -->
<div class="fg-modal-wrapper">
    <div class="fg-modal fg-glass">
        <div class="fg-modal-icon">
            <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
        </div>
        <div class="fg-modal-content">
            <h3 class="fg-modal-title">Delete Account</h3>
            <p class="fg-modal-desc">Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.</p>
        </div>
        <div class="fg-modal-actions">
            <button class="fg-btn fg-btn-ghost">Cancel</button>
            <button class="fg-btn" style="background: var(--fg-accent); color: white; box-shadow: 0 4px 15px var(--fg-accent-glow);">Delete Account</button>
        </div>
    </div>
</div>
CSS (Component Only) 
/* Component: Frosted Confirmation Modal */
/* NOTE: This component requires base.css to be included in your page. */

.fg-modal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.fg-modal {
    max-width: 480px;
    width: 100%;
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.fg-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(225, 29, 72, 0.1);
    color: var(--fg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.fg-modal-icon svg {
    width: 32px;
    height: 32px;
}

.fg-modal-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--fg-text-main);
}

.fg-modal-desc {
    color: var(--fg-text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.fg-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.fg-modal-actions .fg-btn {
    flex: 1;
}

@media (max-width: 480px) {
    .fg-modal-actions {
        flex-direction: column;
    }
}
Combined CSS (Includes Base) 
/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fg-primary: #ea580c; /* Orange 600 */
    --fg-primary-glow: rgba(234, 88, 12, 0.4);
    --fg-accent: #e11d48; /* Rose 600 */
    --fg-accent-glow: rgba(225, 29, 72, 0.4);
    
    /* Light frosted glass tokens */
    --fg-glass-bg: rgba(255, 255, 255, 0.45);
    --fg-glass-border: rgba(255, 255, 255, 0.6);
    --fg-glass-blur: blur(24px);
    
    /* Text colors for light theme */
    --fg-text-main: #1f2937; /* Gray 800 */
    --fg-text-muted: #4b5563; /* Gray 600 */
    
    --fg-font-heading: 'Poppins', sans-serif;
    --fg-font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    font-family: var(--fg-font-body);
    color: var(--fg-text-main);
    background-color: #ffedd5; /* Warm orange light base */
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(253, 164, 175, 0.8) 0%, transparent 50%), /* Rose 300 */
        radial-gradient(circle at 90% 80%, rgba(253, 186, 116, 0.8) 0%, transparent 50%), /* Orange 300 */
        radial-gradient(circle at 50% 50%, rgba(252, 211, 77, 0.6) 0%, transparent 60%); /* Amber 300 */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Frosted Glass Utility */
.fg-glass {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur) saturate(160%);
    -webkit-backdrop-filter: var(--fg-glass-blur) saturate(160%);
    border: 1px solid var(--fg-glass-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* Global Buttons */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fg-font-heading);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    color: white;
    box-shadow: 0 6px 20px var(--fg-primary-glow);
}

.fg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--fg-primary-glow);
    filter: brightness(1.05);
}

.fg-btn-outline {
    background: var(--fg-glass-bg);
    backdrop-filter: var(--fg-glass-blur);
    -webkit-backdrop-filter: var(--fg-glass-blur);
    border: 1px solid var(--fg-glass-border);
    color: var(--fg-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.fg-btn-outline:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.fg-btn-ghost {
    background: transparent;
    color: var(--fg-text-main);
}

.fg-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fg-btn-block {
    width: 100%;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fg-font-heading);
    margin: 0;
    color: var(--fg-text-main);
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--fg-text-muted);
}

.fg-text-gradient {
    background: linear-gradient(135deg, var(--fg-primary) 0%, var(--fg-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --- COMPONENT STYLES --- */
.fg-modal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.fg-modal {
    max-width: 480px;
    width: 100%;
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.fg-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(225, 29, 72, 0.1);
    color: var(--fg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.fg-modal-icon svg {
    width: 32px;
    height: 32px;
}

.fg-modal-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--fg-text-main);
}

.fg-modal-desc {
    color: var(--fg-text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.fg-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.fg-modal-actions .fg-btn {
    flex: 1;
}

@media (max-width: 480px) {
    .fg-modal-actions {
        flex-direction: column;
    }
}

Footers