/* ============================================================================ FILE: css/variables.css PURPOSE: The "design tokens" of the whole website. ---------------------------------------------------------------------------- WHAT IS THIS FILE? (beginner explanation) Instead of typing the same color code (like #2B5CE6) in 50 different places, we save each color, font, and size ONCE here, and give it a name. These named values are called "CSS custom properties" (or "CSS variables"). HOW IT WORKS: - ":root" means "the whole page" — variables declared here are available everywhere in every other CSS file. - A variable is written as: --name: value; - It is used later as: color: var(--name); WHY TEAMS DO THIS: If the client says "make our blue slightly darker", we change ONE line here and the entire website updates automatically. This file is the single source of truth for the brand's look. ========================================================================== */ :root { /* ---------------------------- BRAND COLORS ---------------------------- */ /* These five colors come from the IntendoTech Brand Guidelines document. */ --void: #F7F9FC; /* Soft off-white — main page background */ --panel: #FFFFFF; /* Pure white — card backgrounds */ --panel2: #EFF3FA; /* Soft blue-grey — card background on mouse hover */ --line: #DFE6F1; /* Subtle border lines between sections/cards */ --line2: #C4CFE4; /* Slightly darker border — for form inputs etc. */ --cobalt: #2B5CE6; /* "Intent Cobalt" — the primary brand color */ --cobalt-soft: #3D6CF0; /* Lighter cobalt — used for hover states */ --aqua: #0FA98F; /* "Pulse Aqua" (deepened for light bg contrast) */ --titan: #3A4358; /* Dark slate — normal paragraph text on light bg */ --paper: #0A0F1E; /* Near-black navy — headings and important text */ --muted: #6B7690; /* Dimmed blue-grey — labels, captions, footer */ /* ------------------------------- FONTS -------------------------------- */ /* Three font "roles". The actual font files are loaded from Google Fonts in index.html (look for the tags in the section). */ /* Display font: used for big headlines and buttons. Chakra Petch has chamfered (cut) corners that visually match the IntendoTech logo. */ --disp: 'Chakra Petch', 'IBM Plex Sans', sans-serif; /* Body font: used for paragraphs — easy to read at small sizes. */ --sans: 'IBM Plex Sans', system-ui, sans-serif; /* Mono font: every letter is the same width, like code. Used for small technical labels ("PHASE 01", "DEPLOY>") to give an engineered feel. */ --mono: 'IBM Plex Mono', ui-monospace, monospace; /* ------------------------------ SPACING -------------------------------- */ --section-pad: 110px; /* Vertical breathing room above/below sections */ --wrap-max: 1180px; /* Maximum content width on large screens */ }