/* Your PT Hub — design tokens (AR-2.2: single source of truth for color/spacing/type). Values mirror the ratified Claude Design reference — see spec/1-pt-hub-website-redesign/spec.md "Design Reference". Self-hosted fonts per FR-2.2 (no runtime Google Fonts dependency). */ @font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/oswald-500.woff2") format("woff2"); } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/oswald-600.woff2") format("woff2"); } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/oswald-700.woff2") format("woff2"); } @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/worksans-400.woff2") format("woff2"); } @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/worksans-500.woff2") format("woff2"); } @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/worksans-600.woff2") format("woff2"); } :root { /* Color — warm-neutral monochrome + one restrained, swappable accent (FR-2.1). Accent hex is a placeholder default pending business sign-off — change this one variable to restyle every CTA/link/focus-state on the site. */ --color-paper: oklch(98.2% 0.004 80); --color-paper-dim: oklch(95.5% 0.005 80); --color-ink: oklch(15.5% 0.004 80); --color-ink-dim: oklch(22% 0.004 80); --color-gray-100: oklch(95.5% 0.004 80); --color-gray-200: oklch(90% 0.004 80); --color-gray-300: oklch(82% 0.004 80); --color-gray-400: oklch(68% 0.004 80); --color-gray-500: oklch(54% 0.004 80); --color-gray-600: oklch(42% 0.004 80); --color-gray-700: oklch(30% 0.004 80); --color-gray-800: oklch(22% 0.004 80); --color-gray-900: oklch(15.5% 0.004 80); --color-accent: oklch(60% 0.2 27); --color-accent-hover: oklch(52% 0.2 27); --color-accent-ink: oklch(98% 0.01 27); --color-bg: var(--color-paper); --color-fg: var(--color-ink); --color-border: var(--color-gray-200); /* Type — condensed/display heading + humanist body (FR-2.2) */ --font-display: "Oswald", "Arial Narrow", sans-serif; --font-body: "Work Sans", system-ui, sans-serif; /* modular scale, 1.25 ratio, base 16px */ --text-xs: 0.64rem; --text-sm: 0.8rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.563rem; --text-xl: 1.953rem; --text-2xl: 2.441rem; --text-3xl: 3.052rem; --text-4xl: 3.815rem; --text-5xl: 4.768rem; --leading-tight: 1.05; --leading-snug: 1.25; --leading-normal: 1.55; --tracking-tight: -0.01em; --tracking-wide: 0.06em; --tracking-wider: 0.14em; /* Spacing — 8px grid (FR-2.3) */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 2.5rem; /* 40px */ --space-6: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ --space-16: 8rem; /* 128px */ --radius-sm: 2px; --radius-md: 4px; --container-max: 1240px; --container-pad: var(--space-3); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* FR-3.5: light/dark theme. [data-theme] set by the pre-paint snippet in each page's . */ :root[data-theme="dark"] { --color-bg: var(--color-ink); --color-fg: var(--color-paper); --color-border: var(--color-ink-dim); }