/** * Dhyan Demo — Design System tokens * * Single source of truth for brand colors, typography, radius, shadows, * containers, spacing, motion, z-index, borders, buttons, and links. * Prefer these variables over hardcoded values in theme CSS. * * Mirrors the canonical token set in dhyan-site-theme so the demo subdomains * render with the same brand identity. Palette hex values must stay in sync * with theme.json (WordPress presets). * Brand: docs/BRANDING.md §4. Primary #0F8F8F, primary-dark #0B7474, accent #0A6F86 * (Deep Teal; replaced indigo #4F46E5 on 2026-10-08, Task 3). Text and button fills * use primary-dark (white on it is 5.5:1; on primary only 3.9:1). Dark surfaces use * Deep Ink #0B2326. * Primary-soft #EBF7F7 is a derived tint of primary. * * Every --dhyan-color-* has a matching --dhyan-color-*-rgb channel token for * Tailwind opacity utilities: rgb(var(--dhyan-color-*-rgb) / ). */ :root { /* ------------------------------------------------------------------------- Color — alias WP presets where available; RGB channels for opacity ------------------------------------------------------------------------- */ --dhyan-color-primary: var(--wp--preset--color--primary, #0f8f8f); --dhyan-color-primary-dark: var(--wp--preset--color--primary-dark, #0b7474); --dhyan-color-primary-soft: var(--wp--preset--color--primary-soft, #ebf7f7); --dhyan-color-accent: #0a6f86; --dhyan-color-foreground: var(--wp--preset--color--foreground, #0f172a); --dhyan-color-body: var(--wp--preset--color--body, #334155); --dhyan-color-muted: var(--wp--preset--color--muted, #64748b); --dhyan-color-background: var(--wp--preset--color--background, #ffffff); --dhyan-color-surface: var(--wp--preset--color--surface, #f8fafc); --dhyan-color-border: var(--wp--preset--color--border, #e2e8f0); --dhyan-color-footer: var(--wp--preset--color--footer, #0b2326); /* Deep Ink */ --dhyan-color-ink: #0b2326; /* Deep Ink — dark surfaces */ --dhyan-color-ink-accent: #4fd6ca; /* Teal on dark */ --dhyan-color-footer-muted: var(--wp--preset--color--footer-muted, #94a3b8); --dhyan-color-footer-border: var(--wp--preset--color--footer-border, #334155); --dhyan-color-success: var(--wp--preset--color--success, #10b981); --dhyan-color-warning: var(--wp--preset--color--warning, #f59e0b); --dhyan-color-danger: #ef4444; --dhyan-color-midnight: #0b2326; /* Deep Ink: the footer gradient end is flat ink */ --dhyan-color-primary-rgb: 15 143 143; --dhyan-color-primary-dark-rgb: 11 116 116; --dhyan-color-primary-soft-rgb: 235 247 247; --dhyan-color-accent-rgb: 10 111 134; --dhyan-color-foreground-rgb: 15 23 42; --dhyan-color-body-rgb: 51 65 85; --dhyan-color-muted-rgb: 100 116 139; --dhyan-color-background-rgb: 255 255 255; --dhyan-color-surface-rgb: 248 250 252; --dhyan-color-border-rgb: 226 232 240; --dhyan-color-footer-rgb: 11 35 38; --dhyan-color-ink-rgb: 11 35 38; --dhyan-color-ink-accent-rgb: 79 214 202; --dhyan-color-footer-muted-rgb: 165 180 199; --dhyan-color-footer-border-rgb: 71 85 105; --dhyan-color-success-rgb: 16 185 129; --dhyan-color-warning-rgb: 245 158 11; --dhyan-color-danger-rgb: 239 68 68; --dhyan-color-midnight-rgb: 11 35 38; /* ------------------------------------------------------------------------- Typography — moved to assets/css/typography.css (the single source of truth for fonts, semantic tokens, scale, and OpenType features). typography.css must be enqueued alongside this file; see inc/typography.php. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- Border width + radius ------------------------------------------------------------------------- */ --dhyan-border-width: 1px; --dhyan-border-width-md: 1.5px; --dhyan-border-width-lg: 2px; --dhyan-radius-sm: 0.5rem; /* 8px — buttons, inputs */ --dhyan-radius-md: 0.625rem; /* 10px — form controls */ --dhyan-radius-lg: 0.75rem; /* 12px — cards */ --dhyan-radius-xl: 1rem; /* 16px */ --dhyan-radius-2xl: 1.5rem; /* 24px */ --dhyan-radius-pill: 9999px; /* ------------------------------------------------------------------------- Shadows ------------------------------------------------------------------------- */ --dhyan-shadow-xs: 0 1px 2px rgb(var(--dhyan-color-foreground-rgb) / 0.04); --dhyan-shadow-sm: 0 1px 3px 0 rgb(var(--dhyan-color-foreground-rgb) / 0.06), 0 2px 8px -2px rgb(var(--dhyan-color-foreground-rgb) / 0.08); --dhyan-shadow-card: 0 1px 3px 0 rgb(var(--dhyan-color-foreground-rgb) / 0.08), 0 4px 16px -4px rgb(var(--dhyan-color-foreground-rgb) / 0.08); --dhyan-shadow-card-hover: 0 12px 32px -12px rgb(var(--dhyan-color-foreground-rgb) / 0.18); /* ~0.72 opacity keeps a 3px ring ≥ ~3:1 against white (WCAG 1.4.11) */ --dhyan-shadow-focus: 0 0 0 3px rgb(var(--dhyan-color-accent-rgb) / 0.72); --dhyan-shadow-focus-primary: 0 0 0 3px rgb(var(--dhyan-color-primary-rgb) / 0.72); --dhyan-shadow-accent-sm: 0 1px 2px rgb(var(--dhyan-color-accent-rgb) / 0.08); --dhyan-shadow-accent-md: 0 8px 20px -12px rgb(var(--dhyan-color-accent-rgb) / 0.28); --dhyan-shadow-accent-lg: 0 10px 28px -8px rgb(var(--dhyan-color-accent-rgb) / 0.5); /* ------------------------------------------------------------------------- Container / chrome widths ------------------------------------------------------------------------- */ --dhyan-width-content: var(--wp--style--global--content-size, 720px); --dhyan-width-wide: var(--wp--style--global--wide-size, 1200px); --dhyan-width-prose: 42rem; --dhyan-width-drawer: min(420px, calc(100vw - 1rem)); --dhyan-width-drawer-fixed: 420px; /* ------------------------------------------------------------------------- Header / footer chrome ------------------------------------------------------------------------- */ --dhyan-header-height: 4.25rem; --dhyan-header-height-lg: 4.5rem; --dhyan-logo-max-width: 14rem; --dhyan-logo-max-width-sm: 11rem; /* ------------------------------------------------------------------------- Spacing — alias WP spacing sizes + common rem steps ------------------------------------------------------------------------- */ --dhyan-space-1: 0.25rem; --dhyan-space-1-5: 0.375rem; --dhyan-space-2: 0.5rem; --dhyan-space-2-5: 0.625rem; --dhyan-space-3: 0.75rem; --dhyan-space-3-5: 0.875rem; --dhyan-space-4: 1rem; --dhyan-space-5: 1.25rem; --dhyan-space-6: 1.5rem; --dhyan-space-7: 1.75rem; --dhyan-space-8: 2rem; --dhyan-space-10: 2.5rem; --dhyan-space-12: 3rem; --dhyan-space-20: var(--wp--preset--spacing--20, 0.5rem); --dhyan-space-30: var(--wp--preset--spacing--30, 1rem); --dhyan-space-40: var(--wp--preset--spacing--40, 1.5rem); --dhyan-space-50: var(--wp--preset--spacing--50, 2rem); --dhyan-space-60: var(--wp--preset--spacing--60, 3rem); --dhyan-space-70: var(--wp--preset--spacing--70, 5rem); /* ------------------------------------------------------------------------- Semantic vertical rhythm — long-form typography (blog, docs, legal, KB) Aliases of --dhyan-space-* only. Do not invent new rem steps here. Parent prose containers own spacing BETWEEN blocks; components own INTERNAL padding/gaps only (no duplicate outer my-*). ------------------------------------------------------------------------- */ --dhyan-rhythm-tight: var(--dhyan-space-2); --dhyan-rhythm-within: var(--dhyan-space-5); --dhyan-rhythm-stack: var(--dhyan-space-6); --dhyan-rhythm-cross: var(--dhyan-space-8); --dhyan-rhythm-media: var(--dhyan-space-10); --dhyan-rhythm-break: var(--dhyan-space-12); --dhyan-rhythm-section: var(--dhyan-space-12); --dhyan-rhythm-page: var(--dhyan-space-10); /* ------------------------------------------------------------------------- Motion — durations, easings, named animation lengths ------------------------------------------------------------------------- */ --dhyan-duration-instant: 0.01ms; --dhyan-duration-fast: 0.15s; --dhyan-duration-normal: 0.2s; --dhyan-duration-moderate: 0.25s; --dhyan-duration-slow: 0.3s; --dhyan-duration-slower: 0.35s; --dhyan-duration-enter: 0.45s; --dhyan-duration-emphasis: 0.65s; --dhyan-ease-standard: ease; --dhyan-ease-out: ease-out; --dhyan-ease-in-out: ease-in-out; --dhyan-ease-linear: linear; --dhyan-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1); --dhyan-ease-panel: cubic-bezier(0.4, 0, 0.2, 1); --dhyan-anim-float: 6s; --dhyan-anim-pulse: 2.8s; --dhyan-anim-ticker: 32s; /* ------------------------------------------------------------------------- Z-index layers ------------------------------------------------------------------------- */ --dhyan-z-base: 1; --dhyan-z-raised: 2; --dhyan-z-dropdown: 5; --dhyan-z-sticky: 40; --dhyan-z-header: 40; --dhyan-z-overlay: 9999; --dhyan-z-modal: 100000; /* ------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ --dhyan-btn-radius: var(--dhyan-radius-md); --dhyan-btn-font-size: var(--dhyan-text-medium); --dhyan-btn-font-weight: var(--dhyan-font-weight-semibold); --dhyan-btn-bg: var(--dhyan-color-primary-dark); --dhyan-btn-bg-hover: var(--dhyan-color-accent); --dhyan-btn-fg: var(--dhyan-color-background); /* ------------------------------------------------------------------------- Links ------------------------------------------------------------------------- */ --dhyan-link-color: var(--dhyan-color-primary-dark); --dhyan-link-color-hover: var(--dhyan-color-accent); }