/* ============================================
   CHEER MOM PLANNER — DESIGN SYSTEM CSS
   Brand: Dusty rose #D4537E, Blush #FBEAF0
   Programs: All-Star (pink), School (blue), Rec (green)
   Life events: Amber #BA7517
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
    /* Brand */
    --brand-primary: #D4537E;
    --brand-light: #FBEAF0;
    --brand-dark: #4B1528;
    --brand-mid: #72243E;
    --brand-border: #F4C0D1;

    /* Programs */
    --allstar: #D4537E;
    --allstar-bg: #FBEAF0;
    --allstar-text: #4B1528;
    --allstar-sub: #72243E;

    --school: #185FA5;
    --school-bg: #E6F1FB;
    --school-text: #042C53;
    --school-sub: #0C447C;

    --rec: #0F6E56;
    --rec-bg: #E1F5EE;
    --rec-text: #04342C;
    --rec-sub: #085041;

    /* Life events */
    --life: #BA7517;
    --life-bg: #FAEEDA;
    --life-text: #633806;
    --life-sub: #854F0B;

    /* Neutrals */
    --bg: #FAF8F5;
    --card: #FFFFFF;
    --border: rgba(0, 0, 0, 0.1);
    --text-primary: #1A1A18;
    --text-secondary: #5F5E5A;
    --text-muted: #888780;
    --text-disabled: #B4B2A9;
    --surface: #F1EFE8;

    /* Semantic */
    --success: #5DCAA5;
    --success-bg: #E1F5EE;
    --success-text: #085041;
    --danger: #A32D2D;
    --danger-bg: #FCEBEB;
    --warning: #BA7517;
    --warning-bg: #FAEEDA;

    /* Spacing */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 14px;

    /* Typography */
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --text-xs: 9px;
    --text-sm: 10px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text-primary);
    font-size: var(--text-base);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Mobile Container ---------- */
.app-container {
    max-width: 430px;
    margin: 0 auto;
    padding: 16px;
    min-height: 100vh;
}

/* ---------- Cards ---------- */
.card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 14px;
    border: 0.5px solid var(--border);
    margin-bottom: 8px;
}

.card-flush { padding: 0; }
.card-lg { padding: 18px; }
.card-xl { padding: 24px 18px; }

/* ---------- Typography ---------- */
.heading-xl { font-size: var(--text-2xl); font-weight: 700; }
.heading-lg { font-size: var(--text-xl); font-weight: 600; }
.heading-md { font-size: var(--text-lg); font-weight: 600; }
.heading-sm { font-size: var(--text-md); font-weight: 600; }

.text-base { font-size: var(--text-base); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-brand { color: var(--brand-primary); }
.text-danger { color: var(--danger); }

.label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 6px;
}

/* ---------- Form Fields ---------- */
.field {
    background: var(--card);
    border: 0.5px solid var(--border);
    border-radius: 7px;
    padding: 10px 12px;
    font-size: var(--text-base);
    margin-bottom: 12px;
    color: var(--text-primary);
    width: 100%;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s;
}

.field:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(212, 83, 126, 0.1);
}

.field-placeholder { color: var(--text-disabled); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 11px 16px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font);
    border: 0.5px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn:hover { background: var(--surface); }

