/*========================================================== DESIGN TOKENS Single source of truth for colour, type, spacing, radius, elevation and motion. Loaded BEFORE style.css so every stylesheet (components.css, pages/*.css, fixes.css) can use them. Breakpoints (CSS custom properties cannot be used inside @media, so these are the documented values to use everywhere): --bp-sm 576px large phones --bp-md 768px tablets / main mobile breakpoint (header collapses) --bp-lg 992px small laptops --bp-xl 1200px desktops Write media queries mobile-first: @media (min-width: 768px) { ... } Legacy style.css uses max-width queries at the same values. ==========================================================*/ :root { /* ---- Brand colour ---- ONE value drives every accent on the classic site: --brand (default orange #ff6b00, the hero photo background). The theme panel (_ThemePanelPartial) overrides --brand on ; every shade below is mixed from it, so all of them follow. Note: white on #ff6b00 is ~2.9:1, so button labels stay bold/semibold. */ --brand: #ff6b00; --brand-dark: color-mix(in srgb, var(--brand) 90%, #000); /* hover/active (~#e85d00) */ --brand-mid: color-mix(in srgb, var(--brand) 70%, #fff); /* gradient start (~#ff9a4d) */ --brand-light: color-mix(in srgb, var(--brand) 56%, #fff); /* bubble light (~#ffb070) */ --color-primary-bright: var(--brand); /* decorative: bars, dots, icons on dark */ --color-primary: var(--brand); /* accents, borders, icons */ --color-primary-strong: var(--brand); /* buttons, links, accent text */ --color-primary-hover: var(--brand-dark); --gradient-primary: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand) 100%); /* filled buttons = photo background */ --gradient-primary-hover: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); --shadow-primary: 0 10px 24px color-mix(in srgb, var(--brand) 30%, transparent); --gradient-text: linear-gradient(145deg, var(--brand-light) 0%, var(--brand) 100%); /* heading highlights = hero bubble */ --color-primary-soft: color-mix(in srgb, var(--brand) 9%, #fff); /* chip / tint background (~#fff4e8) */ --color-primary-soft-border: color-mix(in srgb, var(--brand) 33%, #fff); /* (~#fed7aa) */ --color-on-primary: #ffffff; /* ---- Neutrals (slate, 900 = brand navy) ---- */ --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #17233d; /* ---- Semantic ---- */ --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-muted: var(--color-neutral-50); --color-surface-dark: #18202d; --color-border: var(--color-neutral-200); --color-text: var(--color-neutral-900); --color-text-muted: var(--color-neutral-600); --color-text-subtle: var(--color-neutral-500); --color-text-inverse: #ffffff; --color-success: #16a34a; /* status dot */ --color-success-text: #15803d; --color-success-soft: #dcfce7; --color-info: #2563eb; --color-info-soft: #dbeafe; --color-danger: #b91c1c; --color-danger-soft: #fef2f2; /* ---- Typography ---- */ --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-xs: 0.75rem; /* 12 metadata */ --fs-sm: 0.875rem; /* 14 labels, chips */ --fs-base: 1rem; /* 16 body */ --fs-md: 1.125rem; /* 18 lead, card titles */ --fs-lg: 1.375rem; /* 22 sub-headings */ --fs-xl: 1.75rem; /* 28 mobile H2 */ --fs-2xl: 2.25rem; /* 36 H2 */ --fs-display: clamp(2.5rem, 5vw + 1rem, 4rem); /* hero H1 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.65; --tracking-wide: 0.08em; /* ---- Spacing (4-based) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---- Layout ---- */ --container-max: 1200px; --gutter: 16px; --header-offset: 96px; /* fixed header height + breathing room (anchor scroll-margin) */ --control-height: 48px; /* buttons & inputs: one height everywhere */ /* ---- Radius ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* ---- Elevation ---- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); --shadow-md: 0 12px 32px rgba(15, 23, 42, .10); /* ---- Motion ---- */ --duration-fast: 150ms; --duration-base: 250ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); /* ---- Focus ---- */ --focus-ring-color: var(--color-primary-bright); --focus-ring-width: 3px; } @media (min-width: 768px) { :root { --gutter: 24px; } }