/* ============================================================================= FILE: tokens.css WHAT: Defines every reusable "design token" (color, font size, spacing, radius, shadow) as a CSS Custom Property (a CSS variable) on :root, so the whole theme shares ONE single source of truth for design. WHY: If you ever want to change the shade of blue used across the entire site, you change it in exactly ONE place (below) instead of hunting through dozens of CSS files. Every other stylesheet in this theme reads these values with var(--name-of-token) instead of hardcoding colors/sizes directly. LOAD ORDER: this file is loaded FIRST (before reset.css/base.css/etc, see inc/enqueue.php) because every other file depends on these variables already existing. ============================================================================= */ :root { /* --------------------------------------------------------------------- COLOR Brand palette: blue + white, with near-black body text (per project spec). We use a near-black (#0b0b0c) instead of pure #000000 for body text -- pure black on a pure white background is a slightly harsh, high-contrast combination that can cause eye strain on long articles; a near-black is still "black" to the eye but easier to read for a long time (this matters a lot for a blog about long technical posts). --------------------------------------------------------------------- */ --color-blue-700: #0f3fc4; /* darker blue: hover/active state of buttons and links */ --color-blue-600: #1552f0; /* PRIMARY brand blue: buttons, links, focus rings, accents */ --color-blue-100: #e8f0fe; /* very light blue tint: subtle backgrounds, badges, hover rows */ --color-white: #ffffff; /* page background, button text on blue */ --color-black: #0b0b0c; /* near-black: default body text color */ --color-gray-600: #4b5157; /* muted/secondary text (still passes contrast checks) */ --color-gray-200: #e5e7eb; /* borders, dividers, disabled backgrounds */ --color-gray-50: #f7f8fa; /* very light gray: card backgrounds, striped rows */ --color-success: #1c7c3c; /* green: success messages, "in stock", form success */ --color-error: #c8102e; /* red: error messages, form validation errors */ /* --------------------------------------------------------------------- TYPOGRAPHY We deliberately use the operating system's own font ("system-ui" and its fallbacks) instead of downloading a custom web font (like Google Fonts). This means the browser can start drawing text INSTANTLY, with zero extra network requests -- a real, measurable performance win, since custom web fonts are one of the most common causes of slow "first paint" on mobile. The trade-off is slightly less unique branding, which is an intentional choice for a performance-first theme. --------------------------------------------------------------------- */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading: var(--font-body); /* same stack today, but kept as its OWN token so that if you ever want headings to use a different font than body text, you only have to change this one line. */ /* * Font size scale. * * IMPORTANT PROJECT RULE: --text-caption (12px) is ONLY ever used for * small "meta" text -- things like post dates, author names, tag * pills, breadcrumbs, and form hint text. It must NEVER be used for * actual paragraph/body copy, which would be too small to read * comfortably. Real body text always uses --text-body (16px) or larger. * * We use "rem" units (not "px") for font sizes. 1rem always equals the * user's browser default font size (usually 16px, but the user can * change it in their browser/OS accessibility settings). Using rem * means our whole site scales up correctly if someone increases their * browser's default text size for readability -- using raw "px" values * would ignore that accessibility setting. */ --text-caption: 0.75rem; /* 12px -- CAPTION/META TEXT ONLY, see rule above */ --text-body: 1rem; /* 16px -- default paragraph/body copy size */ --text-body-lg: 1.125rem; /* 18px -- "lead" intro paragraphs */ --text-h4: 1.25rem; /* 20px */ --text-h3: 1.5rem; /* 24px */ --text-h2: 1.875rem; /* 30px */ --text-h1: 2.25rem; /* 36px on mobile; scaled up further at wider screens using @media queries in base.css, not by changing this token, since the token represents the mobile-first starting size */ --leading-normal: 1.6; /* body line-height: generous spacing between lines makes long technical articles easier to read */ --leading-tight: 1.25; /* heading line-height: headings are short, so tighter spacing looks better and saves vertical space */ /* --------------------------------------------------------------------- SPACING SCALE Using a fixed set of spacing values (instead of random numbers like "13px" or "22px" scattered everywhere) keeps margins/padding/gaps visually consistent across the whole site, and makes CSS easier to scan -- once you learn the scale, "--space-8" always means the same gap everywhere it's used. --------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container-max: 1200px; /* widest a page's content column ever gets, no matter how big the browser window is */ --radius-sm: 4px; /* small rounded corners: buttons, form inputs, tags */ --radius-md: 8px; /* larger rounded corners: cards, panels */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); /* ^ a soft, subtle drop shadow used on cards to lift them off the page background very slightly, without looking heavy or dated. */ /* --------------------------------------------------------------------- BREAKPOINT REFERENCE (documentation only!) CSS Custom Properties like the ones above CANNOT be used inside an @media (min-width: ...) condition -- that's a hard limitation of CSS, not something we can work around with variables. So instead of a real variable, this comment is the "source of truth" for what breakpoint values to type literally into every @media rule across the theme: 480px = large phones (landscape phones / small tablets) 768px = tablets 1024px = small laptops / large tablets 1280px = desktop Every stylesheet in this theme is written MOBILE FIRST: the plain CSS rule (no @media wrapper at all) is the PHONE layout. Then we ADD an @media (min-width: 768px) block to override/enhance things for bigger screens. We never write @media (max-width: ...) to work backwards from a desktop-first layout. --------------------------------------------------------------------- */ }