/* ============================================================ DESIGN TOKENS — single source of truth for all visual values. Direction: "Technical datasheet". The site should read like a well-set engineering document — a CAD viewport, a spec sheet, a drawing sheet — not a generic dark-glass template. Rules: - ONE dominant accent (CAD-highlight orange). Everything interactive is orange. Nothing else competes. - Teal is a STATUS colour only ("Live", "Verified"). Never decoration, never a heading. - Corners are near-square. Technical drawings do not have 12px radii. - Mono carries all *data*: IDs, dates, semesters, tools, counts. Serif carries voice. Sans carries prose. Never hardcode these values in component CSS — always reference a variable. NOTE: fonts are loaded via in each page's , not via @import here. @import inside a stylesheet serialises the request behind the CSS download; a starts it immediately. ============================================================ */ :root { /* ========================================================== 1. SURFACES — graphite, with a faint cool cast. Not pure black: pure black kills the drawing-grid texture and makes photographs look like they float. ========================================================== */ --c-void: #08090a; /* page ground */ --c-surface-1: #0e1013; /* raised panel / nav */ --c-surface-2: #14171b; /* card */ --c-surface-3: #1b1f24; /* card header / image well */ --c-surface-4: #252a30; /* hover / pressed */ /* ========================================================== 2. INK ========================================================== */ --c-ink: #e9ebed; /* headings, primary text */ --c-ink-muted: #a9b1b8; /* body copy */ --c-ink-faint: #79828a; /* metadata, captions */ --c-rule: rgba(255, 255, 255, 0.085); /* hairlines */ --c-rule-strong: rgba(255, 255, 255, 0.17); /* emphasis */ /* ========================================================== 3. ACCENT — the single dominant colour. A CAD "selected entity" orange. Used for: links, active nav, primary buttons, section markers, hover states, drawing-sheet callouts. ========================================================== */ --c-accent: #ff8a3d; --c-accent-bright:#ffa367; /* hover */ --c-accent-deep: #d96a20; /* pressed */ --c-on-accent: #241003; /* text on an orange fill */ --c-accent-a06: rgba(255, 138, 61, 0.06); --c-accent-a12: rgba(255, 138, 61, 0.12); --c-accent-a24: rgba(255, 138, 61, 0.24); --c-accent-a40: rgba(255, 138, 61, 0.40); /* ========================================================== 4. SIGNAL — status only. "Live", "Verified", "Complete". Never used for decoration or headings. ========================================================== */ --c-signal: #4fd1c5; --c-signal-a12: rgba(79, 209, 197, 0.12); --c-signal-a32: rgba(79, 209, 197, 0.32); /* ========================================================== 5. DRAWING GRID — replaces the old cosmic starfield. 8px minor / 64px major, like engineering graph paper or a CAD viewport grid. Deliberately near-invisible: it should register as texture, never as pattern. ========================================================== */ --grid-minor: rgba(255, 255, 255, 0.020); --grid-major: rgba(255, 255, 255, 0.048); --grid-minor-size: 8px; --grid-major-size: 64px; /* ========================================================== 6. TYPOGRAPHY Instrument Serif — display voice. High contrast, editorial, gives a student portfolio authorship and weight. Public Sans — body. Genuinely neutral, technical provenance (US Web Design System), not Inter. IBM Plex Mono — all data. IBM's engineering typeface; the single strongest "this person is an engineer" signal available in type. ========================================================== */ --font-display: 'Instrument Serif', 'Noto Serif', Georgia, serif; --font-sans: 'Public Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Fluid scale. Every size interpolates with the viewport so the layout never has a "broken at 900px" size. */ --t-2xs: 11px; /* micro mono label */ --t-xs: 12px; /* mono metadata */ --t-sm: 14px; /* UI, nav, tags */ --t-base: clamp(16px, 0.97rem + 0.15vw, 17px); /* body */ --t-lg: clamp(18px, 1.05rem + 0.30vw, 20px); /* lead paragraph */ --t-xl: clamp(22px, 1.20rem + 0.75vw, 28px); /* card title */ --t-2xl: clamp(28px, 1.45rem + 1.40vw, 40px); /* section heading */ --t-3xl: clamp(34px, 1.70rem + 2.30vw, 54px); /* page heading */ --t-4xl: clamp(44px, 1.90rem + 4.60vw, 88px); /* hero name */ --lh-tight: 1.12; --lh-snug: 1.28; --lh-normal: 1.55; --lh-loose: 1.72; --track-mono: 0.08em; /* mono letter-spacing */ --track-label: 0.18em; /* eyebrow / micro-label */ --track-display: -0.02em; /* display negative tracking */ /* ========================================================== 7. SPACING — 8px base unit ========================================================== */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-7: 56px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --space-16: 128px; /* Section rhythm scales down on small screens */ --section-gap: clamp(56px, 4vw + 32px, 112px); --page-margin: clamp(16px, 4vw, 48px); --container-max: 1200px; --measure: 68ch; /* max line length for body prose */ --column-gap: 24px; --card-padding: clamp(20px, 2vw + 12px, 32px); /* ========================================================== 8. RADII — near-square. This is the single biggest visual departure from the old glass look, and the one that does the most work for the "technical" read. ========================================================== */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-pill: 9999px; /* status chips only */ /* ========================================================== 9. ELEVATION — hairlines do the work, not blur. ========================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); /* ========================================================== 10. MOTION ========================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-mid: 260ms; --dur-slow: 520ms; /* ========================================================== 11. LAYOUT CONSTANTS ========================================================== */ --nav-height: 64px; }