/*
 * r4nt - base styles
 *
 * Color scheme per the confirmed spec, exact values:
 *   bg: #171717
 *   text: #dadada
 *   link: #f3a000
 *   button bg: #393939, button text: #dadada, button border: 1px solid #e8e8e8
 *
 * No CDN imports anywhere - this file and the system font stack are
 * the entire styling dependency for the auth flow.
 */

:root {
    --color-bg: #171717;
    --color-text: #dadada;
    --color-link: #f3a000;
    --color-button-bg: #393939;
    --color-button-text: #dadada;
    --color-button-border: #e8e8e8;

    /* Not explicitly specified in the confirmed color scheme - these
       are my own additions for states that need SOME color (error
       text, input borders) but weren't given exact values. Flagging
       these as my choices, not confirmed ones, easy to swap out. */
    --color-error: #ff6b6b;
    --color-success: #4caf50;
    --color-input-bg: #232323;
    --color-input-border: #444444;
    --color-card-bg: #1f1f1f;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button,
.button {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: 1px solid var(--color-button-border);
    border-radius: 6px;
    padding: 0.6em 1.2em;
    font-size: 1em;
    cursor: pointer;
    font-family: inherit;
}

button:hover,
.button:hover {
    opacity: 0.85;
}

button:disabled,
.button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    background-color: var(--color-input-bg);
    color: var(--color-text);
    border: 1px solid var(--color-input-border);
    border-radius: 6px;
    padding: 0.6em;
    font-size: 1em;
    font-family: inherit;
    width: 100%;
}

input:focus {
    outline: 1px solid var(--color-link);
}

label {
    display: block;
    margin-bottom: 0.3em;
    font-size: 0.9em;
}

.field {
    margin-bottom: 1.2em;
}

.field-help {
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 0.3em;
}

.error-list {
    background-color: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    border-radius: 6px;
    padding: 0.8em 1em;
    margin-bottom: 1.2em;
    list-style: none;
}

.error-list li {
    margin: 0.2em 0;
}

.success-box {
    background-color: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    border-radius: 6px;
    padding: 1em;
    margin-bottom: 1.2em;
}

/* Auth pages: simple centered card, since there's no main app
   navigation yet at this stage of the build (no /feed layout exists
   yet - that comes with the feed/composer milestone) */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1em;
}

.auth-card {
    background-color: var(--color-card-bg);
    border-radius: 10px;
    padding: 2.5em;
    width: 100%;
    max-width: 400px;
}

.auth-card h1 {
    margin-top: 0;
    font-size: 1.4em;
}

.auth-card .site-name {
    color: var(--color-link);
    font-weight: bold;
    font-size: 1.8em;
    display: block;
    text-align: center;
    margin-bottom: 0.3em;
}

.auth-card .tagline {
    text-align: center;
    opacity: 0.6;
    font-size: 0.9em;
    margin-bottom: 1.8em;
}

.auth-card .lang-toggle {
    text-align: right;
    margin-bottom: 1em;
    font-size: 0.85em;
}

.auth-card .switch-link {
    text-align: center;
    margin-top: 1.5em;
    font-size: 0.9em;
    opacity: 0.8;
}

/* Password strength meter (used in the choose-password view) */
.strength-meter {
    height: 6px;
    border-radius: 3px;
    background-color: var(--color-input-border);
    overflow: hidden;
    margin-top: 0.5em;
}

.strength-meter-fill {
    height: 100%;
    width: 0%;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.strength-meter-fill.weak {
    width: 33%;
    background-color: var(--color-error);
}

.strength-meter-fill.acceptable {
    width: 66%;
    background-color: #e0c200;
}

.strength-meter-fill.strong {
    width: 100%;
    background-color: var(--color-success);
}

.strength-label {
    font-size: 0.8em;
    margin-top: 0.3em;
    opacity: 0.8;
}

button[type="submit"] {
    width: 100%;
    margin-top: 0.5em;
}