/* Shared foundation loaded ahead of every page stylesheet.
 *
 * The five page stylesheets (app, overview, account-app, auth, landing) each
 * declared Inter at the head of their font stack, but Inter was never actually
 * served: no @font-face, no font files. Every user fell through to the system
 * UI font. These faces make the declared stack real.
 *
 * Self-hosted rather than pulled from a CDN so the app has no third-party
 * dependency on the render path. WhiteNoise fingerprints and far-future-caches
 * them, and collectstatic rewrites the relative url() below to the hashed name.
 *
 * It also carries the design tokens, so the accounts area and the dashboard
 * resolve the same palette, type scale and spacing as the operations app
 * instead of each keeping a private copy.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.1ad231aac0a8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter ships contextual alternates and ligatures that make UI text settle. */
html {
  font-feature-settings: 'liga' 1, 'calt' 1;
}

/* ── Design tokens ──────────────────────────────────────────────────────
   Lifted out of app.css so every shell resolves the same system. The
   landing and auth stylesheets use their own token vocabulary and share
   no names with these, so they are unaffected.
*/
:root {
    /* ── Scale tokens ── */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-300: #fca5a5;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --brand-burnt: #b42318;
    --brand-burnt-strong: #8f1d15;

    /* ── Semantic color aliases (Design System) ── */
    --surface-page:    #f6f7f9;
    --surface-card:    #ffffff;
    --surface-soft:    #f8fafc;
    --surface-sidebar: #0f172a;
    --surface-sidebar-brand: #020617;

    --text-strong:  #0f172a;
    --text-body:    #172033;
    --text-muted:   #64748b;
    --text-subtle:  #94a3b8;
    --text-invert:  #ffffff;
    --text-link:    #dc2626;

    --border-line:        #e2e8f0;
    --border-line-strong: #cbd5e1;
    --border-focus:       #dc2626;

    --accent-primary:       #dc2626;
    --accent-primary-hover: #b91c1c;
    --accent-primary-press: #991b1b;
    --accent-operations:    #15803d;

    /* ── Status fills ── */
    --status-success-bg: #dcfce7; --status-success-fg: #166534;
    --status-warning-bg: #fef3c7; --status-warning-fg: #92400e;
    --status-danger-bg:  #fee2e2; --status-danger-fg:  #b91c1c;
    --status-neutral-bg: #e2e8f0; --status-neutral-fg: #334155;
    --status-on-bg:      #ecfdf5; --status-on-fg:      #15803d;

    /* ── Typography ── */
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-ui:       600;
    --weight-bold:     700;
    --weight-black:    800;
    --text-h1: 32px; --text-h2: 24px; --text-h3: 18px;
    --text-lg: 16px; --text-base: 14px; --text-sm: 13px;
    --text-xs: 12px; --text-2xs: 11px; --text-stat: 30px;
    --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.45; --leading-relaxed: 1.5;
    --tracking-tight: -0.01em; --tracking-normal: 0;
    --tracking-wide: 0.04em; --tracking-eyebrow: 0.08em;

    /* ── Spacing ── */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px;

    /* ── Radius ── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --radius-xl:   12px;
    --radius-2xl:  14px;
    --radius-3xl:  16px;
    --radius-pill: 999px;

    /* ── Shadows ── */
    --shadow-card:  0 1px 1px rgba(15,23,42,.03), 0 1px 3px rgba(15,23,42,.05);
    --shadow-hover: 0 2px 4px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.07);
    --shadow-pop:   0 8px 12px rgba(15,23,42,.05), 0 24px 48px rgba(15,23,42,.14);
    --shadow-btn:   0 1px 2px rgba(15,23,42,.06);
    --shadow-inset-hairline: inset 0 0 0 1px rgba(15,23,42,.04);

    /* ── Focus rings ── */
    --ring-app:  0 0 0 3px rgba(220,38,38,.16);

    /* ── Form controls ── */
    --control-height:    38px;
    --control-height-sm: 32px;
    --control-bg:        #ffffff;
    --control-border:    #d5dbe4;
    --control-placeholder: #9aa5b4;

    /* ── Layout ── */
    --sidebar-width: 256px;
    --topbar-height: 64px;
    --content-max:   1180px;

    /* ── Motion ── */
    --transition-ui: 0.18s ease;

    /* ── Safe areas & app internals ── */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --content-bottom-buffer: 28px;
  }