.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border: none;
    font-weight: 600;
}
.btn-primary:hover { background: #BF4570; }

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-amber {
    background: var(--life);
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-full { width: 100%; display: block; text-align: center; }
.btn-lg { padding: 14px 16px; font-size: var(--text-md); }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}

.badge-pink { background: var(--brand-primary); color: #fff; }
.badge-trial { background: var(--brand-primary); color: #fff; }
.badge-free { background: var(--surface); color: var(--text-secondary); }
.badge-pro { background: var(--brand-primary); color: #fff; }
.badge-amber { background: var(--life-bg); color: var(--life-text); }
.badge-green { background: var(--success-bg); color: var(--success-text); }
.badge-blue { background: var(--school-bg); color: var(--school-sub); }
.badge-blue-solid { background: var(--school); color: #fff; }
.badge-danger { background: var(--danger); color: #fff; }

/* ---------- Toggle Switch ---------- */
.toggle {
    width: 38px;
    height: 22px;
    border-radius: 11px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle.on { background: var(--success); }
.toggle.off { background: #D3D1C7; }

.toggle-dot {
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    transition: all 0.2s;
}

.toggle.on .toggle-dot { right: 2px; }
.toggle.off .toggle-dot { left: 2px; }

/* ---------- Progress Bar (Onboarding) ---------- */
.progress-steps {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.progress-dot {
    flex: 1;
    height: 3px;
    border-radius: 2px;
}

.progress-dot.done { background: var(--brand-primary); }
.progress-dot.todo { background: var(--surface); }

/* ---------- Grid Layouts ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; }

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

/* ---------- Event Type Picker (4+2) ---------- */
.event-picker-section {
    margin-bottom: 4px;
}

.event-picker-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.event-picker-label.cheer { color: var(--brand-primary); }
.event-picker-label.life { color: var(--text-muted); }

.event-tile {
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--border);
    font-size: var(--text-sm);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.event-tile .tile-icon { font-size: 15px; margin-bottom: 1px; }

.event-tile.selected-cheer {
    border: 2px solid var(--brand-primary);
    background: var(--brand-light);
    font-weight: 500;
    color: var(--brand-dark);
}

.event-tile.selected-life {
    border: 2px solid var(--life);
    background: var(--life-bg);
    font-weight: 500;
    color: var(--life-text);
}

.picker-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.picker-divider .line {
    flex: 1;
    height: 0.5px;
    background: rgba(0, 0, 0, 0.08);
}

.picker-divider .or {
    font-size: 7px;
    color: var(--text-disabled);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ---------- Program Selector ---------- */
.program-pill {
    flex: 1;
    padding: 8px 6px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.program-pill .pill-icon { font-size: 14px; margin-bottom: 2px; }
.program-pill .pill-name { font-size: var(--text-sm); }
.program-pill .pill-sub { font-size: 8px; margin-top: 1px; }

.program-pill.selected-allstar {
    border: 2px solid var(--allstar);
    background: var(--allstar-bg);
}
.program-pill.selected-allstar .pill-name { font-weight: 600; color: var(--allstar-text); }
.program-pill.selected-allstar .pill-sub { color: var(--allstar-sub); }

.program-pill.selected-school {
    border: 2px solid var(--school);
    background: var(--school-bg);
}
.program-pill.selected-school .pill-name { font-weight: 600; color: var(--school-text); }
.program-pill.selected-school .pill-sub { color: var(--school-sub); }

.program-pill.selected-rec {
    border: 2px solid var(--rec);
    background: var(--rec-bg);
}
.program-pill.selected-rec .pill-name { font-weight: 600; color: var(--rec-text); }
.program-pill.selected-rec .pill-sub { color: var(--rec-sub); }

/* ---------- Color Indicator ---------- */
.color-indicator {
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
}

.color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Program Section Cards ---------- */
.program-section {
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}

.program-section.allstar {
    background: var(--allstar-bg);
    border: 1px solid var(--brand-border);
}

.program-section.school {
    background: var(--school-bg);
    border: 1px solid #B5D4F4;
}

.program-section.rec {
    background: var(--rec-bg);
    border: 1px solid #9FE1CB;
}

.program-section-header {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.program-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.program-field-label {
    font-size: 8px;
    font-weight: 500;
    margin-bottom: 3px;
}

.program-field-value {
    background: #fff;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
}

/* ---------- Password Strength ---------- */
.password-strength {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.strength-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--surface);
    transition: background 0.3s;
}

.strength-bar.filled { background: var(--success); }
.strength-bar.filled.weak { background: var(--danger); }
.strength-bar.filled.medium { background: var(--warning); }

/* ---------- Tab Switcher ---------- */
.tab-switcher {
    display: flex;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: 16px;
}

.tab-switcher .tab {
    flex: 1;
    padding: 7px;
    text-align: center;
    font-size: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    text-decoration: none;
}

.tab-switcher .tab.active {
    background: var(--card);
    font-weight: 500;
    color: var(--text-primary);
}

/* ---------- Divider ---------- */
.divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
}

.divider .line {
    flex: 1;
    height: 0.5px;
    background: var(--border);
}

.divider .text {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ---------- SSO Buttons ---------- */
.sso-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.sso-btn {
    padding: 10px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border);
    background: var(--card);
    font-size: var(--text-base);
    text-align: center;
    cursor: pointer;
    font-family: var(--font);
}

.sso-btn:hover { background: var(--surface); }

/* ---------- Star Logo ---------- */
.app-logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    background: var(--brand-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-logo.lg { width: 64px; height: 64px; }

/* ---------- Checkbox ---------- */
.check-row {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.check-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.check-icon.empty {
    background: transparent;
    border: 1.5px solid var(--border);
}

/* ---------- Celebration Gradient ---------- */
.celebration-card {
    background: linear-gradient(135deg, #FBEAF0 0%, #F4E0F0 50%, #E8E0F8 100%);
    border-radius: 14px;
    padding: 18px 16px;
    border: 1px solid var(--brand-border);
    text-align: center;
}

/* ---------- Season Picker ---------- */
.season-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 14px;
}

.season-tile {
    padding: 7px 4px;
    border-radius: var(--radius-sm);
    border: 0.5px solid var(--border);
    font-size: var(--text-sm);
    text-align: center;
    cursor: pointer;
}

.season-tile.active {
    border: 2px solid var(--brand-primary);
    background: var(--brand-light);
    font-weight: 500;
    color: var(--brand-dark);
}

.season-tile .sub { font-size: 8px; color: var(--text-secondary); font-weight: 400; }

/* ---------- Info Boxes ---------- */
.info-box {
    border-radius: 7px;
    padding: 8px 10px;
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: 12px;
}

.info-box.pink { background: var(--brand-light); color: var(--brand-dark); }
.info-box.blue { background: var(--school-bg); color: var(--school-sub); }
.info-box.green { background: var(--success-bg); color: var(--success-text); }
.info-box.amber { background: var(--life-bg); color: var(--life-sub); }
.info-box.gray { background: var(--surface); color: var(--text-secondary); }

/* ---------- Crossover Section ---------- */
.crossover-section {
    background: linear-gradient(135deg, #FBEAF0, #E8E0F8);
    border-radius: 10px;
    padding: 14px;
    border: 1.5px solid var(--brand-primary);
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.flex { display: flex; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.dimmed { opacity: 0.45; }
.dimmed-55 { opacity: 0.55; }

/* ---------- Validation ---------- */
.validation-error {
    color: var(--danger);
    font-size: var(--text-sm);
    margin-top: -8px;
    margin-bottom: 8px;
}

.field.error {
    border-color: var(--danger);
}