/* ═══════════════════════════════════════════════
   CANNAPROOF – Centralized CSS
   Yeh file signin.html aur signup.html dono mein
   <link rel="stylesheet" href="style.css"> se use karo
═══════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --cp-bg:           #f5f5f5;
    --cp-card-bg:      #ffffff;
    --cp-border:       #e2e8f0;
    --cp-text:         #1a202c;
    --cp-text-muted:   #718096;
    --cp-input-bg:     #ffffff;
    --cp-input-border: #e2e8f0;
    --cp-input-focus:  #2d6a4f;
    --cp-btn-bg:       #1e3d2a;
    --cp-btn-hover:    #2d6a4f;
    --cp-logo-bg:      #f0a500;
    --cp-link:         #1a202c;
    --cp-font:         'Inter', sans-serif;
    --cp-radius-card:  16px;
    --cp-radius-input: 8px;
    --cp-radius-logo:  14px;
    --cp-shadow-card:  0 4px 24px rgba(0,0,0,0.08);
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Body ── */
body {
    font-family: var(--cp-font);
    background: var(--cp-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* ── Card ── */
.cp-card {
    background: var(--cp-card-bg);
    border-radius: var(--cp-radius-card);
    box-shadow: var(--cp-shadow-card);
    width: 100%;
    max-width: 440px;
    padding: 2.5rem 2.25rem 2rem;
    text-align: center;
}

/* ── Logo ── */
.cp-logo {
    width: 60px;
    height: 60px;
    background: var(--cp-logo-bg);
    border-radius: var(--cp-radius-logo);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.4rem;
}
.cp-logo svg {
    width: 28px;
    height: 28px;
}

/* ── Headings ── */
.cp-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--cp-text);
    margin-bottom: 0.35rem;
}
.cp-subtitle {
    font-size: 0.9rem;
    color: var(--cp-text-muted);
    margin-bottom: 1.75rem;
}

/* ── Google Button ── */
.cp-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--cp-border);
    border-radius: var(--cp-radius-input);
    background: var(--cp-card-bg);
    color: var(--cp-text);
    font-family: var(--cp-font);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.18s;
    margin-bottom: 1.25rem;
}
.cp-btn-google:hover { border-color: #b0b0b0; }
.cp-btn-google svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Divider ── */
.cp-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.cp-divider span {
    font-size: 0.8rem;
    color: var(--cp-text-muted);
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.cp-divider::before,
.cp-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cp-border);
}

/* ── Form ── */
.cp-form { text-align: left; }

.cp-field { margin-bottom: 1.1rem; }

.cp-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cp-text);
    margin-bottom: 0.45rem;
    float: left;
}

.cp-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid var(--cp-input-border);
    border-radius: var(--cp-radius-input);
    background: var(--cp-input-bg);
    color: var(--cp-text);
    font-family: var(--cp-font);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.18s;
}
.cp-input::placeholder { color: #b0bec5; }
.cp-input:focus { border-color: var(--cp-input-focus); }

/* ── Primary Button ── */
.cp-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--cp-btn-bg);
    color: #fff;
    border: none;
    border-radius: var(--cp-radius-input);
    font-family: var(--cp-font);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.35rem;
    text-decoration: none;
    transition: background 0.18s;
}
.cp-btn-primary:hover { background: var(--cp-btn-hover); color: #fff; }
.cp-btn-primary svg { width: 18px; height: 18px; }

/* ── Footer ── */
.cp-footer {
    font-size: 0.875rem;
    color: var(--cp-text-muted);
    margin-top: 1.2rem;
    text-align: center;
}
.cp-footer a {
    color: var(--cp-link);
    font-weight: 700;
    text-decoration: none;
}
.cp-footer a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .cp-card { padding: 2rem 1.4rem 1.6rem; }
    .cp-title { font-size: 1.4rem; }
}