Pastel Elegance - Free HTML/CSS UI Kit

Color Palette

Soft Lavender #E8E5F4

Sage Mint #E2ECE9

Pale Peach #FCECE7

Sky Blue #E3ECF5

Warm Cream #FAF9F5

Dark Charcoal #2A2F35

Typography

Navbars

Soft Simple Navbar

HTML

<nav class="ps-navbar ps-surface">
    <div class="ps-nav-container">
        <a href="#" class="ps-logo">
            <div class="ps-logo-icon bg-peach">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--ps-text)" stroke-width="2.2" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
            </div>
            <span>Pastel<span>Elegance</span></span>
        </a>
        
        <ul class="ps-nav-links">
            <li><a href="#" class="ps-nav-link active">Showcase</a></li>
            <li><a href="#" class="ps-nav-link">Designers</a></li>
            <li><a href="#" class="ps-nav-link">Resources</a></li>
            <li><a href="#" class="ps-nav-link">Journal</a></li>
        </ul>
        
        <div class="ps-nav-actions">
            <a href="#" class="ps-btn ps-btn-primary">Claim Spot</a>
        </div>
    </div>
</nav>

CSS (Component Only)

/* Component: Soft Simple Navbar */
/* NOTE: This component requires base.css to be included in your page. */

.ps-navbar {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem 2rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow-sm);
    border-radius: var(--ps-radius-full);
}

.ps-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ps-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.ps-nav-link {
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ps-text-muted);
    transition: var(--ps-transition);
    padding: 0.5rem 1rem;
    border-radius: var(--ps-radius-full);
}

.ps-nav-link:hover {
    color: var(--ps-text);
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-nav-link.active {
    color: var(--ps-text);
    background-color: var(--ps-lavender);
    font-weight: 600;
}

.ps-nav-actions {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .ps-nav-links {
        display: 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 --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-navbar {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem 2rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow-sm);
    border-radius: var(--ps-radius-full);
}

.ps-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ps-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.ps-nav-link {
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ps-text-muted);
    transition: var(--ps-transition);
    padding: 0.5rem 1rem;
    border-radius: var(--ps-radius-full);
}

.ps-nav-link:hover {
    color: var(--ps-text);
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-nav-link.active {
    color: var(--ps-text);
    background-color: var(--ps-lavender);
    font-weight: 600;
}

.ps-nav-actions {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .ps-nav-links {
        display: none;
    }
}

Elegant Sidebar Navigation

HTML

<aside class="ps-sidebar-container ps-surface">
    <div class="ps-sidebar-header">
        <a href="#" class="ps-logo">
            <div class="ps-logo-icon bg-peach">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--ps-text)" stroke-width="2.2" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
            </div>
            <span>Pastel<span>Elegance</span></span>
        </a>
    </div>
    
    <nav class="ps-sidebar-nav">
        <ul>
            <li>
                <a href="#" class="ps-sidebar-link active">
                    <span class="ps-sidebar-icon bg-lavender"><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><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></span>
                    Dashboard
                </a>
            </li>
            <li>
                <a href="#" class="ps-sidebar-link">
                    <span class="ps-sidebar-icon bg-sage"><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" 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></span>
                    Members
                </a>
            </li>
            <li>
                <a href="#" class="ps-sidebar-link">
                    <span class="ps-sidebar-icon bg-blue"><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg></span>
                    Projects
                </a>
            </li>
            <li>
                <a href="#" class="ps-sidebar-link">
                    <span class="ps-sidebar-icon bg-peach"><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><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 1 1-2.83 2.83l-.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-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-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 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 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 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></span>
                    Settings
                </a>
            </li>
        </ul>
    </nav>
    
    <div class="ps-sidebar-footer">
        <div class="ps-profile-card bg-lavender">
            <div class="ps-profile-avatar">
                <img src="https://i.pravatar.cc/100?img=47" alt="Avatar">
            </div>
            <div class="ps-profile-info">
                <h4>Clara Dupont</h4>
                <p>Curator</p>
            </div>
        </div>
    </div>
</aside>

CSS (Component Only)

/* Component: Elegant Sidebar Navigation */
/* NOTE: This component requires base.css to be included in your page. */

.ps-sidebar-container {
    width: 260px;
    height: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.25rem;
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-lg);
    box-shadow: var(--ps-shadow);
}

.ps-sidebar-header {
    margin-bottom: 2.5rem;
    padding-left: 0.5rem;
}

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

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

.ps-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.75rem;
    text-decoration: none;
    color: var(--ps-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--ps-radius);
    transition: var(--ps-transition);
}

.ps-sidebar-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ps-text);
    transition: var(--ps-transition);
    border: 1px solid rgba(42, 47, 53, 0.03);
    flex-shrink: 0;
}

.ps-sidebar-link:hover {
    color: var(--ps-text);
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-sidebar-link.active {
    color: var(--ps-text);
    background-color: var(--ps-bg);
}

.ps-sidebar-link.active .ps-sidebar-icon {
    box-shadow: var(--ps-shadow-sm);
    transform: scale(1.05);
}

.ps-sidebar-footer {
    margin-top: auto;
}

.ps-profile-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--ps-radius);
    border: 1px solid rgba(42, 47, 53, 0.04);
}

.ps-profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ps-surface);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

.ps-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-profile-info h4 {
    font-family: var(--ps-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
    color: var(--ps-text);
}

.ps-profile-info p {
    font-size: 0.75rem;
    color: var(--ps-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 --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-sidebar-container {
    width: 260px;
    height: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.25rem;
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-lg);
    box-shadow: var(--ps-shadow);
}

.ps-sidebar-header {
    margin-bottom: 2.5rem;
    padding-left: 0.5rem;
}

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

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

.ps-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.75rem;
    text-decoration: none;
    color: var(--ps-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--ps-radius);
    transition: var(--ps-transition);
}

.ps-sidebar-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ps-text);
    transition: var(--ps-transition);
    border: 1px solid rgba(42, 47, 53, 0.03);
    flex-shrink: 0;
}

.ps-sidebar-link:hover {
    color: var(--ps-text);
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-sidebar-link.active {
    color: var(--ps-text);
    background-color: var(--ps-bg);
}

.ps-sidebar-link.active .ps-sidebar-icon {
    box-shadow: var(--ps-shadow-sm);
    transform: scale(1.05);
}

.ps-sidebar-footer {
    margin-top: auto;
}

.ps-profile-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--ps-radius);
    border: 1px solid rgba(42, 47, 53, 0.04);
}

.ps-profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ps-surface);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

