/* ========================================================================= TELDIO DESIGN SYSTEM — DESIGN TOKENS -------------------------------------------------------------------------- The single source of truth for color, type, spacing, radius, shadow, and motion. Import this stylesheet first in every page. Naming convention: --tdo-{category}-{role}-{variant} Example: --tdo-color-accent-green --tdo-fs-display-lg --tdo-space-4 Theme switching: (default) ========================================================================= */ /* -- Web fonts ----------------------------------------------------------- */ /* Fonts are self-hosted via theme.json `fontFace` (assets/fonts/*.woff2) and preloaded in functions.php — no Google Fonts request. The --tdo-font-* stacks below name the same families WordPress registers from theme.json. */ :root { /* --------------------------------------------------------------------- BRAND COLOR — raw palette (do not reference directly in components; reference the semantic tokens further down). --------------------------------------------------------------------- */ --tdo-brand-green: #A0AD39; --tdo-brand-green-600: #8C9830; /* hover / pressed */ --tdo-brand-green-700: #6F7926; --tdo-brand-green-100: #ECEEC9; /* tinted surface */ --tdo-brand-green-50: #F6F7E4; --tdo-brand-orange: #E85D31; --tdo-brand-orange-600: #C84A23; --tdo-brand-orange-100: #FBDFD2; --tdo-brand-blue: #0861AB; --tdo-brand-blue-600: #084F8B; --tdo-brand-blue-100: #CFE0F2; /* Warm-neutral greyscale (slight warm tilt; matches Teldio brand greys) */ --tdo-ink: #0F0F0F; --tdo-graphite: #1A1A1A; --tdo-graphite-2: #252525; --tdo-grey-700: #3A3A3A; --tdo-grey-600: #4D4D4D; --tdo-grey-500: #757575; --tdo-grey-400: #A8A8A8; --tdo-grey-300: #D4D4D4; --tdo-grey-200: #EBECEC; --tdo-grey-100: #F3F3F1; --tdo-paper: #FAFAF7; /* warm off-white */ --tdo-white: #FFFFFF; /* Signal colors (success/warn/error/info) — derived where possible */ --tdo-success: var(--tdo-brand-green-600); --tdo-warn: #D89A1C; --tdo-danger: #C2362A; --tdo-info: var(--tdo-brand-blue); /* --------------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------------- */ --tdo-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --tdo-font-body: 'Oxygen', 'Helvetica Neue', Arial, sans-serif; --tdo-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Type scale — fluid via clamp so it adapts down to mobile gracefully. Use the *-lg/*-md/*-sm names rather than raw px values. */ --tdo-fs-display-xl: clamp(3.25rem, 6vw + 1rem, 6rem); /* 52–96px */ --tdo-fs-display-lg: clamp(2.5rem, 4vw + 1rem, 4.5rem); /* 40–72px */ --tdo-fs-display-md: clamp(2rem, 2.5vw + 1rem, 3rem); /* 32–48px */ --tdo-fs-display-sm: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); /* 24–36px */ --tdo-fs-title: 1.375rem; /* 22 — card titles, section labels */ --tdo-fs-body-lg: 1.125rem; /* 18 — lead paragraph */ --tdo-fs-body: 1rem; /* 16 — default body */ --tdo-fs-body-sm: 0.875rem; /* 14 — meta, captions */ --tdo-fs-micro: 0.75rem; /* 12 — eyebrows, labels */ --tdo-lh-tight: 1.05; --tdo-lh-snug: 1.2; --tdo-lh-normal: 1.5; --tdo-lh-loose: 1.7; --tdo-tracking-tight: -0.02em; --tdo-tracking-normal: 0; --tdo-tracking-wide: 0.04em; --tdo-tracking-eyebrow: 0.12em; /* used on uppercase eyebrows */ /* --------------------------------------------------------------------- SPACING — 4px base --------------------------------------------------------------------- */ --tdo-space-0: 0; --tdo-space-1: 4px; --tdo-space-2: 8px; --tdo-space-3: 12px; --tdo-space-4: 16px; --tdo-space-5: 24px; --tdo-space-6: 32px; --tdo-space-7: 48px; --tdo-space-8: 64px; --tdo-space-9: 96px; --tdo-space-10: 128px; --tdo-space-11: 192px; /* Layout */ --tdo-container-max: 1280px; --tdo-container-narrow: 880px; --tdo-container-px: clamp(20px, 4vw, 48px); --tdo-section-py: clamp(48px, 5vw, 80px); /* --------------------------------------------------------------------- RADIUS — deliberately sharp. No mid-range squircles. --------------------------------------------------------------------- */ --tdo-radius-0: 0; --tdo-radius-sm: 4px; --tdo-radius-md: 8px; --tdo-radius-pill: 999px; /* --------------------------------------------------------------------- BORDER WIDTH --------------------------------------------------------------------- */ --tdo-border-hairline: 1px; --tdo-border-emphasis: 1.5px; --tdo-border-heavy: 2px; /* --------------------------------------------------------------------- SHADOWS — restrained. Used sparingly; prefer borders + tone for depth. --------------------------------------------------------------------- */ --tdo-shadow-sm: 0 1px 2px rgba(15,15,15,0.06), 0 1px 1px rgba(15,15,15,0.04); --tdo-shadow-md: 0 4px 12px rgba(15,15,15,0.08), 0 2px 4px rgba(15,15,15,0.04); --tdo-shadow-lg: 0 16px 40px rgba(15,15,15,0.12), 0 4px 8px rgba(15,15,15,0.06); --tdo-shadow-focus: 0 0 0 3px rgba(160, 173, 57, 0.35); /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --tdo-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --tdo-ease-accel: cubic-bezier(0.4, 0, 1, 1); --tdo-ease-decel: cubic-bezier(0, 0, 0.2, 1); --tdo-dur-fast: 120ms; --tdo-dur-base: 200ms; --tdo-dur-slow: 400ms; --tdo-dur-reveal: 600ms; /* --------------------------------------------------------------------- Z-INDEX --------------------------------------------------------------------- */ --tdo-z-base: 1; --tdo-z-sticky: 50; --tdo-z-nav: 100; --tdo-z-overlay: 900; --tdo-z-modal: 1000; --tdo-z-toast: 1100; } /* ========================================================================= SEMANTIC TOKENS — Light theme (default) Components should ONLY reference these, never the raw palette. ========================================================================= */ :root, [data-theme="light"] { /* surfaces */ --tdo-bg: var(--tdo-paper); --tdo-bg-elevated: var(--tdo-white); --tdo-bg-subtle: var(--tdo-grey-100); --tdo-bg-inverse: var(--tdo-graphite-2); /* text */ --tdo-text: var(--tdo-graphite-2); --tdo-text-muted: var(--tdo-grey-600); --tdo-text-subtle: var(--tdo-grey-500); --tdo-text-inverse: var(--tdo-paper); --tdo-text-on-accent: var(--tdo-graphite-2); /* on the green */ --tdo-text-link: var(--tdo-brand-blue); /* borders / dividers */ --tdo-border: var(--tdo-grey-200); --tdo-border-strong: var(--tdo-grey-300); --tdo-border-emphasis-c: var(--tdo-graphite-2); /* accent (action) */ --tdo-accent: var(--tdo-brand-green); --tdo-accent-hover: var(--tdo-brand-green-600); --tdo-accent-tint: var(--tdo-brand-green-100); /* status */ --tdo-success-bg: #ECEEC9; --tdo-warn-bg: #FBEFCF; --tdo-danger-bg: #FADAD6; --tdo-info-bg: var(--tdo-brand-blue-100); } /* ========================================================================= SEMANTIC TOKENS — Dark theme ========================================================================= */ [data-theme="dark"] { --tdo-bg: var(--tdo-ink); --tdo-bg-elevated: var(--tdo-graphite); --tdo-bg-subtle: var(--tdo-graphite-2); --tdo-bg-inverse: var(--tdo-paper); --tdo-text: var(--tdo-paper); --tdo-text-muted: var(--tdo-grey-400); --tdo-text-subtle: var(--tdo-grey-500); --tdo-text-inverse: var(--tdo-graphite-2); --tdo-text-on-accent: var(--tdo-graphite-2); --tdo-text-link: #6FA8E2; --tdo-border: #2E2E2E; --tdo-border-strong: #3A3A3A; --tdo-border-emphasis-c: var(--tdo-paper); --tdo-accent: var(--tdo-brand-green); --tdo-accent-hover: #B4C147; --tdo-accent-tint: rgba(160, 173, 57, 0.18); --tdo-success-bg: rgba(160, 173, 57, 0.18); --tdo-warn-bg: rgba(216, 154, 28, 0.18); --tdo-danger-bg: rgba(194, 54, 42, 0.20); --tdo-info-bg: rgba(8, 97, 171, 0.22); }