/* ========================================================================== Advoke CV — Design Tokens The single source of truth for colour, spacing, type, radius, shadow. Every other stylesheet consumes these variables. Nothing hardcodes values. ========================================================================== */ :root { /* --------------------------------------------------------------------- COLOUR PRIMITIVES — Neutral surface scale (warm-cool balanced white) --------------------------------------------------------------------- */ --c-white: #ffffff; --c-neutral-25: #fdfdff; --c-neutral-50: #f9fafc; --c-neutral-100: #f3f5f8; --c-neutral-150: #eceff4; --c-neutral-200: #e3e7ee; --c-neutral-250: #d7dce6; --c-neutral-300: #c8cedb; --c-neutral-400: #9aa3b5; --c-neutral-500: #737d92; --c-neutral-600: #545d72; --c-neutral-700: #3c4557; --c-neutral-800: #2a3141; --c-neutral-900: #1c2230; --c-neutral-950: #121722; /* --------------------------------------------------------------------- COLOUR PRIMITIVES — Brand navy (charcoal-navy for headings and chrome) --------------------------------------------------------------------- */ --c-navy-50: #eef3fb; --c-navy-100: #d8e4f5; --c-navy-200: #b0c7e9; --c-navy-300: #7ea2d6; --c-navy-400: #4c79bf; --c-navy-500: #2b579e; --c-navy-600: #1e427d; --c-navy-700: #163260; --c-navy-800: #0f2c5c; --c-navy-900: #0b2148; --c-navy-950: #071634; /* --------------------------------------------------------------------- COLOUR PRIMITIVES — Accent blue (restrained, professional) --------------------------------------------------------------------- */ --c-blue-50: #eef5ff; --c-blue-100: #dbe9ff; --c-blue-200: #b8d3ff; --c-blue-300: #8ab5fb; --c-blue-400: #5a92f0; --c-blue-500: #2f6fdd; --c-blue-600: #1f57bd; --c-blue-700: #174697; --c-blue-800: #123a7a; --c-blue-900: #0e2f61; /* --------------------------------------------------------------------- COLOUR PRIMITIVES — Support hues (used sparingly, never decorative) --------------------------------------------------------------------- */ --c-green-50: #edfbf3; --c-green-500: #129a5a; --c-green-700: #0b6b3e; --c-amber-50: #fff8eb; --c-amber-500: #c98a12; --c-amber-700: #8b5d0a; --c-red-50: #fdeeee; --c-red-500: #c53030; --c-red-700: #8c1f1f; /* --------------------------------------------------------------------- SEMANTIC — Surfaces --------------------------------------------------------------------- */ --surface-page: var(--c-neutral-50); --surface-raised: var(--c-white); --surface-sunken: var(--c-neutral-100); --surface-muted: var(--c-neutral-150); --surface-inverse: var(--c-navy-900); --surface-overlay: rgba(18, 23, 34, 0.55); --surface-paper: var(--c-white); --surface-paper-edge: var(--c-neutral-200); /* --------------------------------------------------------------------- SEMANTIC — Text --------------------------------------------------------------------- */ --text-primary: var(--c-neutral-900); --text-secondary: var(--c-neutral-700); --text-tertiary: var(--c-neutral-500); --text-muted: var(--c-neutral-400); --text-inverse: var(--c-white); --text-accent: var(--c-blue-700); --text-link: var(--c-blue-700); --text-link-hover: var(--c-blue-800); --text-danger: var(--c-red-700); --text-success: var(--c-green-700); --text-warning: var(--c-amber-700); /* --------------------------------------------------------------------- SEMANTIC — Borders --------------------------------------------------------------------- */ --border-subtle: var(--c-neutral-200); --border-default: var(--c-neutral-250); --border-strong: var(--c-neutral-300); --border-focus: var(--c-blue-500); --border-accent: var(--c-blue-600); --border-danger: var(--c-red-500); --border-inverse: rgba(255, 255, 255, 0.14); /* --------------------------------------------------------------------- SEMANTIC — Interactive --------------------------------------------------------------------- */ --interactive-primary: var(--c-navy-800); --interactive-primary-hover: var(--c-navy-900); --interactive-primary-active: var(--c-navy-950); --interactive-accent: var(--c-blue-600); --interactive-accent-hover: var(--c-blue-700); --interactive-accent-soft: var(--c-blue-50); --interactive-ghost-hover: var(--c-neutral-100); --interactive-danger: var(--c-red-500); --interactive-danger-hover: var(--c-red-700); /* --------------------------------------------------------------------- TYPOGRAPHY — Font stacks --------------------------------------------------------------------- */ --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-serif: "Source Serif Pro", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; /* Resume-only stacks (subset available to templates) */ --resume-font-sans: var(--font-sans); --resume-font-serif: var(--font-serif); --resume-font-classic: Georgia, "Times New Roman", serif; --resume-font-modern: "Inter", "Segoe UI", Arial, sans-serif; --resume-font-humanist: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --resume-font-technical: "JetBrains Mono", Consolas, monospace; /* --------------------------------------------------------------------- TYPOGRAPHY — Scale (fluid, clamp-based, mobile-first) --------------------------------------------------------------------- */ --fs-3xs: 0.6875rem; /* 11px */ --fs-2xs: 0.75rem; /* 12px */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.0625rem; /* 17px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: clamp(1.625rem, 1.2rem + 1.6vw, 2rem); --fs-4xl: clamp(1.875rem, 1.3rem + 2.2vw, 2.5rem); --fs-5xl: clamp(2.25rem, 1.4rem + 3.2vw, 3.25rem); --fs-6xl: clamp(2.75rem, 1.5rem + 5vw, 4.25rem); --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; --lh-loose: 1.8; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --ls-tighter: -0.03em; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.05em; --ls-widest: 0.1em; /* --------------------------------------------------------------------- SPACING — 4px base scale --------------------------------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-7: 1.75rem; /* 28px */ --sp-8: 2rem; /* 32px */ --sp-9: 2.5rem; /* 40px */ --sp-10: 3rem; /* 48px */ --sp-11: 3.5rem; /* 56px */ --sp-12: 4rem; /* 64px */ --sp-14: 5rem; /* 80px */ --sp-16: 6rem; /* 96px */ --sp-20: 7.5rem; /* 120px */ /* Fluid section rhythm */ --section-y-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem); --section-y-md: clamp(3.5rem, 2.5rem + 5vw, 6rem); --section-y-lg: clamp(4.5rem, 3rem + 7.5vw, 8rem); /* --------------------------------------------------------------------- LAYOUT — Container widths --------------------------------------------------------------------- */ --container-narrow: 42rem; /* 672px — long-form reading */ --container-text: 48rem; /* 768px — article body */ --container-base: 72rem; /* 1152px — standard page */ --container-wide: 82rem; /* 1312px — gallery */ --container-full: 90rem; /* 1440px — editor workspace */ --gutter: clamp(1rem, 0.75rem + 1.5vw, 2rem); --gutter-tight: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); /* --------------------------------------------------------------------- RADIUS --------------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px; /* --------------------------------------------------------------------- SHADOW — Layered, low-contrast, paper-realistic --------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(18, 23, 34, 0.04); --shadow-sm: 0 1px 2px rgba(18, 23, 34, 0.05), 0 1px 3px rgba(18, 23, 34, 0.04); --shadow-md: 0 2px 4px rgba(18, 23, 34, 0.05), 0 4px 12px rgba(18, 23, 34, 0.06); --shadow-lg: 0 4px 8px rgba(18, 23, 34, 0.06), 0 12px 28px rgba(18, 23, 34, 0.08); --shadow-xl: 0 8px 16px rgba(18, 23, 34, 0.07), 0 24px 48px rgba(18, 23, 34, 0.10); --shadow-paper: 0 1px 2px rgba(18, 23, 34, 0.06), 0 8px 20px rgba(18, 23, 34, 0.08), 0 24px 48px rgba(18, 23, 34, 0.06); --shadow-inset: inset 0 1px 2px rgba(18, 23, 34, 0.06); --shadow-focus: 0 0 0 3px rgba(47, 111, 221, 0.28); --shadow-focus-danger: 0 0 0 3px rgba(197, 48, 48, 0.24); /* --------------------------------------------------------------------- Z-INDEX REGISTRY --------------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-drawer: 400; --z-overlay: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; --z-loading: 900; /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); /* --------------------------------------------------------------------- FOCUS & ACCESSIBILITY --------------------------------------------------------------------- */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--c-blue-600); /* --------------------------------------------------------------------- HEADER / FOOTER HEIGHTS (used by sticky offsets and mobile drawer) --------------------------------------------------------------------- */ --header-h-mobile: 56px; --header-h-desktop: 68px; --mobile-tabbar-h: 52px; /* --------------------------------------------------------------------- RESUME PAPER — Used by the renderer and print stylesheet --------------------------------------------------------------------- */ --paper-a4-w: 210mm; --paper-a4-h: 297mm; --paper-letter-w: 8.5in; --paper-letter-h: 11in; --paper-margin: 14mm; --paper-padding: var(--paper-margin); --paper-radius: var(--radius-sm); --paper-bg: var(--surface-paper); --paper-color: #1c2230; /* --------------------------------------------------------------------- ADVOKE ACCENT (resume templates can override via inline style) --------------------------------------------------------------------- */ --resume-accent: var(--c-blue-600); --resume-accent-soft: var(--c-blue-50); --resume-accent-ink: var(--c-navy-900); --resume-rule: #d7dce6; --resume-ink: #1c2230; --resume-ink-soft: #3c4557; --resume-ink-muted: #737d92; /* --------------------------------------------------------------------- RESUME SCALE (multiplied by JS when user changes font scale) --------------------------------------------------------------------- */ --resume-scale: 1; --resume-space: 1; --resume-base-size: calc(10.5pt * var(--resume-scale)); } /* --------------------------------------------------------------------- DARK MODE — interface only. Resume paper always prints light. --------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { color-scheme: light; /* Advoke CV intentionally does not ship a dark UI theme in v1 so that the resume preview always matches the printed output exactly. */ } } /* --------------------------------------------------------------------- HIGH-CONTRAST MODE --------------------------------------------------------------------- */ @media (forced-colors: active) { :root { --border-subtle: CanvasText; --border-default: CanvasText; --border-strong: CanvasText; --text-primary: CanvasText; --text-secondary: CanvasText; --surface-raised: Canvas; --surface-page: Canvas; } } /* --------------------------------------------------------------------- REDUCED MOTION --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }