/* ═══════════════════════════════════════════════════════
   Design Tokens — extracted from Figma
   Source: https://www.figma.com/design/Eg181SfVVkWViznhArPWzJ/
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ── */
    --color-dark-green: #023E2C;
    --color-light-green: #C8DD69;
    --color-beige: #EFECE5;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* ── Semantic Colors ── */
    --color-approved: #e6f9e6;
    --color-overdue-bg: rgba(245, 158, 11, 0.25);
    --color-declined-bg: rgba(255, 0, 0, 0.15);
    --color-selected-bg: rgba(200, 221, 105, 0.6);
    --color-hover-bg: rgba(200, 221, 105, 0.3);
    --color-muted: rgba(0, 0, 0, 0.5);
    --color-surface-subtle: rgba(0, 0, 0, 0.05);

    /* ── Table Row Colors (from Figma node 676:9697) ── */
    --table-row-white: #ffffff;
    --table-row-even: #f7f7f7;
    --table-row-overdue: #fce2b6;
    --table-row-selected: #eff5d2;
    --table-row-selected-even: #e9efcc;

    /* ── Borders ── */
    --color-border: rgba(0, 0, 0, 0.2);
    --color-border-light: rgba(0, 0, 0, 0.1);
    --color-border-selected: #C8DD69;
    --color-border-overdue: rgba(158, 102, 7, 0.28);
    --color-border-hover: rgba(164, 181, 86, 0.55);
    --color-border-white-subtle: rgba(255, 255, 255, 0.4);

    /* ── Font Families ── */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --font-ui: 'Lato', sans-serif;

    /* ── Font Sizes ── */
    --text-xs: 10px;
    --text-sm: 11px;
    --text-base: 12px;
    --text-md: 13px;
    --text-lg: 14px;
    --text-xl: 16px;
    --text-2xl: 18px;
    --text-3xl: 24px;
    --text-4xl: 34px;

    /* ── Line Heights ── */
    --leading-tight: 16px;
    --leading-normal: 18px;
    --leading-relaxed: 20px;
    --leading-loose: 24px;
    --leading-heading: 32px;

    /* ── Spacing ── */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 64px;

    /* ── Border Radius ── */
    --radius-sm: 3px;
    --radius-input: 4px;
    --radius-card: 8px;
    --radius-modal: 16px;
    --radius-pill: 18px;
    --radius-content: 24px;

    /* ── Shadows ── */
    --shadow-card: 0px 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-header: 0px 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-content: 0px 4px 16px rgba(0, 0, 0, 0.05);
    --shadow-input-inset: inset 0px 2px 4px rgba(0, 0, 0, 0.1);

    /* ── Layout ── */
    --header-height: 64px;
    --sidebar-width: 202px;
    --bottom-bar-height: 64px;
    --card-width: 400px;
    --modal-width: 393px;
    --modal-width-desktop: 560px;
}

/* ═══════════════════════════════════════════════════════
   Typography Utility Classes
   ═══════════════════════════════════════════════════════ */

/* Heading / L — Page & section titles */
.text-heading-l {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-3xl);
    line-height: var(--leading-heading);
}

/* Heading / M — Sub-headings, company names */
.text-heading-m {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xl);
    line-height: var(--leading-loose);
}

/* Body / Default — Standard text */
.text-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* Body / Strong — Amounts, emphasis */
.text-body-strong {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

/* Body / Small — Metadata, dates, secondary */
.text-body-small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: var(--leading-tight);
}

/* Label / Default — Field labels, column headers */
.text-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: var(--leading-tight);
}

/* Label / Mono — Mono-spaced labels, table column headers */
.text-label-mono {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    letter-spacing: 0.6px;
}

/* Label / CAPS — Currency codes, small badges */
.text-label-caps {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Table / Numeric — Numeric table cells */
.text-numeric {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    font-feature-settings: 'zero' 1;
}

/* Table / Numeric / Bold — Totals */
.text-numeric-bold {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: normal;
    letter-spacing: 0.6px;
    font-feature-settings: 'zero' 1;
    text-transform: uppercase;
}

/* Button / Default */
.text-button {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-md);
    line-height: normal;
}

/* Stat / Text — KPI bar values */
.text-stat {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: normal;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}