/* Auth pages: Crafto redesign skin (2026-08-01). auth2.css markup untouched -
   this file remaps the site2 variable layer + component accents to the Crafto
   system (Manrope, base color #ee4136, black-pearl dark panel). Loaded AFTER
   site2.css + auth2.css in layouts/auth.php. */

:root {
    --cream: #f7f7f7;
    --paper: #ffffff;
    --espresso: #1f232c;
    --espresso2: #262b36;
    --ink: #232323;
    --ink-soft: #4d4d4d;
    --muted: #717580;
    --line: #e8e8e8;
    --terra: #ee4136;
    --terra-d: #d2382e;
    --gold: #ee4136;
    --herb: #23503B;
    --herb-l: #2F6A4E;
    --r: 24px;
    --rs: 12px;
    --sans: "Manrope", system-ui, -apple-system, sans-serif;
    --serif: "Manrope", system-ui, -apple-system, sans-serif;
    --shadow: 0 4px 20px rgba(23, 24, 28, .06);
    --shadow-lg: 0 30px 70px rgba(23, 24, 28, .12);
}

/* Serif italic accents become bold Manrope (Crafto has no serif voice) */
.auth-brand h1 { font-weight: 800; letter-spacing: -1px; }
.auth-brand h1 em { font-style: normal; font-weight: 800; color: #ff8a80; }
.auth-card h4, .auth-logo, .auth-topbar .auth-logo-mobile { font-weight: 800; }
.accent { font-style: normal; font-weight: 800; }
.eyebrow { letter-spacing: 2px; }

/* Brand panel: flat black-pearl like the Crafto footer, no radial vignette */
.auth-brand { background: var(--espresso); }
.auth-brand .eyebrow { color: #ff8a80; }
.auth-logo .brand-img, .auth-topbar .brand-img { border-radius: 10px; }

/* Buttons: Crafto pill + flat base color (no gradient marks) */
.btn-primary { box-shadow: 0 10px 30px rgba(238, 65, 54, .3); }
.btn-primary:hover { box-shadow: 0 16px 40px rgba(238, 65, 54, .4); }
.auth-logo .mark, .auth-topbar .auth-logo-mobile .mark { background: var(--terra); }
.auth-points .tick { background: var(--terra); border-radius: 50%; }

/* Focus ring: auth2.css uses var(--terra) which this skin maps to brand
   coral #ee4136 - a freshly autofocused field looked like a validation
   ERROR (competitor-review finding 2026-08-03). Neutral dark focus instead. */
.site-form-group input:focus,
.site-form-group select:focus {
    border-color: #232323;
    box-shadow: 0 0 0 4px rgba(35, 35, 35, 0.08);
}

/* Google sign-in button: `.auth-card a { color: var(--terra) }` in auth2.css
   (0,2,0) out-specified `.site-btn-google` (0,1,0), painting the label brand
   coral - it read as an error and breaks Google's sign-in branding, which
   requires neutral text on white. Match specificity and restore neutral ink. */
.auth-card .site-btn-google { color: var(--ink); font-weight: 600; }
.auth-card .site-btn-google:hover { color: var(--ink); }