@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Anybody:wght@500;700;900&display=swap');
@import url('tokens.css');

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-16);
    line-height: var(--line-height-body);
    color: var(--color-content-primary);
    background: var(--color-background-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--color-content-link); text-decoration: none; }
a:hover { color: var(--color-content-link-hover); }

ul, ol { list-style: none; }

/* ============================================================
   Typography
   ============================================================ */
.display, h1.display, h2.display {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-negative-md);
    line-height: var(--line-height-title);
}

h1 {
    font-size: var(--font-size-32);
    line-height: var(--line-height-36);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-negative-md);
}

h2 {
    font-size: var(--font-size-24);
    line-height: var(--line-height-30);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-negative-sm);
}

h3 {
    font-size: var(--font-size-20);
    line-height: var(--line-height-28);
    font-weight: var(--font-weight-semi-bold);
}

.text-muted { color: var(--color-content-tertiary); }
.text-small { font-size: var(--font-size-14); }

/* ============================================================
   Buttons (pill style — Wise-inspired)
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-8);
    height: var(--size-medium);
    padding: 0 var(--padding-medium);
    border-radius: var(--radius-full);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semi-bold);
    line-height: var(--line-height-control);
    letter-spacing: var(--letter-spacing-negative-xs);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
    text-align: center;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary {
    background: var(--color-interactive-control);
    color: var(--color-content-primary);
}
.btn--primary:hover { background: var(--color-interactive-control-hover); }
.btn--primary:active { background: var(--color-interactive-control-active); }

.btn--dark {
    background: var(--color-interactive-primary);
    color: var(--color-white);
}
.btn--dark:hover { background: var(--color-interactive-primary-hover); color: var(--color-white); }

.btn--ghost {
    background: transparent;
    color: var(--color-content-primary);
}
.btn--ghost:hover { background: var(--color-interactive-secondary-hover); }

.btn--link {
    background: transparent;
    color: var(--color-content-link);
    padding: 0;
    height: auto;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn--full { width: 100%; }
.btn--large {
    height: var(--size-large);
    padding: 0 var(--padding-large);
    font-size: var(--font-size-18);
}

/* ============================================================
   Inputs & forms
   ============================================================ */
.field { margin-bottom: var(--space-small); }

.label {
    display: block;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-content-primary);
    margin-bottom: var(--size-8);
}

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    height: var(--size-large);
    padding: 0 var(--padding-small);
    background: var(--color-white);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-small);
    font-size: var(--font-size-16);
    color: var(--color-content-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.textarea { height: auto; min-height: 96px; padding: var(--padding-small); resize: vertical; }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--color-border-strong); }
.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--color-interactive-primary);
    box-shadow: 0 0 0 3px rgba(159, 232, 112, 0.4);
}
.input--error,
.input.is-error {
    border-color: var(--color-sentiment-negative);
}

.field-hint {
    font-size: var(--font-size-12);
    color: var(--color-content-tertiary);
    margin-top: var(--size-4);
}
.field-error {
    font-size: var(--font-size-12);
    color: var(--color-sentiment-negative);
    margin-top: var(--size-4);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--color-background-elevated);
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--radius-medium);
    padding: var(--padding-medium);
}
.card--lg { padding: var(--padding-large); border-radius: var(--radius-large); }
.card--flush { padding: 0; }
.card--shadow { box-shadow: var(--shadow-md); border-color: transparent; }

/* ============================================================
   Alerts / flash
   ============================================================ */
.alert {
    padding: var(--padding-small) var(--padding-medium);
    border-radius: var(--radius-small);
    font-size: var(--font-size-14);
    margin-bottom: var(--space-small);
}
.alert--error {
    background: var(--color-sentiment-negative-secondary);
    color: var(--color-sentiment-negative);
}
.alert--success {
    background: var(--color-sentiment-positive-secondary);
    color: var(--color-sentiment-positive);
}
.alert--warning {
    background: var(--color-sentiment-warning-secondary);
    color: var(--color-sentiment-warning-content);
}

/* ============================================================
   Layout — auth (centered)
   ============================================================ */
.auth-screen {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--color-white);
}
.auth-header {
    padding: var(--padding-medium) var(--padding-large);
    border-bottom: 1px solid var(--color-border-neutral);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.auth-header__logo { height: 32px; }
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-large) var(--padding-medium);
}
.auth-card {
    width: 100%;
    max-width: 420px;
}
.auth-card__title {
    text-align: center;
    margin-bottom: var(--size-8);
}
.auth-card__subtitle {
    text-align: center;
    color: var(--color-content-tertiary);
    font-size: var(--font-size-14);
    margin-bottom: var(--space-medium);
}
.auth-footer {
    padding: var(--padding-medium) var(--padding-large);
    font-size: var(--font-size-12);
    color: var(--color-content-tertiary);
    text-align: center;
}

/* ============================================================
   Layout — app shell (sidebar)
   ============================================================ */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    background: var(--color-white);
}
.sidebar {
    background: var(--color-white);
    border-right: 1px solid var(--color-border-neutral);
    padding: var(--padding-medium);
    display: flex;
    flex-direction: column;
    gap: var(--space-medium);
}
.sidebar__logo {
    height: 32px;
    margin-bottom: var(--space-small);
}
.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);
}
.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--size-12);
    padding: var(--size-10) var(--padding-small);
    border-radius: var(--radius-small);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    color: var(--color-content-primary);
    transition: background-color 0.15s ease;
}
.sidebar__link:hover { background: var(--color-interactive-secondary-hover); color: var(--color-content-primary); }
.sidebar__link.is-active { background: rgba(22, 51, 0, 0.06); font-weight: var(--font-weight-semi-bold); }

.app-main {
    padding: var(--padding-large);
    overflow-x: auto;
}

/* ============================================================
   Utilities
   ============================================================ */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-small); }
.stack-lg > * + * { margin-top: var(--space-medium); }

.row { display: flex; align-items: center; gap: var(--size-12); }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.mt-sm { margin-top: var(--space-small); }
.mt-md { margin-top: var(--space-medium); }
.mt-lg { margin-top: var(--space-large); }
.mb-sm { margin-bottom: var(--space-small); }
.mb-md { margin-bottom: var(--space-medium); }

.text-center { text-align: center; }

@media (max-width: 768px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .app-main { padding: var(--padding-medium); }
}