/* ============================================================
   RS Accounting Portal — Design Tokens + Base Styles
   See docs/design-notes.md for the full design system.
   ============================================================ */

:root {
    /* Neutrals */
    --bg-page:      #F4EFE6;
    --bg-card:      #FAF7F1;
    --bg-zebra:     #F4EFE6;
    --border:       #E5DFD3;
    --text-primary:   #1C1814;
    --text-secondary: #6F6860;
    --text-tertiary:  #A39B90;

    /* Accents */
    --ink-blue:      #2F4A7A;
    --teal:          #2F7A75;
    --eggplant:      #514786;
    --forest-green:  #3A6B3F;
    --terracotta:    #9B3F36;
    --ochre:         #B88A3E;

    /* Status fills */
    --status-pending-bg:   #F5ECD6;
    --status-pending-fg:   #B88A3E;
    --status-completed-bg: #E6EFE2;
    --status-completed-fg: #3A6B3F;
    --status-billed-bg:    #E1E8F1;
    --status-billed-fg:    #2F4A7A;
    --status-cancelled-bg: #EDE8DF;
    --status-cancelled-fg: #6F6860;
    --status-warn-bg:      #F3E0D9;
    --status-warn-fg:      #9B3F36;

    /* Type */
    --font-display: 'Source Serif 4', 'Tiempos Headline', Georgia, serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

    /* Layout */
    --radius-card: 12px;
    --radius-btn:  8px;
    --nav-width:   240px;
    --topbar-h:    56px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 0.5em;
}
h1 { font-size: 40px; line-height: 1.15; }
h2 { font-size: 24px; line-height: 1.25; }
h3 { font-size: 18px; line-height: 1.3; }
em { font-style: italic; }

a { color: var(--ink-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout shell ---------- */

.app-shell {
    display: grid;
    grid-template-columns: var(--nav-width) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    min-height: 100vh;
}
.topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-page);
}
.topbar .brand {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.topbar .spacer { flex: 1; }
.topbar .user {
    font-size: 13px;
    color: var(--text-secondary);
}

.sidenav {
    padding: 24px 16px;
    border-right: 1px solid var(--border);
    background: var(--bg-page);
}
.sidenav .nav-section {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin: 16px 12px 8px;
}
.sidenav a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
}
.sidenav a:hover { background: var(--bg-card); text-decoration: none; }
.sidenav a.active {
    background: var(--bg-card);
    font-weight: 500;
    border-left: 2px solid var(--ink-blue);
    padding-left: 10px;
}

main {
    padding: 32px 40px;
    max-width: 1400px;
}

/* ---------- Cards ---------- */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    margin-bottom: 16px;
}

/* ---------- Pills / status tags ---------- */

.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
.pill--pending    { background: var(--status-pending-bg);   color: var(--status-pending-fg); }
.pill--completed  { background: var(--status-completed-bg); color: var(--status-completed-fg); }
.pill--billed     { background: var(--status-billed-bg);    color: var(--status-billed-fg); }
.pill--cancelled  { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }
.pill--warn       { background: var(--status-warn-bg);      color: var(--status-warn-fg); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.btn--primary {
    background: var(--ink-blue);
    color: var(--bg-card);
}
.btn--primary:hover { filter: brightness(1.1); }
.btn--secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-secondary);
}
.btn--ghost {
    background: transparent;
    color: var(--text-primary);
    padding: 8px 12px;
}
.btn--ghost:hover { text-decoration: underline; }

/* ---------- Tables ---------- */

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.data th {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
table.data td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
table.data tr:nth-child(even) td { background: var(--bg-zebra); }
table.data td.mono { font-family: var(--font-mono); }
table.data td.num  { text-align: right; }
table.data td.num-lg {
    text-align: right;
    font-family: var(--font-display);
    font-size: 16px;
}

/* ---------- Review-screen cell states ---------- */

.cell-read    { background: var(--status-completed-bg); color: var(--status-completed-fg); }
.cell-derived { background: var(--status-billed-bg);    color: var(--status-billed-fg); }
.cell-unclear { background: var(--status-pending-bg);   color: var(--status-pending-fg); }
.cell-edited  { background: var(--bg-card); }

/* ---------- Form elements ---------- */

input[type="text"], input[type="email"], input[type="number"], select, textarea {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--ink-blue);
    outline-offset: 1px;
}
label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}