.ps-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-profile-info h4 {
    font-family: var(--ps-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
    color: var(--ps-text);
}

.ps-profile-info p {
    font-size: 0.75rem;
    color: var(--ps-text-muted);
}

Hero Sections

Dreamy Centered Hero

HTML

<header class="ps-hero-centered">
    <div class="ps-hero-content">
        <div class="ps-hero-tag bg-lavender text-lavender">Curated Aesthetic Design</div>
        <h1 class="ps-hero-title">
            Crafting soft spaces for <span class="ps-serif-highlight text-peach">mindful builders.</span>
        </h1>
        <p class="ps-hero-desc">
            A harmonious set of rounded pastel interfaces tailored to soothe your user journey. Open-source, lightweight, and completely customizable.
        </p>
        <div class="ps-hero-actions">
            <a href="#" class="ps-btn ps-btn-primary">Explore Workspace</a>
            <a href="#" class="ps-btn ps-btn-outline">Read Handbook</a>
        </div>
    </div>
    
    <div class="ps-hero-preview ps-surface">
        <div class="ps-preview-header">
            <div class="ps-preview-dots">
                <span class="ps-dot bg-lavender"></span>
                <span class="ps-dot bg-sage"></span>
                <span class="ps-dot bg-peach"></span>
            </div>
            <div class="ps-preview-title">Aesthetic Panel</div>
        </div>
        <div class="ps-preview-body">
            <div class="ps-preview-sidebar">
                <div class="ps-skeleton-nav">
                    <span class="ps-skeleton-item bg-lavender" style="width: 80%;"></span>
                    <span class="ps-skeleton-item bg-bg" style="width: 60%;"></span>
                    <span class="ps-skeleton-item bg-bg" style="width: 70%;"></span>
                </div>
            </div>
            <div class="ps-preview-main">
                <div class="ps-preview-cards">
                    <div class="ps-preview-card bg-sage">
                        <span class="ps-skeleton-heading bg-cream" style="width: 40%;"></span>
                        <span class="ps-skeleton-line bg-cream" style="width: 80%;"></span>
                    </div>
                    <div class="ps-preview-card bg-blue">
                        <span class="ps-skeleton-heading bg-cream" style="width: 50%;"></span>
                        <span class="ps-skeleton-line bg-cream" style="width: 70%;"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

CSS (Component Only)

/* Component: Dreamy Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */

.ps-hero-centered {
    max-width: 1000px;
    margin: 4rem auto;
    padding: 0 1.5rem;
    text-align: center;
}

.ps-hero-content {
    max-width: 750px;
    margin: 0 auto 3.5rem;
}

.ps-hero-tag {
    display: inline-block;
    padding: 0.4rem 1.15rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--ps-radius-full);
    margin-bottom: 1.5rem;
    border: 1px solid rgba(42, 47, 53, 0.02);
}

.ps-hero-centered .ps-hero-title {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--ps-text);
}

.ps-serif-highlight {
    font-style: italic;
    font-family: var(--ps-font-heading);
    font-weight: 500;
}

.ps-hero-centered .ps-hero-desc {
    font-size: 1.15rem;
    color: var(--ps-text-muted);
    margin-bottom: 2.25rem;
    line-height: 1.6;
}

.ps-hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Dashboard Mockup Preview */
.ps-hero-preview {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 !important;
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-lg);
    box-shadow: var(--ps-shadow-lg);
    overflow: hidden;
}

.ps-preview-header {
    padding: 1rem 1.5rem;
    background-color: var(--ps-bg);
    border-bottom: 1px solid var(--ps-border);
    display: flex;
    align-items: center;
    position: relative;
}

.ps-preview-dots {
    display: flex;
    gap: 0.4rem;
}

.ps-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ps-preview-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ps-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ps-preview-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: 280px;
}

.ps-preview-sidebar {
    background-color: #FAF9F6;
    border-right: 1px solid var(--ps-border);
    padding: 1.5rem;
}

.ps-skeleton-nav {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ps-skeleton-item {
    height: 12px;
    border-radius: var(--ps-radius-full);
}

.ps-preview-main {
    padding: 1.5rem;
    background-color: var(--ps-surface);
}

.ps-preview-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    height: 100%;
}

.ps-preview-card {
    border-radius: var(--ps-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid rgba(42, 47, 53, 0.02);
}

.ps-skeleton-heading {
    height: 14px;
    border-radius: var(--ps-radius-full);
}

.ps-skeleton-line {
    height: 8px;
    border-radius: var(--ps-radius-full);
}

@media (max-width: 768px) {
    .ps-hero-centered .ps-hero-title { font-size: 2.5rem; }
    .ps-preview-body { grid-template-columns: 1fr; }
    .ps-preview-sidebar { display: none; }
    .ps-hero-actions { flex-direction: column; align-items: stretch; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-hero-centered {
    max-width: 1000px;
    margin: 4rem auto;
    padding: 0 1.5rem;
    text-align: center;
}

.ps-hero-content {
    max-width: 750px;
    margin: 0 auto 3.5rem;
}

.ps-hero-tag {
    display: inline-block;
    padding: 0.4rem 1.15rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--ps-radius-full);
    margin-bottom: 1.5rem;
    border: 1px solid rgba(42, 47, 53, 0.02);
}

.ps-hero-centered .ps-hero-title {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--ps-text);
}

.ps-serif-highlight {
    font-style: italic;
    font-family: var(--ps-font-heading);
    font-weight: 500;
}

.ps-hero-centered .ps-hero-desc {
    font-size: 1.15rem;
    color: var(--ps-text-muted);
    margin-bottom: 2.25rem;
    line-height: 1.6;
}

.ps-hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Dashboard Mockup Preview */
.ps-hero-preview {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 !important;
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-lg);
    box-shadow: var(--ps-shadow-lg);
    overflow: hidden;
}

.ps-preview-header {
    padding: 1rem 1.5rem;
    background-color: var(--ps-bg);
    border-bottom: 1px solid var(--ps-border);
    display: flex;
    align-items: center;
    position: relative;
}

.ps-preview-dots {
    display: flex;
    gap: 0.4rem;
}

.ps-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ps-preview-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ps-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ps-preview-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: 280px;
}

.ps-preview-sidebar {
    background-color: #FAF9F6;
    border-right: 1px solid var(--ps-border);
    padding: 1.5rem;
}

.ps-skeleton-nav {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ps-skeleton-item {
    height: 12px;
    border-radius: var(--ps-radius-full);
}

.ps-preview-main {
    padding: 1.5rem;
    background-color: var(--ps-surface);
}

.ps-preview-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    height: 100%;
}

.ps-preview-card {
    border-radius: var(--ps-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid rgba(42, 47, 53, 0.02);
}

.ps-skeleton-heading {
    height: 14px;
    border-radius: var(--ps-radius-full);
}

.ps-skeleton-line {
    height: 8px;
    border-radius: var(--ps-radius-full);
}

@media (max-width: 768px) {
    .ps-hero-centered .ps-hero-title { font-size: 2.5rem; }
    .ps-preview-body { grid-template-columns: 1fr; }
    .ps-preview-sidebar { display: none; }
    .ps-hero-actions { flex-direction: column; align-items: stretch; }
}

Elegant Split Hero

HTML

<header class="ps-hero-split">
    <div class="ps-split-grid">
        <div class="ps-split-content">
            <div class="ps-hero-tag bg-blue text-blue">Curated Workspace</div>
            <h1 class="ps-split-title">
                Designs that feel like <span class="ps-serif-highlight text-lavender">a soft breath.</span>
            </h1>
            <p class="ps-split-desc">
                Organize your creative stack with premium drag-and-drop dashboards, calming calendar modules, and soft block layouts designed to inspire tranquility.
            </p>
            <div class="ps-split-actions">
                <a href="#" class="ps-btn ps-btn-primary">Initialize Suite</a>
                <a href="#" class="ps-btn ps-btn-outline">Watch Tour</a>
            </div>
        </div>
        
        <div class="ps-split-visual">
            <!-- Overlapping Soft Pastel Cards -->
            <div class="ps-visual-main ps-surface bg-sage">
                <div class="ps-visual-header">
                    <span class="ps-visual-title">Studio Activity</span>
                    <span class="ps-badge bg-cream">Live</span>
                </div>
                <div class="ps-visual-metric">94.8%</div>
                <p class="ps-visual-desc text-sage">Overall designer tranquil score this cycle.</p>
            </div>
            
            <div class="ps-visual-overlay ps-surface bg-lavender">
                <div class="ps-profile-card" style="border: none; padding: 0;">
                    <div class="ps-profile-avatar" style="border-color: var(--ps-lavender);">
                        <img src="https://i.pravatar.cc/100?img=11" alt="Avatar">
                    </div>
                    <div class="ps-profile-info">
                        <h4 style="font-size: 0.9rem;">Alex Moreau</h4>
                        <p style="font-size: 0.75rem; color: #8E89B5;">Designer in Chief</p>
                    </div>
                </div>
            </div>
            
            <div class="ps-visual-dot bg-peach"></div>
        </div>
    </div>
</header>

CSS (Component Only)

/* Component: Elegant Split Hero */
/* NOTE: This component requires base.css to be included in your page. */

.ps-hero-split {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.ps-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 5rem;
    align-items: center;
}

.ps-split-content {
    text-align: left;
}

.ps-split-title {
    font-size: 3.25rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    color: var(--ps-text);
}

.ps-split-desc {
    font-size: 1.1rem;
    color: var(--ps-text-muted);
    margin-bottom: 2.25rem;
    line-height: 1.65;
}

.ps-split-actions {
    display: flex;
    gap: 1rem;
}

/* Overlapping Cards Visual */
.ps-split-visual {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-visual-main {
    width: 310px;
    padding: 1.75rem !important;
    position: absolute;
    top: 1.5rem;
    left: 0.75rem;
    z-index: 2;
    transform: rotate(-3.5deg);
    border-radius: var(--ps-radius-lg) !important;
}

.ps-visual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.ps-visual-title {
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ps-text);
}

.ps-badge {
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--ps-radius-full);
    border: 1px solid rgba(42, 47, 53, 0.04);
}

