/* FILE: tokens.css PURPOSE: The single place where all reusable design values live — colours, fonts, spacing, etc. Every other file should reference these variables instead of hard-coding values, so updating a colour or font here updates it everywhere on the site. STATUS: Colours and fonts filled in from Figma. Spacing and other tokens still to come. */ /* Google Fonts (Roboto Condensed, Open Sans) are NOT loaded here. Loading fonts via tags in the page is faster than a CSS @import (the browser can start downloading the font in parallel with everything else, instead of waiting to parse this file first). See /src/components/shared/head-fonts.html, included in every page's alongside this stylesheet. */ :root { /* ---- COLOURS ---- */ --color-bg-default: #F0EAE5; /* page backgrounds, same warm off-white as --color-bg-accent below now, per Lucrecia's request (was #FAF9F6) */ --color-bg-accent: #F0EAE5; /* landing page title containers, footer promo placeholder, etc */ --color-bg-content: #F4F1EF; /* the bordered max-width content box on every page (.work-layout, .about-layout, .project-page), per Lucrecia's request -- was --color-bg-work when it only applied to the Work section, renamed now it's used everywhere; slightly lighter than the site's own --color-bg-default */ --color-bg-nav: #FFFCF9; /* the floating nav bar (float-nav.css) and Landing V3's own hero card, both in its hero state and once morphed into the nav -- per Lucrecia's request, no border on either any more (see those rules) */ --color-text-dark: #182F3D; /* used for all text and container strokes */ --color-placeholder: #D9D9D9; /* temporary grey fill for images not uploaded yet, not a brand colour */ --color-accent: #0F54F8; /* bold accent blue, e.g. Landing V3's active nav link (same hex as --color-csa-mobile-accent below, added here as its own general-purpose token since this use isn't CSA-specific) */ /* Shared CSA brand palette, dark navy + blue, used by csa-game.css (the Final designs section's full-bleed background/grid) AND csa-website.css (the identity check gate's full-bleed background). */ --color-csa-mobile-bg: #010131; --color-csa-mobile-accent: #0F54F8; --color-csa-mobile-text: #FFFFFF; /* headings on the dark navy background */ --color-csa-mobile-text-muted: rgba(255, 255, 255, 0.7); /* body copy on the dark navy background */ /* CSA Website project page only (see csa-website.css), the identity check gate's red/green buttons and warning states. Eyeballed approximations from Lucrecia's reference screenshots, not sampled exact values, flag if either looks off once compared side by side. */ --color-csa-web-red: #E8453C; --color-csa-web-green: #3DBE5B; /* ---- FONTS ---- */ --font-heading: 'Roboto Condensed', sans-serif; --font-body: 'Open Sans', sans-serif; /* CSA Website project page only (see csa-website.css), the "hacker terminal" look of the identity check gate. Placeholder pick, swap if a different monospace font was wanted. */ --font-mono: 'IBM Plex Mono', monospace; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Font sizes */ --font-size-landing-title: 50px; /* Roboto Condensed Semi Bold */ --font-size-h1: 40px; /* Page title, Roboto Condensed Medium */ --font-size-h2: 30px; /* Section heading, Roboto Condensed Medium */ --font-size-h3: 18px; /* Subheading, Roboto Condensed Bold */ --font-size-body: 14px; /* Body copy / button CTAs, Open Sans Regular */ --font-size-small: 14px; /* Captions / nav links, Open Sans Regular */ /* Project pages only (see project.css), NOT the site-wide body copy size above, everywhere else keeps using --font-size-body. */ --font-size-project-body: 16px; --line-height-project-body: 1.6; /* was 1.56, per Lucrecia's request for a little more breathing room -- applies everywhere this token is used, i.e. wherever 16px is paired with it */ /* ---- SPACING ---- */ /* Reusable spacing scale (margins, padding, gaps). Fill in once we know the layout grid, e.g. --space-sm: 8px; */ /* ---- OTHER TOKENS ---- */ --radius-image: 10px; /* corner rounding for thumbnails and other images */ --shadow-image: 0 4px 10px rgba(0, 0, 0, 0.1); /* drop shadow for thumbnails and other images: 4px Y offset, 10px blur, black 10% opacity */ --shadow-image-hover: 0 4px 10px rgba(0, 0, 0, 0.2); /* thumbnail hover state: same shadow, opacity +10% */ } /* Mobile-only size overrides, per Lucrecia's request: H1/H2 read too large on a narrow screen. Redeclaring the custom properties inside a media query updates every element that uses var(--font-size-h1)/ var(--font-size-h2) at once, desktop (the :root block above) is untouched. */ @media (max-width: 768px) { :root { --font-size-h1: 30px; --font-size-h2: 25px; } }