/* ============================================
   BASE
   Global reset, body defaults, and the type scale
   (headings, body text, labels, links). No component
   or page-specific rules belong here.
   Loaded SECOND, after tokens.css.
   ============================================ */
/* --------------------------------------------
   GLOBAL RESET
-------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --------------------------------------------
   FONT FACES
-------------------------------------------- */
@font-face {
    font-family: 'sohne-var';
    src: url('/static/fonts/TestSohne-Leicht.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'sohne-var';
    src: url('/static/fonts/TestSohne-Extrafett.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'sohne-var', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-main);
    color: var(--heading-navy);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------
   TYPOGRAPHY
-------------------------------------------- */
h1, .h1 { font-size: 32px; font-weight: 700; color: var(--heading-navy); line-height: 1.2; }
h2, .h2 { font-size: 24px; font-weight: 600; color: var(--heading-navy); line-height: 1.3; }
h3, .h3 { font-size: 20px; font-weight: 600; color: var(--heading-navy); line-height: 1.4; }
h4, .h4 { font-size: 18px; font-weight: 600; color: var(--heading-navy); line-height: 1.4; }

.body-text   { font-size: 14px; font-weight: 400; color: var(--heading-navy); line-height: 1.5; }
.body-small  { font-size: 11px; font-weight: 400; color: var(--text-muted);   line-height: 1.5; }
.body-large  { font-size: 18px; font-weight: 300; line-height: 1.40; }
.label       { font-size: 11px; font-weight: 500; color: var(--label-dark); text-transform: uppercase; letter-spacing: 0.5px; }
.label-text  { font-size: 14px; font-weight: 400; color: var(--label-dark); }
.caption-text  { font-size: 13px; font-weight: 400; }
.caption-small { font-size: 12px; font-weight: 300; }

.heading-1 { font-size: 48px; line-height: 1.15; letter-spacing: -0.96px; }
.heading-2 { font-size: 32px; line-height: 1.10; letter-spacing: -0.64px; }
.heading-3 { font-size: 26px; line-height: 1.12; letter-spacing: -0.26px; }
.heading-4 { font-size: 22px; line-height: 1.10; letter-spacing: -0.22px; }

.tabular-numbers,
.invoice-amount,
.price-value,
.data-number {
    font-feature-settings: "tnum";
    letter-spacing: -0.36px;
}

a, .link {
    color: var(--brand-purple);
    text-decoration: none;
    font-weight: 400;
    transition: color var(--transition-fast);
}
a:hover, .link:hover { color: var(--brand-purple-hover); }

/* --------------------------------------------
   BROWSER CHROME (scrollbar, favicon, Alpine.js)
-------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #E5EDF5; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-purple); }

[x-cloak] { display: none !important; }

/* Ensure favicon displays properly */
link[rel="icon"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}