/* ---------------------------------------- DESIGN TOKENS CSS custom properties for the Packwerk design system. All component styles reference these tokens — never raw values. Categorized namespace: --pw-{category}-{name}-{variant} Categories: color, font, text, weight, leading, tracking, space, radius, shadow. Two color layers: - Palette tokens name what a color *is* (--pw-color-teal-700, --pw-color-white). They are referenced ONLY inside this file. - Role tokens name what a color is *for* (--pw-color-link, --pw-color-chrome-bg). Every stylesheet, component, and view references role tokens, so a repaint is a re-point here. spec/css_debt_spec.rb enforces the split. See planning/brand-palette-transition.md -> Token architecture. ---------------------------------------- */ :root { /* ======================================== PALETTE LAYER — referenced only inside this file Ten-step ramps, 50 (lightest) to 900 (darkest), generated in OKLCH. A step number means the same lightness in every ramp, so contrast is predictable across hues. Values and rationale: planning/brand-palette-transition.md -> The palette. ======================================== */ --pw-color-white: #FFFFFF; --pw-color-teal-50: #EFF9F8; --pw-color-teal-100: #E1F1EF; --pw-color-teal-200: #C7E1DE; --pw-color-teal-300: #A3CAC5; --pw-color-teal-400: #7CB0AA; --pw-color-teal-500: #468A83; /* brand teal */ --pw-color-teal-600: #3B7B75; --pw-color-teal-700: #28635E; --pw-color-teal-800: #164C47; --pw-color-teal-900: #01332F; --pw-color-poppy-50: #FEF4F1; --pw-color-poppy-100: #FEE7E0; --pw-color-poppy-200: #FFCEBE; --pw-color-poppy-300: #FFA88B; --pw-color-poppy-400: #F2805A; --pw-color-poppy-500: #DE5C2D; /* brand poppy */ --pw-color-poppy-600: #B84416; --pw-color-poppy-700: #973002; --pw-color-poppy-800: #742301; --pw-color-poppy-900: #4F1500; --pw-color-mustard-50: #FCF6E8; --pw-color-mustard-100: #F7ECD3; --pw-color-mustard-200: #ECD9AE; --pw-color-mustard-300: #DABE7A; --pw-color-mustard-400: #C4A045; /* brand mustard */ --pw-color-mustard-500: #A2812C; --pw-color-mustard-600: #886A17; --pw-color-mustard-700: #6E5402; --pw-color-mustard-800: #543F01; --pw-color-mustard-900: #382900; --pw-color-sky-50: #F0F8FE; --pw-color-sky-100: #E1EFF9; --pw-color-sky-200: #C7DFF0; --pw-color-sky-300: #A2C6E1; --pw-color-sky-400: #85B1D0; /* brand sky */ --pw-color-sky-500: #658CA7; --pw-color-sky-600: #50738C; --pw-color-sky-700: #3C5C73; --pw-color-sky-800: #28465A; --pw-color-sky-900: #142E40; --pw-color-neutral-50: #FAF6EF; --pw-color-neutral-100: #EDE6DA; /* brand cream */ --pw-color-neutral-200: #E1DACD; --pw-color-neutral-300: #C8C0B2; --pw-color-neutral-400: #ACA394; --pw-color-neutral-500: #8E8575; --pw-color-neutral-600: #776D5C; --pw-color-neutral-700: #605745; --pw-color-neutral-800: #4A4130; --pw-color-neutral-900: #2E2410; /* brand ink */ /* ======================================== ROLE LAYER — what everything else references ======================================== */ /* --- Surfaces and text --- */ --pw-color-surface-base: var(--pw-color-neutral-50); --pw-color-surface-raised: var(--pw-color-white); --pw-color-surface-sunken: var(--pw-color-neutral-100); --pw-color-surface-sunken-hover: var(--pw-color-neutral-200); --pw-color-input-bg: var(--pw-color-white); --pw-color-text: var(--pw-color-neutral-900); --pw-color-text-secondary: var(--pw-color-neutral-800); /* subhead-tier emphasis */ --pw-color-text-muted: var(--pw-color-neutral-700); --pw-color-border: var(--pw-color-neutral-300); /* --- Toggle --- Split from border / input-bg / status-success-fg (PWP-214). Track and thumb point at palette values, not at the roles they split from, so re-pointing one doesn't drag the other. toggle-on aliases success on purpose: "on" reads as success. */ --pw-color-toggle-track: var(--pw-color-neutral-500); /* off-state track; 3.0+ on page and white, 2.94 on sunken (spec exception) */ --pw-color-toggle-thumb: var(--pw-color-white); /* sliding circle */ --pw-color-toggle-on: var(--pw-color-status-success-fg); /* on-state track */ /* --- Links --- */ --pw-color-link: var(--pw-color-teal-700); --pw-color-link-hover: var(--pw-color-teal-800); /* --- Actions (buttons) --- Teal means "go": primary actions share teal with success, and poppy is never an action color, so the one red button on a page is the destructive one. Brand teal-500 carries white text at only 4.02:1, so buttons step down to teal-600. */ --pw-color-action-primary: var(--pw-color-teal-600); --pw-color-action-primary-hover: var(--pw-color-teal-700); --pw-color-action-primary-text: var(--pw-color-white); --pw-color-action-outline: var(--pw-color-teal-700); --pw-color-action-outline-hover: var(--pw-color-teal-800); --pw-color-action-danger-bg: var(--pw-color-white); /* fg + border come from status-error-* */ --pw-color-text-on-fill: var(--pw-color-white); /* labels on saturated status fills */ /* --- Focus --- */ --pw-color-focus-border: var(--pw-color-teal-700); --pw-color-focus-ring: color-mix(in srgb, var(--pw-color-focus-border) 30%, transparent); /* --- Accent fill (e.g. stepper current step) --- */ --pw-color-accent-fill: var(--pw-color-teal-700); --pw-color-accent-fill-text: var(--pw-color-white); --pw-color-accent-ring: var(--pw-color-poppy-500); /* stepper current-step halo */ /* --- Progress --- The fill carries the meaning; the track is decorative and isn't held to 3.0 against the page. */ --pw-color-progress-track: var(--pw-color-neutral-200); --pw-color-progress-fill: var(--pw-color-teal-700); /* --complete modifier uses status-success-fg */ /* --- Chrome (site header) --- chrome-hover-bg was split from chrome-border (PWP-214) and points at the palette value, not at chrome-border, so the two re-point apart. Chrome is teal-800, a step darker than M1's teal-700, chosen by eye in PWP-225 QA alongside the favicon. Teal-800 + poppy-500 is the signature pairing (2.63:1): display size only, never text that carries meaning. See the planning doc. */ --pw-color-chrome-bg: var(--pw-color-teal-800); --pw-color-chrome-accent: var(--pw-color-poppy-500); /* header bottom rule */ --pw-color-chrome-text: var(--pw-color-neutral-50); --pw-color-chrome-text-muted: var(--pw-color-teal-100); --pw-color-chrome-border: var(--pw-color-teal-500); /* dividers and ghost-button borders */ --pw-color-chrome-hover-bg: var(--pw-color-teal-900); /* ghost-button hover fill */ --pw-color-chrome-nav-active: var(--pw-color-poppy-500); /* --- Member chrome --- Distinct from admin chrome so the two namespaces read apart at a glance. The chrome-text / -muted / -border roles also paint the member header, so they must pass on this background too. The hover fill is member's own: a fill dark enough to show on admin's teal vanishes on ink. */ --pw-color-member-chrome-bg: var(--pw-color-neutral-900); /* ink */ --pw-color-member-chrome-accent: var(--pw-color-poppy-500); /* header bottom rule */ --pw-color-member-chrome-hover-bg: var(--pw-color-teal-800); /* ghost-button hover fill */ /* --- Status palette --- One hue per status: success teal, info sky, warning mustard, error poppy. Every hue uses the same steps: fg 700, fg-hover 800, bg 50, bg-hover 100, border 300. */ --pw-color-status-success-fg: var(--pw-color-teal-700); --pw-color-status-success-fg-hover: var(--pw-color-teal-800); --pw-color-status-success-bg: var(--pw-color-teal-50); --pw-color-status-success-bg-hover: var(--pw-color-teal-100); --pw-color-status-success-border: var(--pw-color-teal-300); --pw-color-status-error-fg: var(--pw-color-poppy-700); --pw-color-status-error-fg-hover: var(--pw-color-poppy-800); --pw-color-status-error-bg: var(--pw-color-poppy-50); --pw-color-status-error-border: var(--pw-color-poppy-300); --pw-color-status-error-focus: color-mix(in srgb, var(--pw-color-status-error-fg) 20%, transparent); --pw-color-status-warning-fg: var(--pw-color-mustard-700); --pw-color-status-warning-fg-hover: var(--pw-color-mustard-800); --pw-color-status-warning-bg: var(--pw-color-mustard-50); --pw-color-status-warning-border: var(--pw-color-mustard-300); --pw-color-status-info-fg: var(--pw-color-sky-700); --pw-color-status-info-fg-hover: var(--pw-color-sky-800); --pw-color-status-info-bg: var(--pw-color-sky-50); --pw-color-status-info-bg-hover: var(--pw-color-sky-100); --pw-color-status-info-border: var(--pw-color-sky-300); --pw-color-status-neutral-bg: var(--pw-color-neutral-200); /* "nothing to report" — e.g. empty health-day cell */ --pw-color-status-neutral-fg: var(--pw-color-neutral-700); /* --- Typography --- */ --pw-font-display: "Scorekard", system-ui, sans-serif; --pw-font-sans: "IBM Plex Sans", system-ui, sans-serif; --pw-text-xs: 0.75rem; --pw-text-sm: 0.8rem; --pw-text-base: 0.875rem; --pw-text-md: 0.9rem; --pw-text-lg: 1.1rem; --pw-text-xl: 1.5rem; /* 24px — generic h2 */ --pw-text-2xl: 1.75rem; /* 28px — showcase section h2 / emphasis */ --pw-text-3xl: 2.25rem; /* 36px — Scorekard page title; display font benefits from generous size */ --pw-weight-light: 300; --pw-weight-normal: 400; --pw-weight-medium: 500; --pw-weight-semibold: 600; --pw-weight-bold: 700; --pw-leading-tight: 1.25; --pw-leading-normal: 1.5; --pw-tracking-tight: -0.02em; /* --- Spacing (4px base, 1–9 contiguous; --pw-space-16 dropped, no consumers) --- */ --pw-space-1: 0.25rem; /* 4px */ --pw-space-2: 0.5rem; /* 8px */ --pw-space-3: 0.75rem; /* 12px */ --pw-space-4: 1rem; /* 16px */ --pw-space-5: 1.25rem; /* 20px */ --pw-space-6: 1.5rem; /* 24px */ --pw-space-7: 2rem; /* 32px */ --pw-space-8: 2.5rem; /* 40px */ --pw-space-9: 3rem; /* 48px */ /* --- Border radius --- */ --pw-radius-sm: 4px; --pw-radius-md: 6px; --pw-radius-lg: 8px; --pw-radius-full: 100px; /* --- Shadows --- */ --pw-shadow-sm: 0 1px 2px color-mix(in srgb, var(--pw-color-neutral-900) 5%, transparent); --pw-shadow-md: 0 2px 8px color-mix(in srgb, var(--pw-color-neutral-900) 8%, transparent); --pw-shadow-lg: 0 4px 16px color-mix(in srgb, var(--pw-color-neutral-900) 12%, transparent); }