.ps-visual-metric {
    font-family: var(--ps-font-heading);
    font-weight: 700;
    font-size: 3.5rem;
    color: var(--ps-text);
    margin-bottom: 1rem;
    line-height: 1;
}

.ps-visual-desc {
    max-width: 58%;
    line-height: 1.5;
    font-size: 0.85rem;
}

.ps-visual-overlay {
    width: 210px;
    padding: 1rem !important;
    position: absolute;
    bottom: 1.5rem;
    right: 0.75rem;
    z-index: 3;
    transform: rotate(2deg);
    box-shadow: var(--ps-shadow-lg) !important;
    border-radius: var(--ps-radius) !important;
}

.ps-visual-dot {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    right: 4rem;
    z-index: 1;
    opacity: 0.7;
    filter: blur(2px);
    box-shadow: 0 8px 24px rgba(247, 220, 211, 0.4);
}

@media (max-width: 900px) {
    .ps-split-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
    .ps-split-content {
        text-align: center;
    }
    .ps-split-actions {
        justify-content: center;
    }
    .ps-split-visual {
        margin: 0 auto;
        max-width: 450px;
    }
}

@media (max-width: 480px) {
    .ps-split-title { font-size: 2.25rem; }
    .ps-visual-main { width: 280px; left: 0; }
    .ps-visual-overlay { width: 200px; right: 0; }
    .ps-split-actions { flex-direction: column; align-items: stretch; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-hero-split {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.ps-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 5rem;
    align-items: center;
}

.ps-split-content {
    text-align: left;
}

.ps-split-title {
    font-size: 3.25rem;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    color: var(--ps-text);
}

.ps-split-desc {
    font-size: 1.1rem;
    color: var(--ps-text-muted);
    margin-bottom: 2.25rem;
    line-height: 1.65;
}

.ps-split-actions {
    display: flex;
    gap: 1rem;
}

/* Overlapping Cards Visual */
.ps-split-visual {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-visual-main {
    width: 310px;
    padding: 1.75rem !important;
    position: absolute;
    top: 1.5rem;
    left: 0.75rem;
    z-index: 2;
    transform: rotate(-3.5deg);
    border-radius: var(--ps-radius-lg) !important;
}

.ps-visual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.ps-visual-title {
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ps-text);
}

.ps-badge {
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--ps-radius-full);
    border: 1px solid rgba(42, 47, 53, 0.04);
}

.ps-visual-metric {
    font-family: var(--ps-font-heading);
    font-weight: 700;
    font-size: 3.5rem;
    color: var(--ps-text);
    margin-bottom: 1rem;
    line-height: 1;
}

.ps-visual-desc {
    max-width: 58%;
    line-height: 1.5;
    font-size: 0.85rem;
}

.ps-visual-overlay {
    width: 210px;
    padding: 1rem !important;
    position: absolute;
    bottom: 1.5rem;
    right: 0.75rem;
    z-index: 3;
    transform: rotate(2deg);
    box-shadow: var(--ps-shadow-lg) !important;
    border-radius: var(--ps-radius) !important;
}

.ps-visual-dot {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    right: 4rem;
    z-index: 1;
    opacity: 0.7;
    filter: blur(2px);
    box-shadow: 0 8px 24px rgba(247, 220, 211, 0.4);
}

@media (max-width: 900px) {
    .ps-split-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
    .ps-split-content {
        text-align: center;
    }
    .ps-split-actions {
        justify-content: center;
    }
    .ps-split-visual {
        margin: 0 auto;
        max-width: 450px;
    }
}

@media (max-width: 480px) {
    .ps-split-title { font-size: 2.25rem; }
    .ps-visual-main { width: 280px; left: 0; }
    .ps-visual-overlay { width: 200px; right: 0; }
    .ps-split-actions { flex-direction: column; align-items: stretch; }
}

Buttons

Elegant Primary Buttons

HTML

<div class="ps-btn-group">
    <button class="ps-btn ps-btn-primary">Explore Studio</button>
    <button class="ps-btn ps-btn-accent">Schedule Session</button>
    <button class="ps-btn ps-btn-primary">
        <span>Curate Ideas</span>
        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
    </button>
</div>

CSS (Component Only)

/* Component: Elegant Primary Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.ps-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

@media (max-width: 480px) {
    .ps-btn-group {
        flex-direction: column;
        align-items: stretch;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

@media (max-width: 480px) {
    .ps-btn-group {
        flex-direction: column;
        align-items: stretch;
    }
}

Soft Outline Buttons

HTML

<div class="ps-btn-group">
    <button class="ps-btn ps-btn-outline">Return to Collection</button>
    <button class="ps-btn ps-btn-ghost">View Details</button>
    <button class="ps-btn ps-btn-circle ps-btn-outline" aria-label="Social Link">
        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.2" fill="none"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
    </button>
</div>

CSS (Component Only)

/* Component: Soft Outline Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.ps-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.ps-btn-circle svg {
    display: block;
}

@media (max-width: 480px) {
    .ps-btn-group {
        flex-direction: column;
        align-items: stretch;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.ps-btn-circle svg {
    display: block;
}

@media (max-width: 480px) {
    .ps-btn-group {
        flex-direction: column;
        align-items: stretch;
    }
}

Forms

Dreamy Login Form

HTML

<div class="ps-login-card ps-surface">
    <div class="ps-login-header">
        <h2>Restore Session</h2>
        <p>Enter your credentials to access your studio workspace.</p>
    </div>
    
    <form class="ps-login-form" onsubmit="return false;">
        <div class="ps-form-group">
            <label class="ps-label" for="login-email">Email Address</label>
            <input type="email" id="login-email" class="ps-input" placeholder="[email protected]" required>
        </div>
        
        <div class="ps-form-group">
            <label class="ps-label" for="login-password">Password</label>
            <input type="password" id="login-password" class="ps-input" placeholder="••••••••" required>
        </div>
        
        <div class="ps-form-options">
            <label class="ps-checkbox-container">
                <input type="checkbox" checked>
                <span class="ps-checkmark bg-lavender"></span>
                <span class="ps-checkbox-label">Keep me active</span>
            </label>
            <a href="#" class="ps-forgot-link">Lost password?</a>
        </div>
        
        <button type="submit" class="ps-btn ps-btn-primary ps-btn-block">Access Workspace</button>
    </form>
    
    <div class="ps-login-divider">
        <span>or sign in with</span>
    </div>
    
    <div class="ps-social-login">
        <button class="ps-btn ps-btn-circle ps-btn-outline" aria-label="Sign in with Google">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12.24 10.285V13.4h6.887C18.2 15.614 15.645 18 12.24 18c-3.86 0-7-3.14-7-7s3.14-7 7-7c1.7 0 3.3.6 4.6 1.8l2.4-2.4C17.3 1.7 14.9 1 12.24 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.8 0 9.8-4.1 9.8-10 0-.6 0-1.1-.1-1.7H12.24z"/></svg>
        </button>
        <button class="ps-btn ps-btn-circle ps-btn-outline" aria-label="Sign in with GitHub">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
        </button>
    </div>
</div>

CSS (Component Only)

/* Component: Dreamy Login Form */
/* NOTE: This component requires base.css to be included in your page. */

.ps-login-card {
    max-width: 440px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
}

.ps-login-header {
    text-align: center;
    margin-bottom: 2.25rem;
}

.ps-login-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.ps-login-header p {
    font-size: 0.95rem;
    color: var(--ps-text-muted);
}

.ps-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ps-form-group {
    display: flex;
    flex-direction: column;
}

.ps-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Custom Checkbox */
.ps-checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--ps-text-muted);
}

