@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');

/* Reset & Root variables */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --ct-bg: #FFFDF9; /* Warm paper white */
    --ct-bg-muted: #FFF8E7; /* Soft bubbly cream */
    --ct-surface: #FFFFFF;
    
    --ct-primary: #FFDE4D; /* Bubbly Yellow */
    --ct-secondary: #38BDF8; /* Playful Blue */
    --ct-accent: #FF6B8B; /* Coral Pink */
    --ct-success: #4ADE80; /* Slime Green */
    
    --ct-text: #000000;
    --ct-text-muted: #4A4A4A;
    --ct-text-light: #7A7A7A;
    
    --ct-border: #000000;
    --ct-border-width: 3px;
    
    --ct-radius: 18px;
    --ct-radius-lg: 26px;
    --ct-radius-sm: 10px;
    --ct-radius-full: 9999px;
    
    --ct-font-heading: 'Fredoka', sans-serif;
    --ct-font-body: 'Quicksand', sans-serif;
    
    --ct-transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy bouncy spring */
    
    --ct-shadow: 4px 4px 0px #000000;
    --ct-shadow-lg: 8px 8px 0px #000000;
    --ct-shadow-sm: 2px 2px 0px #000000;
    --ct-shadow-press: 1px 1px 0px #000000;
}

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

/* Surface containers */
.ct-surface {
    background-color: var(--ct-surface);
    border: var(--ct-border-width) solid var(--ct-border);
    border-radius: var(--ct-radius);
    padding: 2.5rem;
    box-shadow: var(--ct-shadow);
    transition: var(--ct-transition);
}

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

.ct-logo:hover {
    transform: rotate(-2deg) scale(1.05);
}

.ct-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--ct-primary);
    border: var(--ct-border-width) solid var(--ct-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: var(--ct-shadow-sm);
}

/* Global Buttons */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2rem;
    font-family: var(--ct-font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    border: var(--ct-border-width) solid var(--ct-border);
    border-radius: var(--ct-radius-sm);
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--ct-shadow);
    transition: var(--ct-transition);
    gap: 0.5rem;
}

.ct-btn:active {
    transform: translate(3px, 3px);
    box-shadow: var(--ct-shadow-press);
}

.ct-btn-primary {
    background-color: var(--ct-primary);
    color: var(--ct-text);
}

.ct-btn-primary:hover {
    background-color: #f7ce1b;
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0px #000000;
}

.ct-btn-outline {
    background-color: var(--ct-surface);
    color: var(--ct-text);
}

.ct-btn-outline:hover {
    background-color: var(--ct-bg-muted);
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0px #000000;
}

.ct-btn-ghost {
    background-color: transparent;
    color: var(--ct-text);
    border-color: transparent;
    box-shadow: none;
}

.ct-btn-ghost:hover {
    background-color: var(--ct-bg-muted);
    border-color: var(--ct-border);
    box-shadow: var(--ct-shadow-sm);
}

.ct-btn-circle {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50% !important;
}

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

/* Form Fields */
.ct-input {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border: var(--ct-border-width) solid var(--ct-border);
    border-radius: var(--ct-radius-sm);
    font-family: var(--ct-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ct-text);
    background-color: var(--ct-surface);
    outline: none;
    box-shadow: var(--ct-shadow-sm);
    transition: var(--ct-transition);
}

.ct-input::placeholder {
    color: var(--ct-text-light);
}

.ct-input:focus {
    background-color: var(--ct-bg-muted);
    box-shadow: var(--ct-shadow);
}

.ct-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--ct-font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ct-text);
}

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

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

/* Helper Utilities */
.text-white { color: #FFFFFF !important; }
.text-yellow { color: var(--ct-primary) !important; }
.text-blue { color: var(--ct-secondary) !important; }
.text-pink { color: var(--ct-accent) !important; }
.text-muted { color: var(--ct-text-muted) !important; }

.bg-paper { background-color: var(--ct-bg) !important; }
.bg-cream { background-color: var(--ct-bg-muted) !important; }
.bg-blue { background-color: var(--ct-secondary) !important; }
.bg-pink { background-color: var(--ct-accent) !important; }
.bg-green { background-color: var(--ct-success) !important; }