/*
 * p7y.ai shared design system
 * Import this FIRST on every page. Page-specific CSS comes after.
 *
 * Usage: <link rel="stylesheet" href="p7y-theme.css">
 */

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

/* ── Design Tokens ────────────────────────────────────────── */
:root {
    /* Background */
    --p7y-bg:            #000040;
    --p7y-bg-lighter:    #000060;
    --p7y-bg-panel:      #00003a;
    --p7y-navbar-bg:     rgba(0, 0, 32, 0.95);

    /* Text */
    --p7y-text:          #7FFF00;
    --p7y-text-dim:      #5faa00;
    --p7y-text-muted:    #3a7700;
    --p7y-white:         #e0e0e0;

    /* Borders */
    --p7y-border:        #333380;
    --p7y-border-light:  #4444aa;
    --p7y-line:          #404040;

    /* Accents */
    --p7y-green-btn:       #7FFF00;
    --p7y-green-btn-hover: #9fff44;
    --p7y-error:           #ff4444;
    --p7y-warning:         #ffaa00;
    --p7y-hover-bg:        rgba(127, 255, 0, 0.1);

    /* Font */
    --p7y-font: 'Courier Prime', 'Courier New', monospace;
}

/* ── Light Mode ───────────────────────────────────────────── */
body.light-mode {
    --p7y-bg:            #F5F5F5;
    --p7y-bg-lighter:    #FFFFFF;
    --p7y-bg-panel:      #EEEEEE;
    --p7y-navbar-bg:     rgba(255, 255, 255, 0.95);

    --p7y-text:          #2D5016;
    --p7y-text-dim:      #4a7a2e;
    --p7y-text-muted:    #6a9a4e;
    --p7y-white:         #333333;

    --p7y-border:        #CCCCCC;
    --p7y-border-light:  #AAAAAA;
    --p7y-line:          #D0D0D0;

    --p7y-hover-bg:      rgba(0, 0, 0, 0.06);
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
    background: var(--p7y-bg);
    color: var(--p7y-text);
    font-family: var(--p7y-font);
    font-size: 14px;
}

/* ── Utilities ────────────────────────────────────────────── */
.hidden {
    display: none !important;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

/* ── Login Widget (consistent across all pages) ───────────── */
#login-widget {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99;
    color: var(--p7y-text);
    --logins-dropdown-bg: var(--p7y-navbar-bg);
    --logins-dropdown-border: var(--p7y-line);
    --logins-dropdown-hover: var(--p7y-hover-bg);
    --logins-btn-hover-bg: var(--p7y-hover-bg);
}