.ps-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.ps-checkmark {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid var(--ps-border-strong);
    display: inline-block;
    position: relative;
    transition: var(--ps-transition);
}

.ps-checkbox-container:hover input ~ .ps-checkmark {
    border-color: rgba(135, 120, 160, 0.4);
}

.ps-checkbox-container input:checked ~ .ps-checkmark {
    background-color: var(--ps-lavender);
    border-color: rgba(135, 120, 160, 0.2);
}

.ps-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--ps-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ps-checkbox-container input:checked ~ .ps-checkmark:after {
    display: block;
}

.ps-forgot-link {
    color: var(--ps-text-muted);
    text-decoration: none;
    font-weight: 600;
    transition: var(--ps-transition);
}

.ps-forgot-link:hover {
    color: #8E89B5; /* Lavender hover color */
}

/* Divider */
.ps-login-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.ps-login-divider:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--ps-border);
    z-index: 1;
}

.ps-login-divider span {
    background-color: var(--ps-surface);
    padding: 0 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ps-text-muted);
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Social Buttons */
.ps-social-login {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.ps-social-login .ps-btn-circle svg {
    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 --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-login-card {
    max-width: 440px;
    margin: 2rem auto;
    padding: 3rem 2.5rem;
}

.ps-login-header {
    text-align: center;
    margin-bottom: 2.25rem;
}

.ps-login-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.ps-login-header p {
    font-size: 0.95rem;
    color: var(--ps-text-muted);
}

.ps-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ps-form-group {
    display: flex;
    flex-direction: column;
}

.ps-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Custom Checkbox */
.ps-checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--ps-text-muted);
}

.ps-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.ps-checkmark {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid var(--ps-border-strong);
    display: inline-block;
    position: relative;
    transition: var(--ps-transition);
}

.ps-checkbox-container:hover input ~ .ps-checkmark {
    border-color: rgba(135, 120, 160, 0.4);
}

.ps-checkbox-container input:checked ~ .ps-checkmark {
    background-color: var(--ps-lavender);
    border-color: rgba(135, 120, 160, 0.2);
}

.ps-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--ps-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ps-checkbox-container input:checked ~ .ps-checkmark:after {
    display: block;
}

.ps-forgot-link {
    color: var(--ps-text-muted);
    text-decoration: none;
    font-weight: 600;
    transition: var(--ps-transition);
}

.ps-forgot-link:hover {
    color: #8E89B5; /* Lavender hover color */
}

/* Divider */
.ps-login-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.ps-login-divider:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--ps-border);
    z-index: 1;
}

.ps-login-divider span {
    background-color: var(--ps-surface);
    padding: 0 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ps-text-muted);
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Social Buttons */
.ps-social-login {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.ps-social-login .ps-btn-circle svg {
    display: block;
}

Elegant Settings Form

HTML

<div class="ps-settings-card ps-surface">
    <div class="ps-settings-header">
        <h3>Studio Profile</h3>
        <p class="ps-settings-subtitle">Manage your public information and workspace preferences.</p>
    </div>
    
    <form class="ps-settings-form" onsubmit="return false;">
        <div class="ps-form-row">
            <div class="ps-form-group">
                <label class="ps-label" for="settings-first">First Name</label>
                <input type="text" id="settings-first" class="ps-input" value="Clara">
            </div>
            
            <div class="ps-form-group">
                <label class="ps-label" for="settings-last">Last Name</label>
                <input type="text" id="settings-last" class="ps-input" value="Dupont">
            </div>
        </div>
        
        <div class="ps-form-group">
            <label class="ps-label" for="settings-email">Email Address</label>
            <input type="email" id="settings-email" class="ps-input" value="[email protected]">
        </div>
        
        <div class="ps-form-group">
            <label class="ps-label" for="settings-bio">Biography</label>
            <textarea id="settings-bio" class="ps-input ps-textarea" rows="4">Curator of soft experiences and minimalist web interactions. Built with Plus Jakarta Sans and Playfair Display.</textarea>
        </div>
        
        <hr class="ps-divider-line">
        
        <div class="ps-toggle-group">
            <div class="ps-toggle-text">
                <h4>Tranquil Audio Alerts</h4>
                <p>Play smooth ambient chord updates for platform notifications.</p>
            </div>
            <label class="ps-toggle">
                <input type="checkbox" checked>
                <span class="ps-slider bg-sage"></span>
            </label>
        </div>
        
        <div class="ps-settings-actions">
            <button type="button" class="ps-btn ps-btn-outline">Reset Changes</button>
            <button type="submit" class="ps-btn ps-btn-primary">Save Configurations</button>
        </div>
    </form>
</div>

CSS (Component Only)

/* Component: Elegant Settings Form */
/* NOTE: This component requires base.css to be included in your page. */

.ps-settings-card {
    max-width: 600px;
    margin: 2rem auto;
    padding: 3rem;
}

.ps-settings-header {
    margin-bottom: 2.25rem;
}

.ps-settings-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.ps-settings-subtitle {
    font-size: 0.95rem;
    color: var(--ps-text-muted);
}

.ps-settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.ps-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.ps-divider-line {
    border: 0;
    height: 1px;
    background-color: var(--ps-border);
    margin: 0.75rem 0;
}

/* Custom Toggle Switch */
.ps-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.ps-toggle-text h4 {
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ps-toggle-text p {
    font-size: 0.85rem;
    color: var(--ps-text-muted);
}

.ps-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

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

.ps-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E2E8F0;
    transition: var(--ps-transition);
    border-radius: var(--ps-radius-full);
}

.ps-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: var(--ps-transition);
    border-radius: 50%;
    box-shadow: var(--ps-shadow-sm);
}

.ps-toggle input:checked + .ps-slider {
    background-color: var(--ps-sage-dark);
}

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

.ps-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .ps-form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ps-settings-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-settings-card {
    max-width: 600px;
    margin: 2rem auto;
    padding: 3rem;
}

.ps-settings-header {
    margin-bottom: 2.25rem;
}

.ps-settings-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.ps-settings-subtitle {
    font-size: 0.95rem;
    color: var(--ps-text-muted);
}

.ps-settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.ps-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.ps-divider-line {
    border: 0;
    height: 1px;
    background-color: var(--ps-border);
    margin: 0.75rem 0;
}

/* Custom Toggle Switch */
.ps-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.ps-toggle-text h4 {
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ps-toggle-text p {
    font-size: 0.85rem;
    color: var(--ps-text-muted);
}

.ps-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

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

.ps-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E2E8F0;
    transition: var(--ps-transition);
    border-radius: var(--ps-radius-full);
}

