/* ============================================================ DESIGN TOKENS — FANUCAiLeadCV Single source of truth for all visual design decisions. How to read: var(--color-accent) → FANUC Yellow (#FFCB06) var(--space-4) → 16px (4px base-unit × 4) var(--text-2xl) → fluid 24–32px via clamp() var(--duration-slow) → 400ms animation duration Sections: 1. Colour Palette 2. Spacing Scale (4px base unit) 3. Fluid Type Scale 4. Font Families + Weights + Leading + Tracking 5. Border Radii 6. Shadows & Glows 7. Easing Functions + Duration Scale 8. Z-index Scale ============================================================ */ :root { /* ---------------------------------------------------------- 1. COLOUR PALETTE ---------------------------------------------------------- Naming convention: --color-bg-* : background layers (darkest → lightest) --color-surface-* : raised elements (cards, panels) --color-accent : FANUC Yellow — primary brand accent --color-text-* : type hierarchy --color-border-* : stroke / divider colours --color-*-dim : low-opacity tint of the parent colour ---------------------------------------------------------- */ /* Background layers — deepest to shallowest */ --color-bg-base: #0a0b0f; /* page background */ --color-bg-raised: #111319; /* inset sections, alt rows */ --color-bg-subtle: #1a1d27; /* hover states */ /* Surface layers — raised elements */ --color-surface-1: #1e2130; /* cards, panels */ --color-surface-2: #252840; /* tooltips, elevated modals */ /* Overlay */ --color-overlay: rgba(10, 11, 15, 0.78); /* hero dark veil over photo */ --color-overlay-light: rgba(10, 11, 15, 0.45); /* Brand — FANUC Yellow */ --color-accent: #FFCB06; --color-fanuc-red: #ED1C24; /* FANUC corporate logo red */ --color-accent-hover: #ffd633; /* +10% lightness on hover */ --color-accent-dim: rgba(255, 203, 6, 0.15); /* subtle glow bg */ --color-accent-dim-2: rgba(255, 203, 6, 0.08); /* very faint tint */ /* Text hierarchy */ --color-text-primary: #f0f2f8; /* headings, body copy */ --color-text-secondary: #a8adc4; /* labels, supporting text */ --color-text-muted: #5c6285; /* timestamps, fine print */ --color-text-inverse: #0a0b0f; /* text placed on --color-accent */ --color-text-accent: #FFCB06; /* accent-coloured inline text */ /* Borders / Dividers */ --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.14); --color-border-accent: rgba(255, 203, 6, 0.40); /* Semantic status */ --color-success: #34d399; --color-error: #f87171; --color-warning: #fbbf24; /* ---------------------------------------------------------- 2. SPACING SCALE (4px base unit) ---------------------------------------------------------- --space-N = N × 4px Use these everywhere margins, paddings, and gaps appear. Never use magic pixel numbers outside this file. --space-1 = 4px --space-2 = 8px --space-3 = 12px --space-4 = 16px --space-5 = 20px --space-6 = 24px --space-8 = 32px --space-10 = 40px --space-12 = 48px --space-16 = 64px --space-20 = 80px --space-24 = 96px --space-32 = 128px ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------------------------------------------------------- 3. FLUID TYPE SCALE ---------------------------------------------------------- clamp(minimum, preferred-viewport-calc, maximum) Base: 1rem = 16px (browser default — never override on html) Preferred value uses vw to grow fluidly between 375px and 1440px viewports, so no breakpoint hacks are needed. --text-xs : 12–14px (metadata, timestamps) --text-sm : 14–16px (labels, captions) --text-base : 16–18px (body copy) --text-lg : 18–20px (lead paragraphs) --text-xl : 20–24px (sub-headings) --text-2xl : 24–32px (section sub-titles) --text-3xl : 32–48px (section titles) --text-4xl : 40–64px (large display text) --text-hero : 48–88px (hero headline) ---------------------------------------------------------- */ --text-xs: clamp(0.75rem, 1.4vw, 0.875rem); --text-sm: clamp(0.875rem, 1.7vw, 1rem); --text-base: clamp(1rem, 2vw, 1.125rem); --text-lg: clamp(1.125rem, 2.2vw, 1.25rem); --text-xl: clamp(1.25rem, 2.5vw, 1.5rem); --text-2xl: clamp(1.5rem, 3vw, 2rem); --text-3xl: clamp(2rem, 4vw, 3rem); --text-4xl: clamp(2.5rem, 5vw, 4rem); --text-hero: clamp(3rem, 7vw, 5.5rem); /* ---------------------------------------------------------- 4. FONT FAMILIES, WEIGHTS, LEADING, TRACKING ---------------------------------------------------------- */ /* Families — fallback chain ensures text renders before font loads */ --font-sans: system-ui, 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; /* Weights */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-black: 900; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; /* ALL-CAPS section labels */ /* ---------------------------------------------------------- 5. BORDER RADII ---------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* pill / circle shapes */ /* ---------------------------------------------------------- 6. SHADOWS & GLOWS ---------------------------------------------------------- Dark UI note: traditional drop-shadows look flat here. Prefer coloured glows (using --color-accent) for emphasis. ---------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.60); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.70); --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.80); /* FANUC Yellow glow — use on featured cards, active nav items */ --shadow-accent: 0 0 20px rgba(255, 203, 6, 0.25); --shadow-accent-strong: 0 0 48px rgba(255, 203, 6, 0.45); /* Inset shadow for pressed / focused states */ --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.50); /* ---------------------------------------------------------- 7. EASING FUNCTIONS + DURATION SCALE ---------------------------------------------------------- */ /* Easing curves */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* decelerate — elements entering */ --ease-in: cubic-bezier(0.55, 0, 0.78, 0); /* accelerate — elements leaving */ --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* balanced — state changes */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot — playful */ --ease-linear: linear; /* Duration scale */ --duration-instant: 100ms; /* micro-interactions (focus ring) */ --duration-fast: 150ms; /* hover states */ --duration-base: 250ms; /* most transitions */ --duration-slow: 400ms; /* panel open/close */ --duration-slower: 600ms; /* page-level transitions */ --duration-reveal: 800ms; /* scroll-reveal entries */ /* ---------------------------------------------------------- 8. Z-INDEX SCALE ---------------------------------------------------------- Increment by 10 to leave room for local sub-layers. Never use raw integers outside this file. ---------------------------------------------------------- */ --z-below: -1; /* decorative pseudo-elements behind content */ --z-base: 0; /* default flow */ --z-raised: 10; /* cards on hover */ --z-dropdown: 20; /* dropdowns, pop-overs */ --z-sticky: 30; /* sticky nav */ --z-overlay: 40; /* hero overlay, modal backdrop */ --z-modal: 50; /* modal dialogs */ --z-toast: 60; /* toast notifications, install banner */ --z-tooltip: 70; /* tooltips — always on top */ }