/* =========================================================
   Canopy Theme Overrides — based on brand style guide
   Scope: .theme-canopy
   Load AFTER your base default.css (semantic.css)
   ========================================================= */

.theme-canopy {
    /* Core brand colours */
    --primary: #7163e7;                     /* Dark text / button base */
    --primary-600: #1f232b;                 /* Darker hover version */
    --primary-ring: rgba(37, 42, 52, 0.35);
    --primary-ring-strong: rgba(37, 42, 52, 0.55);

    /* Secondary / accent tones */
    --secondary: #7163e7;                   /* Accent purple */
    --secondary-600: #5e52cc;

    --accent: #7163e7;                      /* Bright green accent */
    --accent-600: #7163e7;
    --tab-accent: #09ce89;

    /* Text palette */
    --heading: #252a34;
    --muted: #4b4b54;
    --muted-dark: #2d2d33;
    --muted-light: #a0a0a8;

    /* Backgrounds */
    --surface-bg: #ffffff;                  /* Secondary background */
    --surface-muted: #e2ddd740;               /* Main background */
    --border-muted: #d7d5d0;
    --border-primary: #7163e7;

    /* Success / Error */
    --success-bg: #E6FFF3;
    --success-text: #056C3E;
    --success-border: #09ce89;

    --error: #DC2626;
    --error-border: #EF4444;

    --warning: #ebe9fc;
    --warning-border: color-mix(in srgb, var(--warning) 70%, black);
    --warning-text: #100a42;

    /* Confirmation / gradient backgrounds */
    --confirm-bg-start: #7163e7;
    --confirm-bg-end: #09ce89;
    --loading-bar-bg: #e2ddd7;
    --loading-bar-color: var(--secondary);
    --loading-text-color: var(--primary);
    --confirmation-card-bg: rgba(255,255,255,0.96);
    --confirmation-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* =========================================================
   Layout / Backgrounds
   ========================================================= */
.theme-canopy .bg-muted-light { background: var(--surface-muted); }
.theme-canopy .bg-confirm-gradient {
    background: linear-gradient(180deg, var(--confirm-bg-start) 0%, var(--confirm-bg-end) 100%);
}

/* =========================================================
   Buttons
   ========================================================= */

/* Primary Button: turquoise background, dark text → navy on hover with white text */
.theme-canopy .btn-confirm,
.theme-canopy .btn-primary {
    background: var(--primary-600);
    color: #fff;
    font-weight: 600;
    border-radius: .375rem;
    min-height: 48px;
    transition: background-color .2s, color .2s, transform .1s;
}
.theme-canopy .btn-confirm:hover,
.theme-canopy .btn-primary:hover {
    background: var(--primary-600);
    color: #fff;
}

/* Secondary Button: white background, navy border, navy text → turquoise on hover */
.theme-canopy .btn-outline {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: .375rem;
    min-height: 48px;
    transition: background-color .2s, color .2s;
}
.theme-canopy .btn-outline:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.theme-canopy .bg-primary-hover { background: rgba(113, 99, 231, 0.09); }
.theme-canopy .hover\:bg-primary-hover:hover { background: rgba(113, 99, 231, 0.09); }

/* =========================================================
   Forms + Focus States
   ========================================================= */
.theme-canopy :where(input, select, textarea) {
    border-color: var(--border-muted);
    background: #fff;
    color: var(--heading);
}
.theme-canopy :where(input, select, textarea):focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px var(--primary-ring);
}
.theme-canopy ::placeholder { color: var(--muted-light); }
.theme-canopy input[type="checkbox"],
.theme-canopy input[type="radio"] {
    accent-color: var(--secondary);
}

/* =========================================================
   Text + Links
   ========================================================= */
.theme-canopy .text-heading { color: var(--heading); }
.theme-canopy .text-link { color: var(--secondary); }
.theme-canopy .text-link:hover { color: var(--secondary-600); }
.theme-canopy .text-accent { color: var(--accent); }

/* =========================================================
   Confirmation Page
   ========================================================= */
.theme-canopy .confirmation-wrapper {
    background: linear-gradient(to bottom, var(--confirm-bg-start), var(--confirm-bg-end));
}
.theme-canopy .confirmation-card {
    background: var(--confirmation-card-bg);
    box-shadow: var(--confirmation-shadow);
}
.theme-canopy .loading-wrapper { background: var(--loading-bar-bg); }
.theme-canopy .loading-bar { background: var(--loading-bar-color); }
.theme-canopy .loading-text { color: #fff; }

/* =========================================================
   Logo / Branding
   ========================================================= */
.theme-canopy .app-logo {
    background: url('/images/logos/canopy-logo.png') no-repeat center center;
    background-size: contain;
    width: 15rem !important;
    height: 3.5rem !important;
    margin-left: -1.4rem;
}

/* =========================================================
   Utilities / Misc.
   ========================================================= */
.theme-canopy .focus\:ring-primary-ring-strong:focus {
    box-shadow: 0 0 0 2px var(--primary-ring-strong) !important;
}
.theme-canopy .text-spinner { color: var(--secondary); }
.theme-canopy .hover\:bg-muted-hover:hover { background: #E2E8F0; }
.theme-canopy .bg-skip-modal { background: #252a34; }
.theme-canopy .close-error-modal,
.theme-canopy .close-skip-modal {
    color: white;
    font-weight: bold;
    padding-right: 0.5rem;
    font-size: 2rem !important;
}

.theme-canopy body {
    background-color: #e2ddd7;
}