/** * Dhyan Software — 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. * * Palette hex values must stay in sync with theme.json (WordPress presets). * Approved brief: primary #0F8F8F, hover #0B7474 (primary-dark), accent #4F46E5. * Primary-soft #EBF7F7 is a derived tint of primary (not listed in the brief). * * 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: #4f46e5; --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, #0f172a); --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: #b45309; --dhyan-color-danger: #ef4444; --dhyan-color-midnight: #0b1220; --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: 79 70 229; --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: 15 23 42; --dhyan-color-footer-muted-rgb: 148 163 184; --dhyan-color-footer-border-rgb: 51 65 85; --dhyan-color-success-rgb: 16 185 129; --dhyan-color-warning-rgb: 180 83 9; --dhyan-color-danger-rgb: 239 68 68; --dhyan-color-midnight-rgb: 11 18 32; /* ------------------------------------------------------------------------- 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 (preserve current primary vs accent glow usage) ------------------------------------------------------------------------- */ --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; /* ≥ sm/md marketing header */ /* Logo: width-first (WP site-logo width). Height follows intrinsic ratio. */ --dhyan-logo-max-width: 14rem; /* ceiling above block width — wordmarks */ --dhyan-logo-max-width-sm: 11rem; /* compact contexts (mobile drawer, checkout) */ --dhyan-footer-gap: 0.25rem; /* marketing footer inner gap-1 */ --dhyan-footer-trust-mt: 3rem; /* mt-12 */ --dhyan-footer-trust-pt: 2.5rem; /* pt-10 */ --dhyan-footer-trust-mt-md: 3.5rem; /* md:mt-14 */ --dhyan-footer-trust-pt-md: 3rem; /* md:pt-12 */ --dhyan-footer-section-gap: 2.5rem; /* ------------------------------------------------------------------------- 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); /* 0.5rem — li gaps, nested lists, captions */ --dhyan-rhythm-within: var(--dhyan-space-5); /* 1.25rem — p→p, H2→p, list outer top */ --dhyan-rhythm-stack: var(--dhyan-space-6); /* 1.5rem — list bottom, lead bottom, code (legacy) */ --dhyan-rhythm-cross: var(--dhyan-space-8); /* 2rem — asides, quotes, callouts, tables-in-flow */ --dhyan-rhythm-media: var(--dhyan-space-10); /* 2.5rem — figures, embeds, page-band gaps */ --dhyan-rhythm-break: var(--dhyan-space-12); /* 3rem — CTA / newsletter reading break */ --dhyan-rhythm-section: var(--dhyan-space-12); /* 3rem — H2 section beat, hr (alias of break) */ --dhyan-rhythm-page: var(--dhyan-space-10); /* 2.5rem — closing / related page bands */ /* ------------------------------------------------------------------------- Motion — durations, easings, named animation lengths ------------------------------------------------------------------------- */ --dhyan-duration-instant: 0.01ms; /* reduced-motion snuff */ --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; --dhyan-anim-orbit: 56s; --dhyan-anim-blink: 1s; --dhyan-anim-shake: 0.4s; --dhyan-anim-msg-in: 0.35s; --dhyan-anim-field-in: 0.55s; /* ------------------------------------------------------------------------- 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-sm); --dhyan-btn-font-size: var(--dhyan-text-small); --dhyan-btn-font-weight: var(--dhyan-font-weight-semibold); --dhyan-btn-bg: var(--dhyan-color-primary); --dhyan-btn-bg-hover: var(--dhyan-color-primary-dark); --dhyan-btn-fg: var(--dhyan-color-background); --dhyan-btn-pad-y: 0.75rem; --dhyan-btn-pad-x: 1.25rem; --dhyan-btn-min-height: 2.75rem; /* 44px touch target */ /* ------------------------------------------------------------------------- Links ------------------------------------------------------------------------- */ --dhyan-link-color: var(--dhyan-color-primary); --dhyan-link-color-hover: var(--dhyan-color-primary-dark); /* ------------------------------------------------------------------------- Component language — Family A / B / C (blog redesign Phase 4) A = Pure content (no chrome) B = Supporting surface (tint / left accent, no resting shadow) C = Action / card surface (hairline border; shadow on hover only) ------------------------------------------------------------------------- */ --dhyan-family-b-bg: rgb(var(--dhyan-color-surface-rgb) / 0.9); --dhyan-family-b-bg-soft: rgb(var(--dhyan-color-primary-soft-rgb) / 0.55); --dhyan-family-b-radius: var(--dhyan-radius-lg); --dhyan-family-b-pad-y: var(--dhyan-space-5); --dhyan-family-b-pad-x: var(--dhyan-space-6); --dhyan-family-b-accent: var(--dhyan-border-width-lg); /* 2px left rail — use 4px via border-l-4 in CSS */ --dhyan-family-c-bg: var(--dhyan-color-background); --dhyan-family-c-bg-tint: var(--dhyan-color-surface); --dhyan-family-c-radius: var(--dhyan-radius-xl); --dhyan-family-c-pad-y: var(--dhyan-space-8); --dhyan-family-c-pad-x: var(--dhyan-space-8); --dhyan-family-c-border: var(--dhyan-border-width) solid rgb(var(--dhyan-color-border-rgb) / 1); --dhyan-family-c-shadow-hover: var(--dhyan-shadow-card-hover); /* Chips / badges — one language */ --dhyan-chip-radius: var(--dhyan-radius-pill); --dhyan-chip-pad-y: 0.25rem; --dhyan-chip-pad-x: 0.75rem; --dhyan-chip-font-size: 0.75rem; /* 12px */ --dhyan-chip-font-weight: 600; --dhyan-chip-tracking: var(--dhyan-tracking-caps); --dhyan-chip-bg: var(--dhyan-color-primary-soft); --dhyan-chip-fg: var(--dhyan-color-primary); --dhyan-chip-border: rgb(var(--dhyan-color-primary-rgb) / 0.2); /* Icons — three sizes only (vision Part 3) */ --dhyan-icon-sm: 0.875rem; /* 14px */ --dhyan-icon-md: 1rem; /* 16px */ --dhyan-icon-lg: 1.25rem; /* 20px */ --dhyan-icon-stroke: 1.75; /* Forms */ --dhyan-input-radius: var(--dhyan-radius-sm); --dhyan-input-pad-y: 0.75rem; --dhyan-input-pad-x: 1rem; --dhyan-input-border: var(--dhyan-border-width) solid var(--dhyan-color-border); --dhyan-input-bg: var(--dhyan-color-background); /* Motion contract */ --dhyan-motion-hover: var(--dhyan-duration-normal) var(--dhyan-ease-out); --dhyan-motion-focus: var(--dhyan-duration-fast) var(--dhyan-ease-standard); --dhyan-motion-enter: var(--dhyan-duration-enter) var(--dhyan-ease-emphasized); --dhyan-motion-lift: 0.125rem; /* 2px hover translate */ }