.ps-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: var(--ps-transition);
    border-radius: 50%;
    box-shadow: var(--ps-shadow-sm);
}

.ps-toggle input:checked + .ps-slider {
    background-color: var(--ps-sage-dark);
}

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

.ps-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .ps-form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ps-settings-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

Cards

Soft Stats Card

HTML

<div class="ps-stats-grid">
    <div class="ps-stat-card ps-surface bg-sage">
        <div class="ps-stat-header">
            <span class="ps-stat-title">Design Subscriptions</span>
            <div class="ps-stat-icon">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.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="ps-stat-value">1,482</div>
        <div class="ps-stat-footer">
            <span class="ps-trend ps-trend-up">
                <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3" fill="none"><polyline points="18 15 12 9 6 15"></polyline></svg>
                12%
            </span>
            <span class="ps-trend-label text-sage">since last curation</span>
        </div>
    </div>
    
    <div class="ps-stat-card ps-surface bg-lavender">
        <div class="ps-stat-header">
            <span class="ps-stat-title">Creative Hours</span>
            <div class="ps-stat-icon">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.2" fill="none"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
            </div>
        </div>
        <div class="ps-stat-value">342.5</div>
        <div class="ps-stat-footer">
            <span class="ps-trend ps-trend-up">
                <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3" fill="none"><polyline points="18 15 12 9 6 15"></polyline></svg>
                8.4%
            </span>
            <span class="ps-trend-label text-lavender">highly focused hours</span>
        </div>
    </div>
    
    <div class="ps-stat-card ps-surface bg-peach">
        <div class="ps-stat-header">
            <span class="ps-stat-title">Active Collaborations</span>
            <div class="ps-stat-icon">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.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>
        <div class="ps-stat-value">28</div>
        <div class="ps-stat-footer">
            <span class="ps-trend ps-trend-down">
                <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="3" fill="none"><polyline points="6 9 12 15 18 9"></polyline></svg>
                2%
            </span>
            <span class="ps-trend-label text-peach">seasonal standard shift</span>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Stats Card */
/* NOTE: This component requires base.css to be included in your page. */

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

.ps-stat-card {
    display: flex;
    flex-direction: column;
    padding: 2.25rem !important;
    border-radius: var(--ps-radius-lg) !important;
    border: 1px solid rgba(42, 47, 53, 0.02) !important;
}

.ps-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ps-shadow-lg);
}

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

.ps-stat-title {
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ps-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ps-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow-sm);
    color: var(--ps-text);
    flex-shrink: 0;
}

.ps-stat-value {
    font-family: var(--ps-font-heading);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--ps-text);
    margin-bottom: 1.25rem;
    line-height: 1;
}

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

.ps-trend {
    font-family: var(--ps-font-body);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ps-radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow-sm);
}

.ps-trend-up {
    color: #4D8F7F; /* Sage-green tint */
}

.ps-trend-down {
    color: #C68975; /* Peach-red tint */
}

.ps-trend-label {
    font-weight: 500;
    opacity: 0.8;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


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

.ps-stat-card {
    display: flex;
    flex-direction: column;
    padding: 2.25rem !important;
    border-radius: var(--ps-radius-lg) !important;
    border: 1px solid rgba(42, 47, 53, 0.02) !important;
}

.ps-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ps-shadow-lg);
}

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

.ps-stat-title {
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ps-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ps-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow-sm);
    color: var(--ps-text);
    flex-shrink: 0;
}

.ps-stat-value {
    font-family: var(--ps-font-heading);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--ps-text);
    margin-bottom: 1.25rem;
    line-height: 1;
}

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

.ps-trend {
    font-family: var(--ps-font-body);
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ps-radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow-sm);
}

.ps-trend-up {
    color: #4D8F7F; /* Sage-green tint */
}

.ps-trend-down {
    color: #C68975; /* Peach-red tint */
}

.ps-trend-label {
    font-weight: 500;
    opacity: 0.8;
}

Dreamy Pricing Card

HTML

<div class="ps-pricing-card ps-surface">
    <div class="ps-pricing-accent bg-peach"></div>
    
    <div class="ps-pricing-header">
        <h3 class="ps-pricing-title">Studio Curator</h3>
        <p class="ps-pricing-desc">Perfect for growing creators seeking soft aesthetic stacks.</p>
        <div class="ps-pricing-price">
            <span class="ps-currency">$</span>
            <span class="ps-amount">49</span>
            <span class="ps-period">/mo</span>
        </div>
    </div>
    
    <div class="ps-pricing-features">
        <ul>
            <li>
                <div class="ps-check bg-sage">
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="var(--ps-text)" stroke-width="3" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                15 Curated Design Workspaces
            </li>
            <li>
                <div class="ps-check bg-sage">
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="var(--ps-text)" stroke-width="3" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                Soft Chord Ambient Soundscapes
            </li>
            <li>
                <div class="ps-check bg-sage">
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="var(--ps-text)" stroke-width="3" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                Custom Pastel Subdomains
            </li>
            <li class="ps-feature-disabled">
                <div class="ps-check-disabled">
                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </div>
                Dedicated Personal Design Curator
            </li>
        </ul>
    </div>
    
    <div class="ps-pricing-footer">
        <button class="ps-btn ps-btn-primary ps-btn-block">Initialize Workspace</button>
    </div>
</div>

CSS (Component Only)

/* Component: Dreamy Pricing Card */
/* NOTE: This component requires base.css to be included in your page. */

.ps-pricing-card {
    max-width: 380px;
    margin: 2rem auto;
    padding: 3rem 2.25rem 2.25rem;
    position: relative;
    box-shadow: var(--ps-shadow);
    overflow: hidden;
    border-radius: var(--ps-radius-lg) !important;
}

.ps-pricing-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    border-bottom: 1px solid var(--ps-border);
}

.ps-pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ps-border);
}

.ps-pricing-title {
    font-size: 1.85rem;
    margin-bottom: 0.5rem;
}

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

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

.ps-currency {
    font-family: var(--ps-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    margin-right: 0.2rem;
}

.ps-amount {
    font-family: var(--ps-font-heading);
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1;
}

.ps-period {
    font-family: var(--ps-font-body);
    font-weight: 600;
    color: var(--ps-text-muted);
    margin-bottom: 0.4rem;
    margin-left: 0.2rem;
}

.ps-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.ps-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.03);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

.ps-check-disabled {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F1F5F9;
    color: #94A3B8;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.ps-feature-disabled {
    color: var(--ps-text-muted) !important;
    text-decoration: line-through;
    opacity: 0.55;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-pricing-card {
    max-width: 380px;
    margin: 2rem auto;
    padding: 3rem 2.25rem 2.25rem;
    position: relative;
    box-shadow: var(--ps-shadow);
    overflow: hidden;
    border-radius: var(--ps-radius-lg) !important;
}

.ps-pricing-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    border-bottom: 1px solid var(--ps-border);
}

.ps-pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ps-border);
}

.ps-pricing-title {
    font-size: 1.85rem;
    margin-bottom: 0.5rem;
}

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

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

.ps-currency {
    font-family: var(--ps-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    margin-right: 0.2rem;
}

.ps-amount {
    font-family: var(--ps-font-heading);
    font-size: 3.75rem;
    font-weight: 700;
    line-height: 1;
}

.ps-period {
    font-family: var(--ps-font-body);
    font-weight: 600;
    color: var(--ps-text-muted);
    margin-bottom: 0.4rem;
    margin-left: 0.2rem;
}

.ps-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.ps-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.03);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

