/* * PCCC design tokens. * * The only file that declares CSS custom properties. Every other stylesheet * in pccc-theme consumes these variables — nothing else declares raw hex * codes, pixel sizes, or ad-hoc shadow values. * * Token names are stable API surface. Add new tokens sparingly; do not * rename existing ones without a coordinated migration across all files * that reference them. */ :root { /* --------------------------------------------------------------- * Colour palette * * Chosen to preserve the existing BuddyBoss theme-options brand * palette (teal + green + off-black) while replacing ad-hoc uses * with a coherent set of named surfaces and text tones. * --------------------------------------------------------------- */ /* Primary brand: PCCC teal — the site's signature accent. * Used for links, primary interactive surfaces, and headings that * need brand emphasis. */ --pccc-color-primary: #398AA0; --pccc-color-primary-hover: #2F7688; --pccc-color-primary-active: #245D6D; --pccc-color-primary-tint: rgba(57, 138, 160, 0.08); /* Secondary brand: PCCC green — buttons, badges, positive accents. */ --pccc-color-accent: #64B17B; --pccc-color-accent-hover: #4E9866; --pccc-color-accent-tint: rgba(100, 177, 123, 0.10); /* Ink — text and iconography. */ --pccc-color-ink: #1E2132; /* primary reading colour */ --pccc-color-ink-muted: #4B5563; /* secondary reading colour */ --pccc-color-ink-subtle: #6B7280; /* metadata / captions */ --pccc-color-ink-inverse: #FFFFFF; /* text on solid brand surfaces */ /* Surfaces */ --pccc-color-surface: #FFFFFF; /* page background */ --pccc-color-surface-sunken: #F5F7F9; /* alternate section background */ --pccc-color-surface-subtle: #FAFBFC; /* very light section background */ --pccc-color-surface-strong: #F2F4F5; /* card backgrounds on light pages */ /* Borders */ --pccc-color-border: #E5E8EC; --pccc-color-border-strong: #D6D9DD; --pccc-color-border-focus: #398AA0; /* matches primary */ /* Feedback — align with BuddyBoss notice colours so app UX and * public content signal consistently. */ --pccc-color-success: #14B550; --pccc-color-success-bg: #E7F7EC; --pccc-color-warning: #ED9615; --pccc-color-warning-bg: #FDF1E0; --pccc-color-error: #DB222A; --pccc-color-error-bg: #FBE6E7; --pccc-color-info: #385DFF; --pccc-color-info-bg: #EAEEFF; /* --------------------------------------------------------------- * Typography * * SF UI Display / SF UI Text (BuddyBoss's stored preferences) are * Apple-only. We use a native-first system font stack that renders * consistently on Windows, macOS, Linux, iOS, and Android without * loading any web font. When a project chooses to load a web font * later, override --pccc-font-sans. * --------------------------------------------------------------- */ --pccc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", "Inter", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --pccc-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; --pccc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Weights */ --pccc-weight-regular: 400; --pccc-weight-medium: 500; --pccc-weight-semibold: 600; --pccc-weight-bold: 700; /* Type scale — modest, institutional. Tightened one notch below * the original scale so PCCIL public content reads denser than * BuddyBoss defaults. Header uses its own pixel sizes and is not * affected. */ --pccc-text-xs: 0.72rem; /* ~11.5px */ --pccc-text-sm: 0.82rem; /* ~13px */ --pccc-text-base: 0.94rem; /* ~15px */ --pccc-text-lg: 1.05rem; /* ~16.8px */ --pccc-text-xl: 1.18rem; /* ~19px */ --pccc-text-2xl: 1.4rem; /* ~22.4px */ --pccc-text-3xl: 1.65rem; /* ~26.4px */ --pccc-text-4xl: 2.05rem; /* ~32.8px */ --pccc-text-5xl: 2.5rem; /* 40px */ /* Line heights */ --pccc-leading-tight: 1.2; --pccc-leading-snug: 1.35; --pccc-leading-normal: 1.55; --pccc-leading-relaxed: 1.7; /* Letter spacing */ --pccc-tracking-tight: -0.01em; --pccc-tracking-normal: 0; --pccc-tracking-wide: 0.04em; --pccc-tracking-eyebrow: 0.10em; /* --------------------------------------------------------------- * Spacing scale (4-based). * --------------------------------------------------------------- */ --pccc-space-0: 0; --pccc-space-1: 0.25rem; /* 4px */ --pccc-space-2: 0.5rem; /* 8px */ --pccc-space-3: 0.75rem; /* 12px */ --pccc-space-4: 1rem; /* 16px */ --pccc-space-5: 1.5rem; /* 24px */ --pccc-space-6: 2rem; /* 32px */ --pccc-space-7: 3rem; /* 48px */ --pccc-space-8: 4rem; /* 64px */ --pccc-space-9: 6rem; /* 96px */ --pccc-space-10: 8rem; /* 128px */ /* Section rhythm — used by .pccc-section variants. Tightened to * reduce vertical whitespace between landing sections. */ --pccc-section-y: var(--pccc-space-6); --pccc-section-y-compact: var(--pccc-space-5); --pccc-section-y-hero: var(--pccc-space-8); /* --------------------------------------------------------------- * Container widths * --------------------------------------------------------------- */ --pccc-container-narrow: 720px; /* long-form reading */ --pccc-container: 1140px; /* standard content */ --pccc-container-wide: 1440px; /* header / hero */ --pccc-container-gutter: clamp(1rem, 3vw, 2rem); /* --------------------------------------------------------------- * Corner radius * --------------------------------------------------------------- */ --pccc-radius-sm: 4px; --pccc-radius: 6px; --pccc-radius-md: 8px; --pccc-radius-lg: 12px; --pccc-radius-xl: 20px; --pccc-radius-pill: 999px; /* --------------------------------------------------------------- * Elevation * --------------------------------------------------------------- */ --pccc-shadow-xs: 0 1px 0 rgba(24, 30, 50, 0.05); --pccc-shadow-sm: 0 1px 2px rgba(24, 30, 50, 0.06), 0 1px 3px rgba(24, 30, 50, 0.05); --pccc-shadow: 0 4px 12px rgba(24, 30, 50, 0.08), 0 1px 2px rgba(24, 30, 50, 0.04); --pccc-shadow-lg: 0 12px 32px rgba(24, 30, 50, 0.10), 0 2px 6px rgba(24, 30, 50, 0.05); /* --------------------------------------------------------------- * Motion * --------------------------------------------------------------- */ --pccc-transition-fast: 120ms ease; --pccc-transition: 180ms ease; --pccc-transition-slow: 320ms ease; /* --------------------------------------------------------------- * Z-index scale — keep header on top of ordinary content, mobile * drawer on top of the header, notifications above everything. * --------------------------------------------------------------- */ --pccc-z-content: 1; --pccc-z-sticky: 100; --pccc-z-header: 1000; --pccc-z-mobile: 1100; --pccc-z-toast: 1200; --pccc-z-modal: 1300; /* --------------------------------------------------------------- * Focus ring — used by every interactive element in the system. * --------------------------------------------------------------- */ --pccc-focus-ring: 0 0 0 3px rgba(57, 138, 160, 0.30); } /* Reduced-motion mode: kill all motion when the user asked for less. */ @media (prefers-reduced-motion: reduce) { :root { --pccc-transition-fast: 0ms; --pccc-transition: 0ms; --pccc-transition-slow: 0ms; } }