/* * PPSC Design System — tokens.css * Pikes Peak State College * * Platform-agnostic CSS custom properties, generated from the Figma * variable collections. Values are sourced from Figma, so edit them * there rather than here. * * Load this first, before any other stylesheet. * * Last synced with the Figma token export: Sep 29 2026 (link colours, * primary button hover, deprecated Typography colors kept as aliases). * Oct 1 2026: space pair slopes recalculated so every pair reaches its * max at 1332px (agreed with Cece; the export had them at ~1978px). * Oct 2 2026: grid token slopes recalculated the same way (the export * had them reaching their max at ~1600-1650px). * Local addition not in the export: the @font-face below. Text-transform * is not a token (Figma variables can't hold it); the uppercase used on * tags and tab row labels is a local value in ppsc-chrome.css. * * Variable architecture (7 collections): * Space primitives — raw @min/@max values that feed clamp() calculations * Type primitives — raw @min/@max font sizes + font family/weight base values * Fluid tokens — semantic space, type, grid tokens (alias -> primitives via clamp) * ACSS Tokens — colors, radius, border widths, opacity * Semantic — role-based Surface/Text/Border tokens (alias -> ACSS Tokens) * Component — button-specific tokens (alias -> ACSS Tokens / Semantic) * Opacity — standalone opacity scale (also mirrored in ACSS Tokens) * * The font is a variable font, "Source Sans 3 VF", self-hosted and * declared below. The .woff2 ships alongside this file. */ /* ============================================================ FONT FACE Self-hosted variable font. The family name here matches the --font-family token value ("Source Sans 3 VF") exactly, so the token stays untouched — rename here, never in the token. ============================================================ */ @font-face { font-family: "Source Sans 3 VF"; src: url("/_resources/assets/fonts/SourceSans3-VariableFont_wght.woff2") format("woff2-variations"), url("/_resources/assets/fonts/SourceSans3-VariableFont_wght.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } :root { /* ============================================================ SPACE PRIMITIVES Raw min/max values for the Utopia space scale. Viewport range: 318px (min) → 1332px (max). These feed the clamp() expressions in Fluid tokens below. ============================================================ */ /* Fixed steps — min = max (no fluid scaling on these) */ --space-3xs-min: 5px; --space-3xs-max: 5px; --space-2xs-min: 9px; --space-2xs-max: 9px; --space-xs-min: 14px; --space-xs-max: 14px; --space-s-min: 18px; --space-s-max: 18px; --space-m-min: 27px; --space-m-max: 27px; --space-l-min: 36px; --space-l-max: 36px; --space-xl-min: 54px; --space-xl-max: 54px; --space-2xl-min: 72px; --space-2xl-max: 72px; --space-3xl-min: 108px; --space-3xl-max: 108px; /* Grid primitives */ --grid-col-min: 7px; --grid-col-count: 12; --grid-viewport-min: 318px; --grid-viewport-max: 1332px; --grid-whole-min: 282px; --grid-whole-max: 1260px; --grid-3quarters-min: 207px; --grid-3quarters-max: 936px; --grid-2thirds-min: 182px; --grid-2thirds-max: 828px; --grid-half-min: 132px; --grid-half-max: 612px; --grid-third-min: 82px; --grid-third-max: 396px; --grid-quarter-min: 57px; --grid-quarter-max: 288px; /* ============================================================ TYPE PRIMITIVES Raw min/max font sizes for each type scale step. Viewport range: 318px → 1332px. ============================================================ */ --step-6-min: 36.49px; --step-6-max: 53.75px; --step-5-min: 32.44px; --step-5-max: 44.79px; --step-4-min: 28.83px; --step-4-max: 37.32px; --step-3-min: 25.63px; --step-3-max: 31.10px; --step-2-min: 22.78px; --step-2-max: 25.92px; --step-1-min: 20.25px; --step-1-max: 21.60px; --step-0-min: 18px; --step-0-max: 18px; --step--1-min: 16px; --step--1-max: 16px; --step--2-min: 14.22px; --step--2-max: 14px; /* ============================================================ FLUID TOKENS — Type scale (clamp, Utopia) ============================================================ */ --step-6: clamp(2.281rem, 1.561vw + 1.935rem, 3.360rem); --step-5: clamp(2.027rem, 1.119vw + 1.784rem, 2.799rem); --step-4: clamp(1.802rem, 0.773vw + 1.634rem, 2.333rem); --step-3: clamp(1.602rem, 0.499vw + 1.491rem, 1.944rem); --step-2: clamp(1.424rem, 0.284vw + 1.361rem, 1.620rem); --step-1: clamp(1.266rem, 0.121vw + 1.240rem, 1.350rem); --step-0: 1.125rem; --step--1: 1rem; --step--2: clamp(0.889rem, -0.020vw + 0.895rem, 0.875rem); /* ============================================================ FLUID TOKENS — Font family & weights ============================================================ */ /* NOTE: Figma source is now "Source Sans 3 VF" (variable font). */ --font-family: 'Source Sans 3 VF', 'Source Sans 3', sans-serif; --font-regular: 400; --font-semibold: 600; --font-bold: 700; /* Named VF instances as stored in Figma (string tokens, not usable directly in font-weight — reference only, kept for design/dev parity). */ --font-weight-name-regular: 'Regular'; --font-weight-name-semibold: 'Semibold'; --font-weight-name-bold: 'Bold'; /* ============================================================ FLUID TOKENS — Space scale (fixed, Utopia) Use for component-internal gaps, icon padding, form fields. For responsive layout spacing → use SPACE PAIRS below. ============================================================ */ --space-3xs: 0.3125rem; /* 5px */ --space-2xs: 0.5625rem; /* 9px */ --space-xs: 0.875rem; /* 14px */ --space-s: 1.125rem; /* 18px */ --space-m: 1.6875rem; /* 27px */ --space-l: 2.25rem; /* 36px */ --space-xl: 3.375rem; /* 54px */ --space-2xl: 4.5rem; /* 72px */ --space-3xl: 6.75rem; /* 108px */ /* ============================================================ FLUID TOKENS — Space pairs (fluid clamp) Use for section padding, card padding, container gutters. Viewport range: 318px → 1332px (min at 318, max at the 1332 container), the same range as the type and grid tokens. ============================================================ */ --space-3xs-2xs: clamp(0.3125rem, 0.394vw + 0.234rem, 0.5625rem); --space-2xs-xs: clamp(0.5625rem, 0.493vw + 0.465rem, 0.875rem); --space-xs-s: clamp(0.875rem, 0.394vw + 0.797rem, 1.125rem); --space-s-m: clamp(1.125rem, 0.888vw + 0.949rem, 1.6875rem); --space-m-l: clamp(1.6875rem, 0.888vw + 1.511rem, 2.25rem); --space-l-xl: clamp(2.25rem, 1.775vw + 1.897rem, 3.375rem); --space-xl-2xl: clamp(3.375rem, 1.775vw + 3.022rem, 4.5rem); --space-2xl-3xl: clamp(4.5rem, 3.550vw + 3.794rem, 6.75rem); /* Custom pair */ --space-s-l: clamp(1.125rem, 1.775vw + 0.772rem, 2.25rem); /* ============================================================ FLUID TOKENS — Grid Viewport range: 318px → 1332px, like the type and space tokens. ============================================================ */ --grid-viewport: clamp(19.875rem, 100vw, 83.25rem); --grid-whole: clamp(17.625rem, 96.450vw - 1.544rem, 78.75rem); --grid-three-quarters: clamp(12.938rem, 71.893vw - 1.351rem, 58.50rem); --grid-two-thirds: clamp(11.375rem, 63.708vw - 1.287rem, 51.75rem); --grid-half: clamp(8.25rem, 47.337vw - 1.158rem, 38.25rem); --grid-third: clamp(5.125rem, 30.966vw - 1.030rem, 24.75rem); --grid-quarter: clamp(3.5625rem, 22.781vw - 0.965rem, 18.00rem); --grid-gutter: clamp(1.125rem, 1.775vw + 0.772rem, 2.25rem); /* ============================================================ COLORS — Primary ============================================================ */ --primary: #0B3B60; --primary-ultra-light: #F1F8FD; --primary-light: #BBDDF7; --primary-semi-light: #48A4EA; --primary-semi-dark: #1571B7; --primary-dark: #0D4672; --primary-ultra-dark: #030E17; --primary-hover: #0D446E; /* ============================================================ COLORS — Secondary ============================================================ */ --secondary: #037F9B; --secondary-ultra-light: #F0FCFF; --secondary-light: #B4F0FD; --secondary-semi-light: #37D7FB; --secondary-semi-dark: #04A4C8; --secondary-dark: #03677D; --secondary-ultra-dark: #011519; --secondary-hover: #0492B2; /* ============================================================ COLORS — Tertiary ============================================================ */ --tertiary: #7DB842; --tertiary-ultra-light: #F7FBF4; --tertiary-light: #D9EBC7; --tertiary-semi-light: #99C969; --tertiary-semi-dark: #669636; --tertiary-dark: #405E22; --tertiary-ultra-dark: #0D1307; --tertiary-hover: #90C45B; /* ============================================================ COLORS — Accent ============================================================ */ --accent: #C43C21; --accent-ultra-light: #FDF4F2; --accent-light: #F4C7BE; --accent-semi-light: #E16951; --accent-semi-dark: #AE361E; --accent-dark: #6D2212; --accent-ultra-dark: #160704; --accent-hover: #DB4A2D; /* ============================================================ COLORS — Neutral ============================================================ */ --neutral: #161413; --neutral-ultra-light: #F8F7F7; --neutral-light: #DBD9D6; --neutral-semi-light: #9F9893; --neutral-semi-dark: #6C6560; --neutral-dark: #292624; --neutral-ultra-dark: #0E0D0C; --neutral-hover: #363230; /* ============================================================ COLORS — Black & White ============================================================ */ --black: #000000; --white: #FFFFFF; /* ============================================================ COLORS — Semantic: Success ============================================================ */ --success: #81C91D; --success-ultra-light: #F8FDF2; --success-light: #DEF5BC; --success-semi-light: #A6E64C; --success-semi-dark: #73B319; --success-dark: #487010; --success-ultra-dark: #0E1603; --success-hover: #93E028; /* ============================================================ COLORS — Semantic: Danger ============================================================ */ --danger: #B30000; --danger-ultra-light: #FFF0F0; --danger-light: #FFB3B3; --danger-semi-light: #FF3333; --danger-semi-dark: #CC0000; --danger-dark: #800000; --danger-ultra-dark: #190000; --danger-hover: #CD0000; /* ============================================================ COLORS — Semantic: Warning ============================================================ */ --warning: #FFA200; --warning-ultra-light: #FFF9F0; --warning-light: #FFE3B3; --warning-semi-light: #FFB433; --warning-semi-dark: #CC8100; --warning-dark: #805100; --warning-ultra-dark: #191000; --warning-hover: #FFB026; /* ============================================================ COLORS — Semantic: Info ============================================================ */ --info: #00BFE0; --info-ultra-light: #F0FDFF; --info-light: #B3F4FF; --info-semi-light: #33E0FF; --info-semi-dark: #00ADCC; --info-dark: #006C80; --info-ultra-dark: #001619; --info-hover: #03D9FF; /* ============================================================ DEPRECATED — Typography aliases (ACSS group deleted in Figma Sep 29 2026) Kept so existing code keeps working. Use the Semantic --text-* tokens instead, then delete this block. ============================================================ */ --heading-color: var(--text-heading); --text-color: var(--text-default); --text-color-light: var(--text-inverse); --text-color-light-muted: var(--text-inverse-muted); --text-color-dark: var(--text-default); --text-color-dark-muted: var(--text-muted); --link-color: var(--text-link); --link-hover-color: var(--text-link-hover); --link-light: var(--text-link-inverse); --link-hover-light: var(--text-link-inverse-hover); /* ============================================================ GRADIENTS Two distinct gradients — do not interchange them. ============================================================ */ /* Button gradient — used for primary button stroke */ --gradient-button: linear-gradient(to right, var(--tertiary), var(--secondary-semi-dark)); /* PPSC Gradient — used for icons and decorative elements */ --gradient-ppsc: linear-gradient(to right, var(--secondary-semi-dark), var(--tertiary-semi-dark)); /* ============================================================ BORDER RADIUS ============================================================ */ --radius-s: 4px; --radius-m: 6px; --radius-l: 9px; --radius-full: 9999px; /* ============================================================ BORDER WIDTH ============================================================ */ --border-s: 1px; --border-m: 1.5px; --border-l: 4px; --border-xl: 8px; /* ============================================================ OPACITY ============================================================ */ --opacity-20: 0.2; --opacity-50: 0.5; --opacity-70: 0.7; --opacity-90: 0.9; /* ============================================================ SEMANTIC TOKENS — NEW COLLECTION Role-based tokens ("Semantic" collection in Figma). Every value below aliases a primitive/ACSS token above — never a raw hex. Use these over raw color tokens wherever a component is describing a *role* (surface, text, border) rather than a specific brand color. ============================================================ */ /* Surface */ --surface-default: var(--white); --surface-neutral: var(--neutral-ultra-light); --surface-inverse: var(--primary); --surface-subtle: var(--secondary-ultra-light); --surface-accent: var(--primary-light); --surface-accent-strong: var(--secondary-semi-dark); --surface-accent-dark: var(--secondary); --surface-accent-semi-dark: var(--secondary-hover); --surface-inverse-strong: var(--primary-ultra-dark); --surface-warning: var(--accent-light); --surface-danger: var(--accent-semi-dark); --surface-highlight: var(--tertiary); --surface-neutral-semi-dark: var(--neutral-light); /* Surface — blur accents */ --surface-blur-1: var(--tertiary); --surface-blur-2: var(--secondary-light); --surface-blur-3: var(--secondary-semi-light); /* Surface — decorative gradient stops */ --surface-gradient-stop-1: var(--tertiary-light); --surface-gradient-stop-2: var(--tertiary-semi-light); --surface-gradient-stop-3: var(--tertiary); --surface-gradient-stop-4: var(--secondary-semi-dark); /* Text */ --text-heading: var(--primary); --text-default: var(--neutral); --text-muted: var(--neutral-semi-dark); --text-inverse: var(--white); --text-inverse-muted: var(--neutral-ultra-light); --text-link: var(--secondary-dark); /* CHANGED Sep 29 2026 (was --secondary) */ --text-link-hover: var(--primary); /* CHANGED Sep 29 2026 (was --secondary-semi-dark) */ --text-link-inverse: var(--white); --text-link-inverse-hover: var(--secondary-light); /* CHANGED Sep 29 2026 (was --neutral-ultra-light) */ --text-highlight: var(--tertiary-semi-dark); /* CHANGED Sep 28 2026 (was --tertiary). AA large text only — see header */ --text-highlight-muted: var(--tertiary-light); /* Border */ --border-default: var(--neutral-light); --border-emphasis: var(--secondary-semi-dark); --border-hover: var(--secondary-hover); --border-inverse: var(--white); --border-dark: var(--neutral); --border-accent: var(--tertiary); --border-subtle: var(--secondary-light); --border-link: var(--secondary); /* Border width (semantic aliases onto ACSS border-width primitives) */ --border-width-default: var(--border-s); /* 1px */ --border-width-emphasis: var(--border-m); /* 1.5px */ /* ============================================================ COMPONENT TOKENS — NEW COLLECTION (Buttons) Button-specific tokens ("Component" collection in Figma). ============================================================ */ /* Button text */ --btn-text-on-light: var(--text-default); /* aliases Semantic/Text/Default */ --btn-text-on-dark: var(--text-inverse); /* aliases Semantic/Text/Inverse */ /* Button underline (Tertiary) — ADDED Oct 6 2026 */ --btn-underline-on-light: var(--text-muted); /* aliases Semantic/Text/Muted */ --btn-underline-on-dark: var(--text-inverse-muted); /* aliases Semantic/Text/Inverse-Muted */ /* Button — Primary */ --btn-primary-bg-default: var(--accent); --btn-primary-bg-hover: var(--accent-semi-dark); /* CHANGED Sep 29 2026 (was --accent-hover) */ --btn-primary-bg-pressed: var(--accent-dark); /* Button — Secondary (White variant) */ --btn-secondary-white-bg-default: var(--white); --btn-secondary-white-bg-hover: var(--neutral-light); --btn-secondary-white-bg-pressed: var(--neutral-semi-light); /* Button — Secondary (Black variant) */ --btn-secondary-black-bg-default: var(--neutral); --btn-secondary-black-bg-hover: var(--neutral-hover); --btn-secondary-black-bg-pressed: var(--neutral-ultra-dark); /* Button — Secondary Outline (shared between Dark/Light color variants) */ --btn-secondary-outline-gradient-stop-1: var(--tertiary); --btn-secondary-outline-gradient-stop-2: var(--secondary-semi-dark); --btn-secondary-outline-hover: var(--secondary); --btn-secondary-outline-pressed: var(--secondary-dark); } /* * TEXT STYLES — reference only (Figma text styles, not variables) * * Link/Step -1 | 0 | 1 Bold 700, --step--1 / --step-0 / --step-1, * line-height 1.2, text-decoration: underline. * For link-only text layers. * Link Prose/Step -1 | 0 | 1 Same, with line-height 1.6. * For links inside Prose paragraphs. * * Color: --text-link, hover --text-link-hover. * On --surface-inverse: --text-link-inverse, hover --text-link-inverse-hover. * In CSS, an inline inside a paragraph inherits the paragraph's line-height, * so both styles map to the same rule; the split only matters in Figma. */