.ps-check-disabled {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F1F5F9;
    color: #94A3B8;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.ps-feature-disabled {
    color: var(--ps-text-muted) !important;
    text-decoration: line-through;
    opacity: 0.55;
}

Tables

Elegant Data Table

HTML

<div class="ps-table-wrapper ps-surface">
    <div class="ps-table-header">
        <h3>Creative Catalog</h3>
        <button class="ps-btn ps-btn-outline" style="padding: 0.5rem 1.25rem; font-size: 0.85rem;">Export Sheet</button>
    </div>
    
    <div class="ps-table-container">
        <table class="ps-table">
            <thead>
                <tr>
                    <th>Curator ID</th>
                    <th>Artist</th>
                    <th>Date Inducted</th>
                    <th>Space Capacity</th>
                    <th>Curation Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>#CR-8492</td>
                    <td>
                        <div class="ps-table-user">
                            <div class="ps-table-avatar">
                                <img src="https://i.pravatar.cc/150?img=11" alt="Avatar">
                            </div>
                            <span>Michael Chen</span>
                        </div>
                    </td>
                    <td>Oct 24, 2026</td>
                    <td>14,800 MB</td>
                    <td><span class="ps-status ps-status-success">ACTIVE</span></td>
                </tr>
                
                <tr>
                    <td>#CR-8493</td>
                    <td>
                        <div class="ps-table-user">
                            <div class="ps-table-avatar">
                                <img src="https://i.pravatar.cc/150?img=47" alt="Avatar">
                            </div>
                            <span>Clara Dupont</span>
                        </div>
                    </td>
                    <td>Oct 24, 2026</td>
                    <td>2,340 MB</td>
                    <td><span class="ps-status ps-status-pending">PENDING</span></td>
                </tr>
                
                <tr>
                    <td>#CR-8494</td>
                    <td>
                        <div class="ps-table-user">
                            <div class="ps-table-avatar">
                                <img src="https://i.pravatar.cc/150?img=12" alt="Avatar">
                            </div>
                            <span>David Smith</span>
                        </div>
                    </td>
                    <td>Oct 23, 2026</td>
                    <td>9,240 MB</td>
                    <td><span class="ps-status ps-status-success">ACTIVE</span></td>
                </tr>
                
                <tr>
                    <td>#CR-8495</td>
                    <td>
                        <div class="ps-table-user">
                            <div class="ps-table-avatar">
                                <img src="https://i.pravatar.cc/150?img=41" alt="Avatar">
                            </div>
                            <span>Emily Davis</span>
                        </div>
                    </td>
                    <td>Oct 22, 2026</td>
                    <td>450 MB</td>
                    <td><span class="ps-status ps-status-failed">CANCELLED</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="ps-table-pagination">
        <span class="ps-text-muted" style="font-size: 0.85rem; font-weight: 500;">Showing 1 to 4 of 24 records</span>
        <div class="ps-pagination-controls">
            <button class="ps-btn ps-btn-ghost" disabled style="padding: 0.4rem 1rem; font-size: 0.85rem;">Prev</button>
            <button class="ps-btn ps-btn-primary" style="padding: 0.4rem 1rem; font-size: 0.85rem; min-width: 32px; height: 32px;">1</button>
            <button class="ps-btn ps-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.85rem; min-width: 32px; height: 32px;">2</button>
            <button class="ps-btn ps-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.85rem; min-width: 32px; height: 32px;">3</button>
            <button class="ps-btn ps-btn-ghost" style="padding: 0.4rem 1rem; font-size: 0.85rem;">Next</button>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Elegant Data Table */
/* NOTE: This component requires base.css to be included in your page. */

.ps-table-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 !important;
    box-shadow: var(--ps-shadow);
    overflow: hidden;
    border-radius: var(--ps-radius-lg) !important;
}

.ps-table-header {
    padding: 1.75rem 2.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--ps-border);
    background-color: #FAF9F6;
}

.ps-table-header h3 {
    margin: 0;
    font-size: 1.35rem;
}

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

.ps-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.ps-table th {
    text-align: left;
    padding: 1rem 2.25rem;
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--ps-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--ps-border);
    background-color: #FAF9F6;
}

.ps-table td {
    padding: 1.15rem 2.25rem;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--ps-border);
    color: var(--ps-text);
    vertical-align: middle;
    background-color: #FFFFFF;
    font-weight: 500;
}

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

.ps-table tbody tr {
    transition: var(--ps-transition);
}

.ps-table tbody tr:hover td {
    background-color: #FAF9F6;
}

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

.ps-table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--ps-surface);
    box-shadow: var(--ps-shadow-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.ps-table-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-status {
    padding: 0.25rem 0.75rem;
    border-radius: var(--ps-radius-full);
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    display: inline-block;
}

.ps-status-success {
    background-color: var(--ps-sage);
    color: #4D8F7F;
}

.ps-status-pending {
    background-color: var(--ps-lavender);
    color: #7B75A5;
}

.ps-status-failed {
    background-color: var(--ps-peach);
    color: #C68975;
}

.ps-table-pagination {
    padding: 1.5rem 2.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--ps-border);
    background-color: #FAF9F6;
}

.ps-pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {
    .ps-table-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .ps-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 --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-table-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 !important;
    box-shadow: var(--ps-shadow);
    overflow: hidden;
    border-radius: var(--ps-radius-lg) !important;
}

.ps-table-header {
    padding: 1.75rem 2.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--ps-border);
    background-color: #FAF9F6;
}

.ps-table-header h3 {
    margin: 0;
    font-size: 1.35rem;
}

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

.ps-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.ps-table th {
    text-align: left;
    padding: 1rem 2.25rem;
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--ps-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--ps-border);
    background-color: #FAF9F6;
}

.ps-table td {
    padding: 1.15rem 2.25rem;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--ps-border);
    color: var(--ps-text);
    vertical-align: middle;
    background-color: #FFFFFF;
    font-weight: 500;
}

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

.ps-table tbody tr {
    transition: var(--ps-transition);
}

.ps-table tbody tr:hover td {
    background-color: #FAF9F6;
}

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

.ps-table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--ps-surface);
    box-shadow: var(--ps-shadow-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.ps-table-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-status {
    padding: 0.25rem 0.75rem;
    border-radius: var(--ps-radius-full);
    font-family: var(--ps-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    display: inline-block;
}

.ps-status-success {
    background-color: var(--ps-sage);
    color: #4D8F7F;
}

.ps-status-pending {
    background-color: var(--ps-lavender);
    color: #7B75A5;
}

.ps-status-failed {
    background-color: var(--ps-peach);
    color: #C68975;
}

.ps-table-pagination {
    padding: 1.5rem 2.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--ps-border);
    background-color: #FAF9F6;
}

.ps-pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

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

Lists

Soft Activity Feed

HTML

<div class="ps-feed-card ps-surface">
    <div class="ps-feed-header">
        <h3>Studio Activity</h3>
        <span class="ps-badge bg-lavender" style="color: #7B75A5;">6 Updates</span>
    </div>
    
    <ul class="ps-feed-list">
        <!-- Item 1: Unread -->
        <li class="ps-feed-item ps-unread">
            <div class="ps-feed-icon bg-lavender">
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="var(--ps-text)" stroke-width="2.5" 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="ps-feed-content">
                <p><strong>Sarah Jenkins</strong> left feedback on <span class="ps-feed-highlight">Pastel Style Guide</span>.</p>
                <span class="ps-feed-time">2 hours ago</span>
            </div>
            <div class="ps-unread-dot bg-peach"></div>
        </li>
        
        <!-- Item 2: Read -->
        <li class="ps-feed-item">
            <div class="ps-feed-icon bg-sage">
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="var(--ps-text)" stroke-width="2.5" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
            </div>
            <div class="ps-feed-content">
                <p><strong>Michael Chen</strong> marked <span class="ps-feed-highlight">Typography Refinement</span> as completed.</p>
                <span class="ps-feed-time">5 hours ago</span>
            </div>
        </li>
        
        <!-- Item 3: Unread -->
        <li class="ps-feed-item ps-unread">
            <div class="ps-feed-icon bg-blue">
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="var(--ps-text)" stroke-width="2.5" fill="none"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path><polyline points="14 2 22 2 22 10"></polyline><line x1="22" y1="2" x2="12" y2="12"></line></svg>
            </div>
            <div class="ps-feed-content">
                <p><strong>David Smith</strong> deployed <span class="ps-feed-highlight">Pastel v1.4 Theme</span> to production.</p>
                <span class="ps-feed-time">Yesterday</span>
            </div>
            <div class="ps-unread-dot bg-peach"></div>
        </li>
    </ul>
</div>

CSS (Component Only)

/* Component: Soft Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */

.ps-feed-card {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2.25rem 2rem !important;
    border-radius: var(--ps-radius-lg) !important;
}

.ps-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
}

