/* ========================================================================== Gladding Digital token layer for Core GeneratePress child theme, gladdingdigital.com Single source of truth for colour, type, space, radius, shadow and motion. Patterns and global classes use these names only. Nothing downstream should carry a raw hex value or a pixel measurement of its own. Colour decision, 21 Sep 2026 (CLAUDE.md decisions log): the nine globals are the site's existing GeneratePress colours. GeneratePress prints them itself from Customizer > Colors. They are repeated here so the editor, isolated previews and a fresh install resolve the same values. Keep the two in step. ========================================================================== */ :root { /* -------------------------------------------------------------------- 1. The nine GeneratePress globals (mirror of Customizer > Colors) -------------------------------------------------------------------- */ --brand-1: #172E47; /* Navy. Dark sections, footer, chips, active nav, avatar fill */ --brand-2: #213D61; /* Lighter navy. Links, mono labels, tick icons, hover on navy */ --accent: #EA580C; /* Orange. Primary buttons (dark text), numbers 24px and up, nav underline, arc highlight */ --contrast: #222222; /* Body text, headings, text on orange */ --contrast-2: #575760; /* Muted text, captions, meta */ --contrast-3: #B2B2BE; /* Lines and dividers only. Too light for text on any surface here */ --base: #F0F0F0; /* Cloud role: alternate sections */ --base-2: #F7F8F9; /* Paper role: page background (GeneratePress body) */ --base-3: #F5F5F5; /* GeneratePress header and footer bars. Not distinct enough for borders, see --line */ /* -------------------------------------------------------------------- 2. Derived colour: alpha, tint and shade variants via color-mix() alpha-N = N% of the colour over transparent tint-N = N% white mixed in (higher is lighter) shade-N = N% black mixed in (higher is darker) -------------------------------------------------------------------- */ --accent-alpha-10: color-mix(in srgb, var(--accent) 10%, transparent); --accent-alpha-20: color-mix(in srgb, var(--accent) 20%, transparent); --accent-alpha-30: color-mix(in srgb, var(--accent) 30%, transparent); --accent-alpha-40: color-mix(in srgb, var(--accent) 40%, transparent); --accent-alpha-50: color-mix(in srgb, var(--accent) 50%, transparent); --accent-alpha-60: color-mix(in srgb, var(--accent) 60%, transparent); --accent-alpha-70: color-mix(in srgb, var(--accent) 70%, transparent); --accent-alpha-80: color-mix(in srgb, var(--accent) 80%, transparent); --accent-alpha-90: color-mix(in srgb, var(--accent) 90%, transparent); --accent-tint-10: color-mix(in srgb, var(--accent) 90%, white); --accent-tint-20: color-mix(in srgb, var(--accent) 80%, white); --accent-tint-30: color-mix(in srgb, var(--accent) 70%, white); --accent-tint-40: color-mix(in srgb, var(--accent) 60%, white); --accent-tint-50: color-mix(in srgb, var(--accent) 50%, white); --accent-tint-60: color-mix(in srgb, var(--accent) 40%, white); --accent-tint-70: color-mix(in srgb, var(--accent) 30%, white); --accent-tint-80: color-mix(in srgb, var(--accent) 20%, white); --accent-tint-90: color-mix(in srgb, var(--accent) 10%, white); --accent-shade-10: color-mix(in srgb, var(--accent) 90%, black); --accent-shade-20: color-mix(in srgb, var(--accent) 80%, black); --accent-shade-30: color-mix(in srgb, var(--accent) 70%, black); --accent-shade-40: color-mix(in srgb, var(--accent) 60%, black); --accent-shade-50: color-mix(in srgb, var(--accent) 50%, black); --brand-1-alpha-10: color-mix(in srgb, var(--brand-1) 10%, transparent); --brand-1-alpha-20: color-mix(in srgb, var(--brand-1) 20%, transparent); --brand-1-alpha-30: color-mix(in srgb, var(--brand-1) 30%, transparent); --brand-1-alpha-40: color-mix(in srgb, var(--brand-1) 40%, transparent); --brand-1-alpha-50: color-mix(in srgb, var(--brand-1) 50%, transparent); --brand-1-alpha-60: color-mix(in srgb, var(--brand-1) 60%, transparent); --brand-1-alpha-70: color-mix(in srgb, var(--brand-1) 70%, transparent); --brand-1-alpha-80: color-mix(in srgb, var(--brand-1) 80%, transparent); --brand-1-alpha-90: color-mix(in srgb, var(--brand-1) 90%, transparent); --brand-1-tint-10: color-mix(in srgb, var(--brand-1) 90%, white); --brand-1-tint-20: color-mix(in srgb, var(--brand-1) 80%, white); --brand-1-tint-30: color-mix(in srgb, var(--brand-1) 70%, white); --brand-1-tint-40: color-mix(in srgb, var(--brand-1) 60%, white); --brand-1-tint-50: color-mix(in srgb, var(--brand-1) 50%, white); --brand-1-tint-60: color-mix(in srgb, var(--brand-1) 40%, white); --brand-1-tint-70: color-mix(in srgb, var(--brand-1) 30%, white); --brand-1-tint-80: color-mix(in srgb, var(--brand-1) 20%, white); --brand-1-tint-90: color-mix(in srgb, var(--brand-1) 10%, white); --brand-1-shade-10: color-mix(in srgb, var(--brand-1) 90%, black); --brand-1-shade-20: color-mix(in srgb, var(--brand-1) 80%, black); --brand-1-shade-30: color-mix(in srgb, var(--brand-1) 70%, black); --brand-1-shade-40: color-mix(in srgb, var(--brand-1) 60%, black); --brand-1-shade-50: color-mix(in srgb, var(--brand-1) 50%, black); --brand-2-alpha-10: color-mix(in srgb, var(--brand-2) 10%, transparent); --brand-2-alpha-20: color-mix(in srgb, var(--brand-2) 20%, transparent); --brand-2-alpha-30: color-mix(in srgb, var(--brand-2) 30%, transparent); --brand-2-alpha-40: color-mix(in srgb, var(--brand-2) 40%, transparent); --brand-2-alpha-50: color-mix(in srgb, var(--brand-2) 50%, transparent); --brand-2-alpha-60: color-mix(in srgb, var(--brand-2) 60%, transparent); --brand-2-alpha-70: color-mix(in srgb, var(--brand-2) 70%, transparent); --brand-2-alpha-80: color-mix(in srgb, var(--brand-2) 80%, transparent); --brand-2-alpha-90: color-mix(in srgb, var(--brand-2) 90%, transparent); --brand-2-tint-10: color-mix(in srgb, var(--brand-2) 90%, white); --brand-2-tint-20: color-mix(in srgb, var(--brand-2) 80%, white); --brand-2-tint-30: color-mix(in srgb, var(--brand-2) 70%, white); --brand-2-tint-40: color-mix(in srgb, var(--brand-2) 60%, white); --brand-2-tint-50: color-mix(in srgb, var(--brand-2) 50%, white); --brand-2-tint-60: color-mix(in srgb, var(--brand-2) 40%, white); --brand-2-tint-70: color-mix(in srgb, var(--brand-2) 30%, white); --brand-2-tint-80: color-mix(in srgb, var(--brand-2) 20%, white); --brand-2-tint-90: color-mix(in srgb, var(--brand-2) 10%, white); --brand-2-shade-10: color-mix(in srgb, var(--brand-2) 90%, black); --brand-2-shade-20: color-mix(in srgb, var(--brand-2) 80%, black); --brand-2-shade-30: color-mix(in srgb, var(--brand-2) 70%, black); --brand-2-shade-40: color-mix(in srgb, var(--brand-2) 60%, black); --brand-2-shade-50: color-mix(in srgb, var(--brand-2) 50%, black); --contrast-alpha-10: color-mix(in srgb, var(--contrast) 10%, transparent); --contrast-alpha-20: color-mix(in srgb, var(--contrast) 20%, transparent); --contrast-alpha-30: color-mix(in srgb, var(--contrast) 30%, transparent); --contrast-alpha-40: color-mix(in srgb, var(--contrast) 40%, transparent); --contrast-alpha-50: color-mix(in srgb, var(--contrast) 50%, transparent); --contrast-alpha-60: color-mix(in srgb, var(--contrast) 60%, transparent); --contrast-alpha-70: color-mix(in srgb, var(--contrast) 70%, transparent); --contrast-alpha-80: color-mix(in srgb, var(--contrast) 80%, transparent); --contrast-alpha-90: color-mix(in srgb, var(--contrast) 90%, transparent); --contrast-tint-10: color-mix(in srgb, var(--contrast) 90%, white); --contrast-tint-20: color-mix(in srgb, var(--contrast) 80%, white); --contrast-tint-30: color-mix(in srgb, var(--contrast) 70%, white); --contrast-tint-40: color-mix(in srgb, var(--contrast) 60%, white); --contrast-tint-50: color-mix(in srgb, var(--contrast) 50%, white); --contrast-tint-60: color-mix(in srgb, var(--contrast) 40%, white); --contrast-tint-70: color-mix(in srgb, var(--contrast) 30%, white); --contrast-tint-80: color-mix(in srgb, var(--contrast) 20%, white); --contrast-tint-90: color-mix(in srgb, var(--contrast) 10%, white); --contrast-3-alpha-10: color-mix(in srgb, var(--contrast-3) 10%, transparent); --contrast-3-alpha-20: color-mix(in srgb, var(--contrast-3) 20%, transparent); --contrast-3-alpha-30: color-mix(in srgb, var(--contrast-3) 30%, transparent); --contrast-3-alpha-40: color-mix(in srgb, var(--contrast-3) 40%, transparent); --contrast-3-alpha-50: color-mix(in srgb, var(--contrast-3) 50%, transparent); --contrast-3-alpha-60: color-mix(in srgb, var(--contrast-3) 60%, transparent); --contrast-3-alpha-70: color-mix(in srgb, var(--contrast-3) 70%, transparent); --contrast-3-alpha-80: color-mix(in srgb, var(--contrast-3) 80%, transparent); --contrast-3-alpha-90: color-mix(in srgb, var(--contrast-3) 90%, transparent); --contrast-3-tint-10: color-mix(in srgb, var(--contrast-3) 90%, white); --contrast-3-tint-20: color-mix(in srgb, var(--contrast-3) 80%, white); --contrast-3-tint-30: color-mix(in srgb, var(--contrast-3) 70%, white); --contrast-3-tint-40: color-mix(in srgb, var(--contrast-3) 60%, white); --contrast-3-tint-50: color-mix(in srgb, var(--contrast-3) 50%, white); --contrast-3-tint-60: color-mix(in srgb, var(--contrast-3) 40%, white); --contrast-3-tint-70: color-mix(in srgb, var(--contrast-3) 30%, white); --contrast-3-tint-80: color-mix(in srgb, var(--contrast-3) 20%, white); --contrast-3-tint-90: color-mix(in srgb, var(--contrast-3) 10%, white); --base-alpha-10: color-mix(in srgb, var(--base) 10%, transparent); --base-alpha-20: color-mix(in srgb, var(--base) 20%, transparent); --base-alpha-30: color-mix(in srgb, var(--base) 30%, transparent); --base-alpha-40: color-mix(in srgb, var(--base) 40%, transparent); --base-alpha-50: color-mix(in srgb, var(--base) 50%, transparent); --base-alpha-60: color-mix(in srgb, var(--base) 60%, transparent); --base-alpha-70: color-mix(in srgb, var(--base) 70%, transparent); --base-alpha-80: color-mix(in srgb, var(--base) 80%, transparent); --base-alpha-90: color-mix(in srgb, var(--base) 90%, transparent); --base-shade-10: color-mix(in srgb, var(--base) 90%, black); --base-shade-20: color-mix(in srgb, var(--base) 80%, black); --base-shade-30: color-mix(in srgb, var(--base) 70%, black); /* -------------------------------------------------------------------- 3. Semantic colour. Patterns reach for these before the raw globals. -------------------------------------------------------------------- */ --white: #FFFFFF; /* Surfaces, in the order the brief stacks them: Paper, Cloud, Pine */ --surface-page: var(--base-2); /* Paper: page background, hero */ --surface-alt: var(--base); /* Cloud: alternate sections */ --surface-card: var(--white); /* Cards sit on either of the above */ --surface-dark: var(--brand-1); /* Pine role: dark sections, footer, final CTA */ /* Text */ --text-primary: var(--contrast); --text-secondary: var(--contrast-2); --text-tertiary: color-mix(in srgb, var(--contrast-2) 85%, white); /* still 4.5:1 on Paper */ --text-disabled: var(--contrast-3); --text-inverse: var(--base-2); --text-on-dark: var(--base-2); --text-on-dark-muted: color-mix(in srgb, var(--base-2) 72%, transparent); --text-on-accent: color-mix(in srgb, var(--contrast) 80%, black); /* orange carries dark text, never white. Plain contrast is 4.46:1 on this orange, this mix is 4.8:1 */ /* Links */ --link: var(--brand-2); --link-hover: var(--accent-shade-20); /* Lines. contrast-3 at partial alpha reads as a light grey rule on every light surface */ --line: color-mix(in srgb, var(--contrast-3) 55%, transparent); --line-strong: var(--contrast-3); --line-on-dark: color-mix(in srgb, var(--base-2) 16%, transparent); --border-light: color-mix(in srgb, var(--contrast-3) 35%, transparent); --border-default: var(--line); --border-dark: var(--line-strong); /* Backgrounds */ --bg-subtle: var(--surface-alt); --bg-muted: color-mix(in srgb, var(--contrast-3) 25%, var(--base)); --bg-disabled: color-mix(in srgb, var(--contrast-3) 40%, var(--base)); --bg-card-on-dark: color-mix(in srgb, var(--base-2) 6%, transparent); /* Accent states. Hover goes lighter, not darker, so dark text keeps 4.5:1 */ --accent-hover: var(--accent-tint-10); --accent-active: var(--accent); --focus-ring: var(--accent-alpha-50); /* Status colours (client area chips, form states) */ --color-success: #16A34A; --color-success-light: #DCFCE7; --color-success-dark: #166534; --color-warning: #D97706; --color-warning-light: #FEF3C7; --color-warning-dark: #92400E; --color-error: #DC2626; --color-error-light: #FEE2E2; --color-error-dark: #991B1B; --color-info: #2563EB; --color-info-light: #DBEAFE; --color-info-dark: #1E40AF; --status-good-bg: var(--color-success-light); --status-good-fg: var(--color-success-dark); --status-wait-bg: var(--color-warning-light); --status-wait-fg: var(--color-warning-dark); /* Staging-only placeholder chip. Strip before launch */ --placeholder-bg: var(--accent-tint-90); /* -------------------------------------------------------------------- 4. Type Lexend for everything readable, IBM Plex Mono as the label maker: chips, mono labels, prices in tables, timestamps, meta. -------------------------------------------------------------------- */ --gp-font--lexend: "Lexend"; /* fallback for GeneratePress's own variable when the font library entry is missing */ --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; --font-heading: var(--font-body); --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px, Core body size */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px, the smallest size orange may carry */ --text-mono-xs: 0.6875rem; /* 11px chips */ --text-mono-sm: 0.75rem; /* 12px labels */ --text-stat: 1.875rem; /* 30px stat numbers */ --text-h3: clamp(1.25rem, 2vw, 1.5rem); --text-h2: clamp(1.625rem, 3.5vw, 2.25rem); /* matches Customizer h2 */ --text-h1: clamp(2rem, 4vw, 3rem); /* matches Customizer h1 */ --text-display: clamp(2.5rem, 6vw, 4.25rem); /* hero headlines */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.7; /* Core body line height */ --tracking-tight: -0.02em; --tracking-mono: 0.16em; --tracking-chip: 0.14em; /* -------------------------------------------------------------------- 5. Space, on an 8px grid -------------------------------------------------------------------- */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 1.5rem; /* 24px */ --spacing-lg: 2rem; /* 32px */ --spacing-xl: 3rem; /* 48px */ --spacing-2xl: 4rem; /* 64px */ --spacing-3xl: 6rem; /* 96px */ --spacing-4xl: 8rem; /* 128px */ /* Section rhythm: desktop value first, scaling down on small screens */ --section-xs: clamp(2rem, 5vw, 3rem); /* 48px */ --section-sm: clamp(2.5rem, 6vw, 4rem); /* 64px */ --section-md: clamp(3.5rem, 8vw, 6rem); /* 96px, the default */ --section-lg: clamp(4.5rem, 10vw, 8rem); /* 128px */ --section-xl: clamp(5.5rem, 12vw, 10rem); /* 160px */ --gutter: clamp(1rem, 4vw, 1.5rem); /* 16 to 24px side padding */ --wrapper-xs: 640px; --wrapper-sm: 800px; --wrapper-md: 1200px; /* the default */ --wrapper-lg: 1400px; --wrapper-xl: 1600px; --card-padding: var(--spacing-lg); --card-padding-sm: var(--spacing-md); --btn-height: 2.75rem; /* 44px */ --btn-padding: 0.75rem 1.375rem; --header-height: 5rem; /* 80px */ --sidebar-width: 17.5rem; /* 280px client area sidebar */ /* -------------------------------------------------------------------- 6. Radius, shadow, motion -------------------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px chips, tags */ --radius-md: 0.5rem; /* 8px inputs, small cards */ --radius-lg: 1rem; /* 16px panels */ --radius-xl: 1.5rem; /* 24px large containers */ --radius-full: 9999px; --radius-btn: 0.375rem; /* 6px, from the mockups */ --radius-card: 0.75rem; /* 12px, from the mockups */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--brand-1) 8%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, var(--brand-1) 10%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, var(--brand-1) 14%, transparent); --shadow-xl: 0 24px 60px color-mix(in srgb, var(--brand-1) 18%, transparent); --shadow-card: 0 24px 60px color-mix(in srgb, var(--brand-1) 10%, transparent); --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; /* Dot grid and arcs */ --dot-color: var(--line); --dot-size: 1.3px; --dot-gap: 26px; } /* Everything animated respects the visitor's motion setting */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; } }