/* ========================================================================== Base Styles - CSS Variables, Reset, Typography Loaded by: ALL pages via their stylesheet links. Changing values here affects every page — chips, buttons, status badges, backgrounds, and spacing all read from these variables. ========================================================================== */ :root { /* Background layers — bg0 is the darkest base, bg1 is a slightly lighter surface used for the body gradient. Both are near-black navy blues. */ --bg0: #0b1220; --bg1: #0f1726; /* Glass surfaces — rgba whites layered over the dark bg for cards and panels. surface is slightly more opaque than surface2 for hierarchy. */ --surface: rgba(255, 255, 255, 0.07); --surface2: rgba(255, 255, 255, 0.05); /* Borders — two opacity levels for inner and outer border lines on cards, inputs, and nav items. */ --border: rgba(255, 255, 255, 0.12); --border2: rgba(255, 255, 255, 0.09); /* Text — primary text at ~92% white; muted text (labels, subtitles) at 70%. */ --text: rgba(255, 255, 255, 0.92); --muted: rgba(255, 255, 255, 0.7); /* Accent colors — used for status chips, stat card gradients, chart colors, and interactive highlights throughout the app. --teal: "Applied" status, primary CTA button, chart line --green: "Offer" status, green stat card --red: "Rejected" status, danger button --blue: "Interviewing" status, bar chart --amber: "Pending" status, deadline events */ --teal: #2dbdb1; --green: #6bc47b; --red: #c85f52; --blue: #3c7bd8; --amber: #ffc446; /* Border radii — three sizes for consistent rounded corners: lg = cards/modals, md = stat cards/inputs, sm = chips/pills */ --r-lg: 18px; --r-md: 14px; --r-sm: 12px; /* Shadows — shadow for modals/toasts; shadow-soft for cards and inputs */ --shadow: 0 10px 28px rgba(0, 0, 0, 0.35); --shadow-soft: 0 6px 16px rgba(0, 0, 0, 0.28); /* Spacing — base gap used by grid layouts (.info-cards, .charts, etc.) */ --gap: 18px; /* Font stack — system fonts for fast loading with no web font request */ --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); } /* Fixed background layer — always covers exactly the viewport, never shifts with page height. Prevents gradient blobs from drifting on long pages. Two radial tinted blobs (blue top-right, teal mid-left) over a linear dark-navy gradient form the ambient background on all pages. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 700px at 75% 15%, rgba(74, 118, 255, 0.14), transparent 60%), radial-gradient(900px 600px at 25% 55%, rgba(45, 189, 177, 0.1), transparent 55%), linear-gradient(180deg, #0d1423 0%, var(--bg1) 55%, var(--bg0) 100%); } /* Reset heading and paragraph margins — page scripts add spacing via layout classes rather than relying on browser defaults */ h1, h2, h3, h4, h5, h6, p { margin: 0; } /* Screen-reader only — visually hides elements while keeping them accessible to AT. Used for aria labels and descriptive-only text nodes. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Keyboard focus ring — teal glow replaces the default browser outline. Only shown for keyboard navigation (not mouse clicks) via :focus-visible. */ :focus-visible { outline: 3px solid rgba(45, 189, 177, 0.35); outline-offset: 3px; border-radius: 10px; }