/* ========================================================================== LOCAL SELF-HOSTED TYPOGRAPHY (Plus Jakarta Sans) ========================================================================== */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/PlusJakartaSans-Regular.ttf') format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/PlusJakartaSans-Medium.ttf') format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/PlusJakartaSans-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/PlusJakartaSans-Bold.ttf') format('truetype'); } /* ========================================================================== SMART REMOTE GIGS — DESIGN TOKENS (single source of truth for the web) -------------------------------------------------------------------------- File: assets/css/design-tokens.css Rules: 1. Brand colours are LOCKED. #7C3AED (brand-600) is the identity colour. Every other value here is a tint/shade of an approved hue or a neutral. 2. Names that already exist in design-system.css keep the SAME name and value (see "EXISTING" notes). New names are marked "NEW". 3. Dark mode is class-based ONLY: html.srg-dark. Do not add new @media (prefers-color-scheme: dark) rules anywhere. 4. Components must read tokens, never raw hex / rgba / px. 5. Breakpoints cannot be custom properties. The only allowed values are: sm 640px · md 768px · lg 1024px · xl 1280px (replace 600, 480, 767, 1023 with the nearest of these). ========================================================================== */ :root { /* printed paper (invoice): stays light in dark mode and in print */ --srg-paper-bg: #FFFFFF; --srg-paper-text: #1E1B2E; --srg-paper-muted: #6B6880; --srg-paper-tint: #F4F2FB; --srg-paper-accent: #6D28D9; color-scheme: light; /* ---------- 1. BRAND (violet) ---------------------------------------- */ --srg-brand-50: #F5F3FF; /* EXISTING */ --srg-brand-100: #EDE9FE; /* EXISTING */ --srg-brand-200: #DDD6FE; /* EXISTING */ --srg-brand-300: #C4B5FD; /* NEW */ --srg-brand-400: #A78BFA; /* NEW — text accent on dark surfaces */ --srg-brand-500: #8B5CF6; /* EXISTING */ --srg-brand-600: #7C3AED; /* EXISTING — THE identity colour */ --srg-brand-700: #6D28D9; /* EXISTING — hover / pressed */ --srg-brand-800: #5B21B6; /* NEW */ --srg-brand-900: #4C1D95; /* NEW — text on brand-100 containers */ /* Context anchor: everything "accent" reads this */ --srg-context-accent: var(--srg-brand-600); /* EXISTING */ --srg-context-accent-hover: var(--srg-brand-700); /* EXISTING */ --srg-context-accent-rgb: 124, 58, 237; /* EXISTING */ --srg-context-accent-subtle: rgba(var(--srg-context-accent-rgb), 0.08); /* EXISTING */ --srg-context-accent-light: rgba(var(--srg-context-accent-rgb), 0.08); /* EXISTING */ --srg-context-accent-mid: rgba(var(--srg-context-accent-rgb), 0.16); /* EXISTING */ /* ---------- 2. SECONDARY (cyan) — info, "paid", logo tail ------------ */ --srg-secondary-50: #ECFEFF; /* NEW */ --srg-secondary-100: #CFFAFE; /* NEW */ --srg-secondary-500: #06B6D4; /* EXISTING */ --srg-secondary-600: #0891B2; /* EXISTING */ --srg-secondary-700: #0E7490; /* NEW — text on cyan-50 (5.15:1) */ /* ---------- 3. SUCCESS / FREE (emerald) ------------------------------ */ --srg-accent-50: #ECFDF5; /* EXISTING */ --srg-accent-500: #10B981; /* EXISTING */ --srg-accent-600: #059669; /* EXISTING */ --srg-accent-700: #047857; /* NEW — text on emerald-50 (5.21:1) */ --srg-success: var(--srg-accent-500); /* ---------- 4. STATUS ------------------------------------------------- */ --srg-warning: #F59E0B; /* EXISTING */ --srg-warning-700:#B45309; /* NEW — text on amber-50 (4.84:1) */ --srg-warning-50: #FFFBEB; /* NEW */ --srg-error: #EF4444; /* EXISTING */ --srg-error-700: #B91C1C; /* NEW — text on red-50 (5.91:1) */ --srg-error-50: #FEF2F2; /* EXISTING value used in forms.css */ /* ---------- 5. NEUTRAL (slate) ---------------------------------------- */ --srg-neutral-50: #F8FAFC; --srg-neutral-100: #F1F5F9; --srg-neutral-200: #E2E8F0; --srg-neutral-300: #CBD5E1; --srg-neutral-400: #94A3B8; /* decorative only on light surfaces (2.5:1) */ --srg-neutral-500: #64748B; --srg-neutral-600: #475569; --srg-neutral-700: #334155; --srg-neutral-800: #1E293B; --srg-neutral-900: #0F172A; /* ---------- 6. SEMANTIC ROLES — LIGHT -------------------------------- */ --srg-bg-primary: #FBFAFD; /* EXISTING */ --srg-bg-secondary: #FBFAFD; /* EXISTING */ --srg-bg-tertiary: var(--srg-neutral-100); --srg-bg-elevated: #FFFFFF; /* EXISTING */ --srg-bg-inset: var(--srg-neutral-100); /* NEW — chips, inputs */ --srg-bg-brand-soft:var(--srg-brand-50); /* NEW */ --srg-bg-code: color-mix(in srgb, var(--srg-context-accent) 3%, var(--srg-neutral-50)); /* EXISTING */ --srg-bg-inverse: var(--srg-neutral-900); /* NEW — footer, app band */ --srg-text-on-inverse: #F1F5F9; /* NEW */ --srg-text-on-inverse-secondary: #CBD5E1; /* NEW */ --srg-text-primary: #222222; /* EXISTING */ --srg-text-secondary: var(--srg-neutral-600); /* EXISTING (7.29:1) */ --srg-text-tertiary: #5B6B82; /* NEW value: slate-500 was 4.37:1 on the tonal card, this is 4.98:1 */ --srg-text-on-brand: #FFFFFF; /* NEW (5.70:1 on brand-600) */ --srg-text-link: var(--srg-brand-600); /* EXISTING */ --srg-text-link-hover: var(--srg-brand-700); /* EXISTING */ --srg-text-accent: var(--srg-brand-600); /* NEW — accent used AS TEXT */ --srg-border-primary: color-mix(in srgb, var(--srg-context-accent) 12%, transparent); /* EXISTING */ --srg-border-secondary: color-mix(in srgb, var(--srg-context-accent) 8%, transparent); /* EXISTING */ --srg-border-strong: var(--srg-neutral-300); /* NEW */ --srg-border-focus: var(--srg-brand-500); /* EXISTING (4.07:1 vs bg) */ /* Badge / status pairs (text colours are AA-safe shades of the same hues) */ --srg-badge-free-bg: var(--srg-accent-50); --srg-badge-free-text: var(--srg-accent-700); --srg-badge-free-ring: rgba(16, 185, 129, 0.25); --srg-badge-paid-bg: var(--srg-secondary-50); --srg-badge-paid-text: var(--srg-secondary-700); --srg-badge-paid-ring: rgba(6, 182, 212, 0.25); --srg-badge-pro-bg: var(--srg-brand-50); --srg-badge-pro-text: var(--srg-brand-700); --srg-badge-pro-ring: var(--srg-brand-200); --srg-badge-neutral-bg: var(--srg-neutral-100); --srg-badge-neutral-text: var(--srg-neutral-700); --srg-badge-neutral-ring: var(--srg-neutral-200); --srg-status-warning-bg: var(--srg-warning-50); --srg-status-warning-text: var(--srg-warning-700); --srg-status-error-bg: var(--srg-error-50); --srg-status-error-text: var(--srg-error-700); /* Editor: code surfaces (dark in both modes, like a terminal), scrim for modals */ --srg-code-bg: #0B1120; --srg-code-bar: #111A2E; --srg-code-bar-prompt: #1A1438; --srg-code-text: #E2E8F0; --srg-code-muted: #94A3B8; --srg-code-btn: rgba(148, 163, 184, 0.16); --srg-code-btn-hover: rgba(148, 163, 184, 0.28); --srg-code-key: #C4B5FD; --srg-code-str: #6EE7B7; --srg-code-num: #FCD34D; --srg-code-fn: #67E8F9; --srg-code-tag: #F9A8D4; --srg-code-ph: #FBBF24; --srg-code-ph-bg: rgba(251, 191, 36, 0.16); --srg-code-ok: #6EE7B7; --srg-code-ok-bg: rgba(16, 185, 129, 0.20); --srg-code-ring: transparent; --srg-scrim: rgba(15, 23, 42, 0.45); /* Buttons (same in light and dark: white on brand-600 = 5.70:1) */ --srg-btn-primary-bg: var(--srg-brand-600); --srg-btn-primary-bg-hover: var(--srg-brand-700); --srg-btn-primary-text: #FFFFFF; /* ---------- 7. TYPOGRAPHY -------------------------------------------- */ --srg-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* EXISTING */ --srg-font-heading: var(--srg-font-body); --srg-font: var(--srg-font-body); /* EXISTING */ --srg-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, monospace; --srg-fs-2xs: 0.6875rem; /* 11px badge micro */ --srg-fs-xs: 0.75rem; /* 12px caption, meta, chips */ --srg-fs-sm: 0.875rem; /* 14px UI text, buttons, card excerpt */ --srg-fs-md: 1rem; /* 16px body */ --srg-fs-lg: 1.125rem; /* 18px lead, CARD TITLE */ --srg-fs-xl: 1.25rem; /* 20px h4 */ --srg-fs-2xl: 1.5rem; /* 24px h3 */ --srg-fs-3xl: 1.875rem; /* 30px h2 */ --srg-fs-4xl: 2.25rem; /* 36px h1 */ --srg-fs-5xl: 3rem; /* 48px hero (desktop) */ --srg-fw-regular: 400; --srg-fw-medium: 500; --srg-fw-semibold:600; --srg-fw-bold: 700; --srg-fw-extrabold:800; /* NEW — card titles, hero headings */ --srg-lh-tight: 1.2; /* headings */ --srg-lh-snug: 1.35; /* card titles */ --srg-lh-normal: 1.5; /* UI */ --srg-lh-relaxed: 1.65; /* long-form reading */ --srg-ls-tight: -0.02em; /* h1-h3 */ --srg-ls-normal: 0; --srg-ls-wide: 0.05em; /* overlines, uppercase labels */ /* Role shortcuts - Fluid Responsive Typography Scale (Proportional across 320px - 1440px+) */ --srg-h1-size: clamp(1.625rem, 4.2vw + 0.25rem, 3rem); /* 26px mobile -> 48px desktop */ --srg-h2-size: clamp(1.3125rem, 2.6vw + 0.25rem, 2rem); /* 21px mobile -> 32px desktop */ --srg-h3-size: clamp(1.125rem, 1.6vw + 0.25rem, 1.5rem); /* 18px mobile -> 24px desktop */ --srg-h4-size: clamp(1rem, 1.1vw + 0.25rem, 1.25rem); /* 16px mobile -> 20px desktop */ --srg-h5-size: clamp(0.9375rem, 0.8vw + 0.25rem, 1.125rem);/* 15px mobile -> 18px desktop */ --srg-h6-size: clamp(0.875rem, 0.5vw + 0.25rem, 1rem); /* 14px mobile -> 16px desktop */ --srg-card-title-size: var(--srg-fs-lg); --srg-card-title-weight: var(--srg-fw-semibold); /* ---------- 8. SPACE (4px base) --------------------------------------- */ --srg-space-1: 0.25rem; /* 4 */ --srg-space-2: 0.5rem; /* 8 */ --srg-space-3: 0.75rem; /* 12 */ --srg-space-4: 1rem; /* 16 EXISTING */ --srg-space-5: 1.25rem; /* 20 */ --srg-space-6: 1.5rem; /* 24 EXISTING */ --srg-space-8: 2rem; /* 32 */ --srg-space-10: 2.5rem; /* 40 */ --srg-space-12: 3rem; /* 48 */ --srg-space-16: 4rem; /* 64 */ --srg-space-20: 5rem; /* 80 — section rhythm */ /* ---------- 9. SHAPE --------------------------------------------------- */ --srg-radius-sm: 0.25rem; /* 4 tags, kbd */ --srg-radius-md: 0.5rem; /* 8 EXISTING — buttons, inputs */ --srg-radius-lg: 0.75rem; /* 12 EXISTING — cards */ --srg-radius-xl: 1rem; /* 16 EXISTING — panels, icon plates */ --srg-radius-xxl: 1.5rem; /* 24 NEW — cards (tonal card language) */ --srg-radius-hero: 2rem; /* 32 NEW — hero surfaces */ --srg-radius-pill: 9999px; /* chips, nav pills, avatars */ /* ---------- 9b. TONAL CARD SURFACES + RATING (NEW) ------------------- */ --srg-surface-card: #F6F4FC; /* card: tone, no border, no shadow */ --srg-surface-card-hover: #EFEBFA; --srg-surface-plate: #FFFFFF; /* icon plate and media well on a card */ --srg-star: #C2680A; /* filled star, 3.65:1 on card, 3.98:1 on white */ --srg-star-off: #8A84A6; /* empty star outline, 3.25:1 on card */ --srg-meter-ok: #059669; /* ring and status marks, 3.8:1 on white */ --srg-meter-mid: #B45309; /* 5.0:1 on white */ --srg-meter-low: #DC2626; /* 4.8:1 on white */ --srg-meter-track: #E2E8F0; /* ---------- 10. ELEVATION --------------------------------------------- */ --srg-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --srg-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --srg-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.05); /* EXISTING name */ --srg-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -4px rgba(15, 23, 42, 0.05); /* EXISTING name */ --srg-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.05); --srg-shadow-brand: 0 4px 12px rgba(var(--srg-context-accent-rgb), 0.25); --srg-focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.35); /* ---------- 11. MOTION -------------------------------------------------- */ --srg-ease: cubic-bezier(0.4, 0, 0.2, 1); --srg-duration-fast: 120ms; --srg-duration-base: 200ms; --srg-duration-slow: 320ms; --srg-transition-base: var(--srg-duration-base) var(--srg-ease); /* EXISTING */ /* ---------- 12. LAYERS --------------------------------------------------- */ --srg-z-base: 1; --srg-z-dropdown: 100; --srg-z-sticky: 200; /* EXISTING */ --srg-z-modal: 300; /* EXISTING */ --srg-z-toast: 500; /* ---------- 13. LAYOUT ---------------------------------------------------- */ --srg-container-sm: 640px; --srg-container-md: 768px; --srg-container-lg: 1024px; --srg-container-xl: 1280px; /* EXISTING */ --srg-container-wide: 1400px; /* EXISTING */ --srg-gutter: var(--srg-space-4); --srg-header-height: 88px; /* tall enough for the full lockup (tagline legible) without shrinking on scroll */ --srg-logo-header-w: 11.5rem; /* 184px: full lockup in the header */ --srg-logo-header-mark: 3rem; /* mark + site name mode: 48px, the largest size that still uses the small cut */ --srg-header-height-sm: 72px; /* below 1024px */ --srg-logo-header-w-md: 10rem; /* 160px, 1024 to 1279 */ --srg-logo-header-mark-md: 2.5rem; --srg-logo-header-w-sm: 9.5rem; /* 152px */ --srg-logo-header-mark-sm: 2.25rem; --srg-logo-compact-h: 2.25rem; /* 36px tall = 108px wide, above the compact lockup's 100px minimum */ --srg-logo-full-w: 12.5rem; /* 200px, the full lockup's minimum (tagline stays legible) */ --srg-logo-stacked-w: 10rem; /* 160px */ --srg-logo-mark-s: 2.5rem; /* mark alone; below 3rem the favicon cut is used instead */ } /* ========================================================================== DARK — class-based only ========================================================================== */ :root.srg-dark, html.srg-dark { color-scheme: dark; background-color: var(--srg-bg-primary); color: var(--srg-text-primary); --srg-context-accent: var(--srg-brand-500); /* outlines, glows, icons (4.2:1) */ --srg-context-accent-hover: var(--srg-brand-400); --srg-bg-primary: #080515; /* EXISTING */ --srg-bg-secondary: #0F172A; /* EXISTING */ --srg-bg-tertiary: #1E293B; --srg-bg-elevated: #0F172A; /* EXISTING */ --srg-bg-inset: #1E293B; --srg-bg-brand-soft: rgba(139, 92, 246, 0.14); --srg-bg-code: #0B1120; --srg-bg-inverse: #0B0818; --srg-code-ring: rgba(167, 139, 250, 0.16); --srg-scrim: rgba(2, 1, 8, 0.65); --srg-surface-card: #0F172A; --srg-surface-card-hover: #162036; --srg-surface-plate: #1E293B; --srg-star: #FBBF24; /* 10.7:1 on card */ --srg-star-off: #64748B; --srg-meter-ok: #34D399; --srg-meter-mid: #FBBF24; --srg-meter-low: #F87171; --srg-meter-track: #334155; --srg-text-primary: #F1F5F9; /* EXISTING */ --srg-text-secondary: var(--srg-neutral-400); /* EXISTING (6.96:1 on cards) */ --srg-text-tertiary: var(--srg-neutral-400); --srg-text-link: var(--srg-brand-400); /* 6.56:1 on cards */ --srg-text-link-hover: var(--srg-brand-300); --srg-text-accent: var(--srg-brand-400); --srg-border-primary: color-mix(in srgb, var(--srg-context-accent) 16%, #1a1332); /* EXISTING */ --srg-border-secondary: rgba(124, 58, 237, 0.08); /* EXISTING */ --srg-border-strong: #334155; --srg-badge-free-bg: rgba(16, 185, 129, 0.12); --srg-badge-free-text: #34D399; --srg-badge-free-ring: rgba(52, 211, 153, 0.25); --srg-badge-paid-bg: rgba(6, 182, 212, 0.12); --srg-badge-paid-text: #22D3EE; --srg-badge-paid-ring: rgba(34, 211, 238, 0.25); --srg-badge-pro-bg: rgba(139, 92, 246, 0.16); --srg-badge-pro-text: var(--srg-brand-300); --srg-badge-pro-ring: rgba(167, 139, 250, 0.30); --srg-badge-neutral-bg: #1E293B; --srg-badge-neutral-text: var(--srg-neutral-300); --srg-badge-neutral-ring: #334155; --srg-status-warning-bg: rgba(245, 158, 11, 0.12); --srg-status-warning-text: #FBBF24; --srg-status-error-bg: rgba(239, 68, 68, 0.12); --srg-status-error-text: #F87171; --srg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --srg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --srg-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45); --srg-shadow-lg: 0 10px 18px -4px rgba(0, 0, 0, 0.50); --srg-shadow-xl: 0 20px 28px -6px rgba(0, 0, 0, 0.55); --srg-focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.45); } @media (prefers-reduced-motion: reduce) { :root { --srg-duration-fast: 0.01ms; --srg-duration-base: 0.01ms; --srg-duration-slow: 0.01ms; } }