/* ============================================================
   ePay — Design tokens & base styles
   Palette pulled from the actual mark: antique brass/gold ring
   on true black, paired with a warm parchment surface so the
   product isn't just "one accent on near-black."
   ============================================================ */

:root {
    /* Color */
    --ink:            #060605;   /* true black, matches the mark's field */
    --ink-raised:     #121110;   /* panels sitting on --ink */
    --ink-hairline:   #2b2822;   /* borders on dark surfaces */
    --parchment:      #F7F1E4;   /* warm paper — primary app surface */
    --parchment-dim:  #EEE6D3;   /* secondary paper surface / inputs */
    --paper-hairline: #DDD2B8;   /* borders on light surfaces */
    --text-on-ink:    #F3EFE4;
    --text-on-ink-dim:#A69C8A;
    --text-primary:   #1E1A12;   /* warm near-black, for paper surfaces */
    --text-muted:     #6E6653;
    --gold-highlight: #E7CD94;   /* shine / hover */
    --gold:           #B98F3F;   /* primary accent — buttons, links, active states */
    --gold-deep:      #8C6D30;   /* pressed / borders on gold */
    --green:          #3E6B4F;   /* verified / success */
    --green-bg:       #E4EDE3;
    --maroon:         #8C3730;   /* rejected / destructive */
    --maroon-bg:      #F3E2DF;
    --amber:          #A6752B;   /* pending */
    --amber-bg:       #F3E7CF;

    /* Type */
    --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
    --font-ui: "Manrope", "Segoe UI", system-ui, sans-serif;

    /* Layout */
    --app-max: 480px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-card: 0 1px 2px rgba(10, 8, 4, 0.06), 0 12px 28px -18px rgba(10, 8, 4, 0.35);
    --shadow-float: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

* , *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--text-primary);
    background: var(--parchment);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    margin: 0 0 0.4em;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.12;
}

p { margin: 0 0 1em; color: var(--text-muted); max-width: 62ch; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

ul, ol { padding-left: 1.2em; }

::selection { background: var(--gold-highlight); color: var(--text-primary); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.app-shell { max-width: var(--app-max); margin: 0 auto; min-height: 100vh; background: var(--parchment); position: relative; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-highlight); }
.btn-ink { background: var(--ink); color: var(--text-on-ink); }
.btn-ink:hover { background: #1c1a16; }
.btn-outline { background: transparent; border-color: var(--paper-hairline); color: var(--text-primary); }
.btn-outline:hover { border-color: var(--gold); }
.btn-outline-ink { background: transparent; border-color: rgba(243,239,228,0.28); color: var(--text-on-ink); }
.btn-outline-ink:hover { border-color: var(--gold-highlight); color: var(--gold-highlight); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.field .hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 5px; }
.field .error { font-size: 0.78rem; color: var(--maroon); margin-top: 5px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], textarea, select {
    width: 100%;
    padding: 13px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--paper-hairline);
    background: #fff;
    font-size: 0.98rem;
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--gold);
    outline: none;
}
textarea { resize: vertical; min-height: 90px; }

.checkbox-row { display: flex; align-items: center; gap: 10px; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--gold); }

.otp-inputs { display: flex; gap: 10px; }
.otp-inputs input {
    width: 44px; height: 52px; text-align: center; font-size: 1.3rem; font-weight: 700;
    padding: 0;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 700;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-maroon { background: var(--maroon-bg); color: var(--maroon); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Cards / surfaces ─────────────────────────────────────────────────────── */
.surface {
    background: #fff;
    border: 1px solid var(--paper-hairline);
    border-radius: var(--radius-md);
    padding: 20px;
}
.surface + .surface { margin-top: 14px; }

/* ── Flash messages / toast ───────────────────────────────────────────────── */
.flash {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.flash-error { background: var(--maroon-bg); color: var(--maroon); border-color: rgba(140,55,48,0.25); }
.flash-success { background: var(--green-bg); color: var(--green); border-color: rgba(62,107,79,0.25); }
.flash-info { background: var(--parchment-dim); color: var(--text-primary); border-color: var(--paper-hairline); }

.toast {
    position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(20px);
    background: var(--ink); color: var(--text-on-ink); padding: 12px 20px; border-radius: 999px;
    font-size: 0.86rem; font-weight: 600; opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease; z-index: 200; box-shadow: var(--shadow-float);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Skip link (accessibility) ────────────────────────────────────────────── */
.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink);
    padding: 10px 16px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.tabular { font-variant-numeric: tabular-nums; }