.ps-feed-header h3 {
    font-size: 1.35rem;
}

.ps-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ps-feed-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--ps-radius);
    transition: var(--ps-transition);
    position: relative;
    border: 1px solid transparent;
}

.ps-feed-item:hover {
    background-color: #FAF9F6;
    border-color: var(--ps-border);
}

.ps-feed-item.ps-unread {
    background-color: #FAF9F6;
    border-color: rgba(42, 47, 53, 0.03);
}

.ps-feed-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ps-shadow-sm);
    border: 1px solid rgba(42, 47, 53, 0.03);
    color: var(--ps-text);
    flex-shrink: 0;
}

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

.ps-feed-content p {
    font-size: 0.9rem;
    color: var(--ps-text-muted);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.ps-feed-content strong {
    color: var(--ps-text);
}

.ps-feed-highlight {
    font-weight: 600;
    color: var(--ps-text);
    background-color: rgba(42, 47, 53, 0.03);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.ps-feed-time {
    font-size: 0.75rem;
    color: var(--ps-text-muted);
    opacity: 0.7;
}

.ps-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-feed-card {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2.25rem 2rem !important;
    border-radius: var(--ps-radius-lg) !important;
}

.ps-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
}

.ps-feed-header h3 {
    font-size: 1.35rem;
}

.ps-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ps-feed-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--ps-radius);
    transition: var(--ps-transition);
    position: relative;
    border: 1px solid transparent;
}

.ps-feed-item:hover {
    background-color: #FAF9F6;
    border-color: var(--ps-border);
}

.ps-feed-item.ps-unread {
    background-color: #FAF9F6;
    border-color: rgba(42, 47, 53, 0.03);
}

.ps-feed-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ps-shadow-sm);
    border: 1px solid rgba(42, 47, 53, 0.03);
    color: var(--ps-text);
    flex-shrink: 0;
}

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

