/* ============================================================
   Bank Statement Extractor — Editorial Ledger design system
   Aesthetic: warm cream paper, ink near-black, ochre accent.
   Typography: Fraunces (display) / IBM Plex Sans (UI) /
              JetBrains Mono (tabular numerics).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Palette */
    --ink:        #16140F;
    --ink-soft:   #2A261E;
    --paper:      #F4EEDF;
    --paper-deep: #ECE3CC;
    --card:       #FBF7EB;
    --rule:       #1E1A12;
    --rule-soft:  rgba(30, 26, 18, 0.18);
    --rule-faint: rgba(30, 26, 18, 0.08);
    --mute:       #6B6354;
    --mute-soft:  #8C8472;

    --ochre:      #B8541A;
    --ochre-deep: #8E3E0F;
    --ochre-soft: #E8C9A8;

    --sage:       #3F5D44;
    --sage-soft:  #C9D6BD;
    --crimson:    #8E2A2A;
    --crimson-soft:#E8C9C9;
    --gold:       #B8901A;
    --gold-soft:  #E8DCA8;

    /* Type */
    --font-display: 'Fraunces', 'Times New Roman', serif;
    --font-ui:      'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* Scale (4px base) */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;

    --radius-sm: 2px;
    --radius:    4px;
    --radius-lg: 8px;
}

/* ---------- reset / base ---------- */

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 31px,
            rgba(30, 26, 18, 0.025) 31px,
            rgba(30, 26, 18, 0.025) 32px
        );
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; }
h3 { font-size: 1.25rem; line-height: 1.25; }
h4 { font-size: 1rem; line-height: 1.3; font-weight: 600; }

p { margin: 0 0 var(--s-3) 0; }
a { color: var(--ochre); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--ochre-deep); }

button { font-family: var(--font-ui); cursor: pointer; }

code, pre { font-family: var(--font-mono); font-size: 0.85em; }

/* ---------- helpers ---------- */

.eyebrow {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ochre);
}

.eyebrow--mute { color: var(--mute); }

.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.rule {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--s-5) 0;
}

.rule--double {
    border: 0;
    border-top: 3px double var(--rule);
    margin: var(--s-5) 0;
}

.rule--hair {
    border: 0;
    border-top: 1px solid var(--rule-soft);
    margin: var(--s-4) 0;
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.7rem 1.2rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-sm);
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.btn:hover { background: var(--ochre); border-color: var(--ochre); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { background: var(--paper-deep); border-color: var(--rule-soft); color: var(--mute-soft); cursor: not-allowed; transform: none; }

.btn--ghost {
    background: transparent;
    color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--ochre {
    background: var(--ochre);
    border-color: var(--ochre);
    color: var(--paper);
}
.btn--ochre:hover { background: var(--ochre-deep); border-color: var(--ochre-deep); }

.btn--small {
    padding: 0.45rem 0.85rem;
    font-size: 0.72rem;
}

/* ---------- pills / tags ---------- */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
}

.tag--debit   { color: var(--crimson); border-color: var(--crimson); }
.tag--credit  { color: var(--sage); border-color: var(--sage); }
.tag--pending { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.tag--posted  { color: var(--mute); border-color: var(--rule-soft); }

/* ---------- shared layout ---------- */

.shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--s-5);
}

.section {
    padding: var(--s-7) 0;
}

.eyebrow-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.eyebrow-row::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
}

/* ---------- selection ---------- */

::selection {
    background: var(--ochre);
    color: var(--paper);
}

/* ---------- legacy / framework leftovers ---------- */

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sage); }
.invalid { outline: 1px solid var(--crimson); }
.validation-message { color: var(--crimson); font-size: 0.85rem; }

.blazor-error-boundary {
    background: var(--crimson);
    color: var(--paper);
    padding: var(--s-3) var(--s-5);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}

.blazor-error-boundary::after { content: "An error has occurred."; }