/* ============================================================================
   RGBparty — shared design system. Keeps the red/green/blue identity but makes
   it intentional: one palette, type scale, and component primitives used across
   every screen. Loaded via <link rel="stylesheet" href="/static/theme.css">.
   ============================================================================ */

@font-face {
    font-family: 'AMGoth';
    src: url('/static/fonts/amgoth-bold-webfont.woff') format('woff'),
         url('/static/fonts/amgoth-bold-webfont.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}

:root {
    /* the RGB identity — vivid but a touch richer than raw primaries */
    --red:   #ff2d46;
    --green: #1fd65f;
    --blue:  #3d7bff;
    --red-deep:   #d21630;
    --green-deep: #12a848;
    --blue-deep:  #2456e6;
    --rgb-gradient: linear-gradient(90deg, var(--red), var(--green) 52%, var(--blue));

    /* surfaces (dark) */
    --bg:        #0a0b0f;
    --bg-2:      #0e1016;
    --surface:   #15171f;
    --surface-2: #1c1f29;
    --border:    #262a36;
    --border-soft: #1f2330;

    /* text */
    --text:  #f3f5f9;
    --muted: #9aa2ae;
    --faint: #6b7280;

    /* shape + depth */
    --r-sm: 10px;
    --r:    14px;
    --r-lg: 20px;
    --r-pill: 999px;
    --shadow: 0 10px 30px rgba(0,0,0,0.45);
    --shadow-sm: 0 4px 14px rgba(0,0,0,0.35);
    --ring: 0 0 0 3px rgba(255,255,255,0.14);

    /* type */
    --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
    --font-display: 'AMGoth', system-ui, -apple-system, 'Segoe UI', Roboto, var(--emoji), sans-serif;
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, var(--emoji), sans-serif;

    --ease: cubic-bezier(.22,1,.36,1);
}

/* ---- primitives (opt-in classes; never applied globally to avoid breaking pages) ---- */
.rgb-text {
    background: var(--rgb-gradient);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rgb-bar { height: 4px; border-radius: var(--r-pill); background: var(--rgb-gradient); }

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
    border-radius: var(--r); padding: 13px 16px; font: 700 16px/1 var(--font);
    cursor: pointer; text-decoration: none; transition: transform .12s var(--ease), filter .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-rgb { border: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    background: linear-gradient(90deg, var(--red), var(--green) 50%, var(--blue)); }
.btn-block { display: flex; width: 100%; }

.input {
    width: 100%; box-sizing: border-box; background: var(--bg-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r); padding: 13px 14px;
    font: 500 16px/1.2 var(--font); transition: border-color .15s, box-shadow .15s; outline: none;
}
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61,123,255,0.25); }

@keyframes rgb-pop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; } }