/* * Design tokens for AI Tools for Everyone. * Mirrors the palette/typography/spacing scale defined in theme.json so * Gutenberg content and custom template markup share one visual system. * Breakpoints are documented here (custom properties cannot be used inside * @media queries) and consumed literally in responsive.css. * * Breakpoints: sm 40em(640px) · md 48em(768px) · lg 64em(1024px) * xl 80em(1280px) · xxl 96em(1536px) */ :root { /* Color */ --color-ink: #12141c; --color-ink-soft: #4b4f5b; --color-muted: #6b7280; --color-border: #e4e6ec; --color-surface: #ffffff; --color-surface-alt: #f6f7fb; --color-primary: #2954e5; --color-primary-dark: #1b3ab0; --color-primary-tint: #e8edfd; --color-accent: #12b5a6; --color-success: #12a150; --color-warning: #b98900; --color-danger: #d8393a; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: clamp(2rem, 1.6rem + 2vw, 2.75rem); --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing (4px base grid) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(18, 20, 28, 0.06); --shadow-md: 0 4px 12px rgba(18, 20, 28, 0.08); --shadow-lg: 0 12px 32px rgba(18, 20, 28, 0.12); /* Layout */ --container-max: 90rem; --container-padding: clamp(1.25rem, 4vw, 3rem); --header-height: 4.5rem; /* Content width scale — mirrors theme.json settings.layout (contentSize / wideSize) for use in classic PHP templates. */ --content-max: 48rem; --wide-max: 90rem; /* Motion */ --transition-fast: 150ms ease; --transition-base: 220ms ease; } /* * Dark mode: token overrides only, applied via [data-theme="dark"] on * (see the no-flash inline script in header.php and the toggle in * assets/js/theme.js). Every component is already built on these custom * properties, so redefining them here is enough to re-theme the whole site * without touching component/layout CSS. */ :root[data-theme="dark"] { --color-ink: #f1f2f6; --color-ink-soft: #c2c5d1; --color-muted: #9a9fb0; --color-border: #2c2f3d; --color-surface: #14151d; --color-surface-alt: #1b1d29; --color-primary-tint: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); }