.ps-feed-content p {
    font-size: 0.9rem;
    color: var(--ps-text-muted);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.ps-feed-content strong {
    color: var(--ps-text);
}

.ps-feed-highlight {
    font-weight: 600;
    color: var(--ps-text);
    background-color: rgba(42, 47, 53, 0.03);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.ps-feed-time {
    font-size: 0.75rem;
    color: var(--ps-text-muted);
    opacity: 0.7;
}

.ps-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

Modals

Soft Confirmation Modal

HTML

<div class="ps-modal-overlay">
    <div class="ps-modal ps-surface">
        <div class="ps-modal-icon bg-peach">
            <svg viewBox="0 0 24 24" width="22" height="22" stroke="var(--ps-text)" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <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" y2="17"></line>
            </svg>
        </div>
        
        <div class="ps-modal-body">
            <h3>Decommission Space?</h3>
            <p>This action will archive the tranquil workspace 'Aesthetic Curations' and disconnect all 12 active design repositories. You can retrieve archived nodes for up to 30 days.</p>
        </div>
        
        <div class="ps-modal-actions">
            <button class="ps-btn ps-btn-outline">Cancel Action</button>
            <button class="ps-btn ps-btn-accent">Confirm Archive</button>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Confirmation Modal */
/* NOTE: This component requires base.css to be included in your page. */

.ps-modal-overlay {
    width: 100%;
    min-height: 400px;
    background: rgba(250, 249, 245, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: var(--ps-radius-lg);
    border: 1px solid var(--ps-border);
}

.ps-modal {
    max-width: 450px;
    width: 100%;
    background-color: var(--ps-surface);
    box-shadow: var(--ps-shadow-lg) !important;
    border-radius: var(--ps-radius-lg) !important;
    padding: 2.5rem !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ps-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: var(--ps-shadow-sm);
    border: 1px solid rgba(42, 47, 53, 0.03);
    color: var(--ps-text);
}

.ps-modal-body {
    margin-bottom: 2rem;
}

.ps-modal-body h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.ps-modal-body p {
    font-size: 0.9rem;
    color: var(--ps-text-muted);
    line-height: 1.6;
}

.ps-modal-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

.ps-modal-actions .ps-btn {
    flex: 1;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .ps-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-modal-overlay {
    width: 100%;
    min-height: 400px;
    background: rgba(250, 249, 245, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: var(--ps-radius-lg);
    border: 1px solid var(--ps-border);
}

.ps-modal {
    max-width: 450px;
    width: 100%;
    background-color: var(--ps-surface);
    box-shadow: var(--ps-shadow-lg) !important;
    border-radius: var(--ps-radius-lg) !important;
    padding: 2.5rem !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ps-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: var(--ps-shadow-sm);
    border: 1px solid rgba(42, 47, 53, 0.03);
    color: var(--ps-text);
}

.ps-modal-body {
    margin-bottom: 2rem;
}

.ps-modal-body h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.ps-modal-body p {
    font-size: 0.9rem;
    color: var(--ps-text-muted);
    line-height: 1.6;
}

.ps-modal-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

.ps-modal-actions .ps-btn {
    flex: 1;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .ps-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

Footers

Elegant Simple Footer

HTML

<footer class="ps-footer ps-surface">
    <div class="ps-footer-grid">
        <div class="ps-footer-brand">
            <a href="#" class="ps-logo">
                <div class="ps-logo-icon bg-peach">
                    <svg viewBox="0 0 24 24" width="18" height="18" stroke="var(--ps-text)" stroke-width="2.2" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
                </div>
                <span>Pastel<span>Elegance</span></span>
            </a>
            <p class="ps-brand-desc">A premium library of soft, balanced visual assets crafted for modern, conscious web builders.</p>
        </div>
        
        <div class="ps-footer-links-col">
            <h4>Collection</h4>
            <ul>
                <li><a href="#">Design Kits</a></li>
                <li><a href="#">Typography</a></li>
                <li><a href="#">Color Grids</a></li>
            </ul>
        </div>
        
        <div class="ps-footer-links-col">
            <h4>Workspace</h4>
            <ul>
                <li><a href="#">Handbooks</a></li>
                <li><a href="#">Curators</a></li>
                <li><a href="#">Active Logs</a></li>
            </ul>
        </div>
        
        <div class="ps-footer-links-col">
            <h4>Company</h4>
            <ul>
                <li><a href="#">Studio</a></li>
                <li><a href="#">Journal</a></li>
                <li><a href="#">Press Kit</a></li>
            </ul>
        </div>
    </div>
    
    <div class="ps-footer-bottom">
        <p>&copy; 2026 Pastel Elegance. All designs curated with tranquility.</p>
        
        <div class="ps-footer-socials">
            <a href="#" class="ps-btn ps-btn-circle ps-btn-outline" aria-label="Twitter">
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
            </a>
            <a href="#" class="ps-btn ps-btn-circle ps-btn-outline" aria-label="LinkedIn">
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
            </a>
            <a href="#" class="ps-btn ps-btn-circle ps-btn-outline" aria-label="Instagram">
                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
            </a>
        </div>
    </div>
</footer>

CSS (Component Only)

/* Component: Elegant Simple Footer */
/* NOTE: This component requires base.css to be included in your page. */

.ps-footer {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 0 auto;
    padding: 4rem 3rem 2.5rem 3rem !important;
    border-radius: var(--ps-radius-lg) !important;
    box-shadow: var(--ps-shadow);
}

.ps-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.ps-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ps-brand-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ps-text-muted);
}

.ps-footer-links-col h4 {
    font-family: var(--ps-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-text);
    margin-bottom: 1.25rem;
}

.ps-footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ps-footer-links-col a {
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--ps-text-muted);
    font-weight: 500;
    transition: var(--ps-transition);
}

.ps-footer-links-col a:hover {
    color: var(--ps-text);
    padding-left: 0.25rem;
}

.ps-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--ps-border);
    padding-top: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ps-footer-bottom p {
    font-size: 0.85rem;
    color: var(--ps-text-muted);
}

.ps-footer-socials {
    display: flex;
    gap: 0.75rem;
}

.ps-footer-socials .ps-btn-circle svg {
    display: block;
}

@media (max-width: 900px) {
    .ps-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 600px) {
    .ps-footer-grid {
        grid-template-columns: 1fr;
    }
    .ps-footer-bottom {
        flex-direction: column;
        align-items: center;
        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 --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

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

:root {
    --ps-lavender: #E8E5F4;
    --ps-lavender-dark: #D6D0EB;
    --ps-sage: #E2ECE9;
    --ps-sage-dark: #CDE0DB;
    --ps-peach: #FCECE7;
    --ps-peach-dark: #F7DCD3;
    --ps-blue: #E3ECF5;
    --ps-blue-dark: #CDE0F0;
    
    --ps-bg: #FAF9F5;
    --ps-surface: #FFFFFF;
    --ps-text: #2A2F35;
    --ps-text-muted: #696C77;
    --ps-border: rgba(42, 47, 53, 0.06);
    --ps-border-strong: rgba(42, 47, 53, 0.12);
    
    --ps-radius-sm: 8px;
    --ps-radius: 16px;
    --ps-radius-lg: 24px;
    --ps-radius-full: 9999px;
    
    /* Warm organic shadows */
    --ps-shadow-sm: 0 4px 12px -2px rgba(135, 120, 160, 0.04);
    --ps-shadow: 0 12px 30px -8px rgba(135, 120, 160, 0.08);
    --ps-shadow-lg: 0 24px 50px -12px rgba(135, 120, 160, 0.12);
    
    --ps-font-heading: 'Playfair Display', Georgia, serif;
    --ps-font-body: 'Plus Jakarta Sans', sans-serif;
    
    /* Luxurious transition curve */
    --ps-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    color: var(--ps-text);
    background-color: var(--ps-bg);
    -webkit-font-smoothing: antialiased;
}

/* Pastel Style Containers */
.ps-surface {
    background-color: var(--ps-surface);
    border: 1px solid var(--ps-border);
    box-shadow: var(--ps-shadow);
    border-radius: var(--ps-radius);
    padding: 2rem;
    transition: var(--ps-transition);
}

.ps-surface-lavender {
    background-color: var(--ps-lavender);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-sage {
    background-color: var(--ps-sage);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

.ps-surface-peach {
    background-color: var(--ps-peach);
    border: 1px solid rgba(42, 47, 53, 0.03);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    padding: 2rem;
}

/* Global Logo */
.ps-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--ps-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ps-text);
    transition: var(--ps-transition);
}

.ps-logo span span {
    font-weight: 400;
    font-style: italic;
    color: var(--ps-text-muted);
    margin-left: 0.15rem;
}

.ps-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(42, 47, 53, 0.04);
    box-shadow: var(--ps-shadow-sm);
    flex-shrink: 0;
}

/* Global Buttons */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.85rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ps-transition);
    gap: 0.6rem;
    color: var(--ps-text);
    position: relative;
    overflow: hidden;
}

.ps-btn-primary {
    background-color: var(--ps-lavender);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-primary:hover {
    background-color: var(--ps-lavender-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(135, 120, 160, 0.2);
}

.ps-btn-primary:active {
    transform: translateY(1px);
}

.ps-btn-accent {
    background-color: var(--ps-peach);
    border-color: rgba(42, 47, 53, 0.04);
}

.ps-btn-accent:hover {
    background-color: var(--ps-peach-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(220, 150, 130, 0.2);
}

.ps-btn-accent:active {
    transform: translateY(1px);
}

.ps-btn-outline {
    background-color: transparent;
    border-color: var(--ps-border-strong);
}

.ps-btn-outline:hover {
    background-color: rgba(42, 47, 53, 0.03);
    transform: translateY(-2px);
}

.ps-btn-outline:active {
    transform: translateY(1px);
}

.ps-btn-ghost {
    background-color: transparent;
    border-color: transparent;
}

.ps-btn-ghost:hover {
    background-color: rgba(42, 47, 53, 0.03);
}

.ps-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Global Form Inputs */
.ps-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: 1.5px solid var(--ps-border-strong);
    border-radius: var(--ps-radius);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    color: var(--ps-text);
    background-color: var(--ps-surface);
    outline: none;
    transition: var(--ps-transition);
}

.ps-input::placeholder {
    color: var(--ps-text-muted);
    opacity: 0.6;
}

.ps-input:focus {
    border-color: rgba(135, 120, 160, 0.5);
    background-color: var(--ps-bg);
    box-shadow: 0 0 0 4px rgba(135, 120, 160, 0.08);
}

.ps-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ps-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ps-text);
}

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

p {
    font-family: var(--ps-font-body);
    line-height: 1.6;
    margin: 0;
    color: var(--ps-text-muted);
}

/* Soft Utilities */
.text-lavender { color: #8E89B5; }
.text-sage { color: #6D8E85; }
.text-peach { color: #C68975; }
.text-blue { color: #6A8EB5; }
.text-white { color: #FFFFFF; }

.bg-lavender { background-color: var(--ps-lavender); }
.bg-sage { background-color: var(--ps-sage); }
.bg-peach { background-color: var(--ps-peach); }
.bg-blue { background-color: var(--ps-blue); }
.bg-cream { background-color: var(--ps-bg); }


/* --- COMPONENT STYLES --- */
.ps-footer {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 0 auto;
    padding: 4rem 3rem 2.5rem 3rem !important;
    border-radius: var(--ps-radius-lg) !important;
    box-shadow: var(--ps-shadow);
}

.ps-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.ps-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ps-brand-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ps-text-muted);
}

.ps-footer-links-col h4 {
    font-family: var(--ps-font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps-text);
    margin-bottom: 1.25rem;
}

.ps-footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ps-footer-links-col a {
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--ps-text-muted);
    font-weight: 500;
    transition: var(--ps-transition);
}

.ps-footer-links-col a:hover {
    color: var(--ps-text);
    padding-left: 0.25rem;
}

.ps-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--ps-border);
    padding-top: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ps-footer-bottom p {
    font-size: 0.85rem;
    color: var(--ps-text-muted);
}

.ps-footer-socials {
    display: flex;
    gap: 0.75rem;
}

.ps-footer-socials .ps-btn-circle svg {
    display: block;
}

@media (max-width: 900px) {
    .ps-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 600px) {
    .ps-footer-grid {
        grid-template-columns: 1fr;
    }
    .ps-footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}