/* src/styles/tokens.css
 * Root design tokens, reset/base, tabular-numerals helper, and the two fixed
 * background layers (app-bg / app-grid). The dark visual system.
 *
 * Brand: Case Leverage (discovery/brand.md, run 2). Midnight #0B1220 is the
 * page, the electric blue #2563EB is for fills and buttons with white text on
 * them, and #719AF2 is the blue for TEXT on the dark (the electric blue
 * itself is only 3.6:1 on midnight). Positive and negative stay the mint and
 * coral the dashboard always had; the brand defines neither. Manrope sets the
 * headings and the big numbers, Inter everything else; both are loaded from
 * Google Fonts in public/index.html, and the stacks fall back to the system
 * UI font if the request fails.
 */

:root {
    --bg: #0b1220;
    --bg-elev: #151b29;
    --card: rgba(255, 255, 255, .04);
    --card-hover: rgba(255, 255, 255, .07);
    --hairline: rgba(255, 255, 255, .10);
    --hairline-strong: rgba(255, 255, 255, .15);
    --text: #e8eef5;
    --text-dim: #90a1b9;
    --text-faint: #62748e;
    /* Blue for text, links and focus on the dark. */
    --accent: #719af2;
    --accent-2: #8ec5ff;
    /* Blue for fills and buttons; the text on it is white. */
    --accent-fill: #2563eb;
    --accent-fill-2: #2b7fff;
    --accent-glow: rgba(37, 99, 235, .26);
    --pos: #37e0a6;
    --neg: #ff6b7d;
    --warn: #f5b544;
    --surface-2: #1b2331;
    --radius: 16px;
    /* Opaque fill for a frozen (sticky) table column. It has to be opaque, not
       a --card style translucent wash, because the scrolling cells slide
       underneath it and a pace-coloured cell would otherwise read through.
       These are --bg with 4% and 7% white composited, so the frozen column
       matches the cards. */
    --table-frozen-bg: #151c29;
    --table-frozen-bg-hover: #1c2330;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-head: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html,
body,
#root {
    height: 100%
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -.01em;
    overflow-x: hidden
}

.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum"
}

.app-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 78% 28%, rgba(37, 99, 235, .24), transparent 34%), radial-gradient(60% 50% at 10% -5%, rgba(37, 99, 235, .10), transparent 60%)
}

.app-grid {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, black, transparent 78%);
    mask-image: radial-gradient(90% 70% at 50% 0%, black, transparent 78%);
    opacity: .4
}

/* Manrope for the headings and the big numbers; Inter stays the body font. */
.panel-title,
.cc-kpi-val,
.auth-title,
.brand-title,
.sb-company-name,
.page-title,
.topbar-title {
    font-family: var(--font-head);
    font-weight: 700
}