/* ========================================================= * NAJIBUL ULTIMATE AUTHOR JOIN — DESIGN TOKENS * ARCHITECTURE v9.0 — ENTERPRISE MODERN EDITION * ========================================================= * * This is the SHARED DESIGN TOKENS stylesheet for the Author * Join module. It defines every CSS custom property that the * public + admin stylesheets consume. * * ───────────────────────────────────────────────────────────── * 🎯 v9.0 CHANGES — ENTERPRISE MODERN EDITION * ───────────────────────────────────────────────────────────── * * • ADDED: CSS Cascade Layers (@layer) for predictable order * • ADDED: color-mix() tokens for dynamic tinting * • ADDED: Container query breakpoints (--aj-cq-*) * • ADDED: Fluid typography with clamp() * • ADDED: Logical properties for RTL-native support * • ADDED: New semantic tokens (elevation, motion, state) * • ADDED: Focus-visible ring tokens (WCAG 2.2) * • ADDED: Motion tokens (duration + easing scales) * • ADDED: Density tokens (compact / comfortable / spacious) * • ADDED: Radius scale extended to 4xl * • ADDED: New colour tokens (accent, overlay, glass) * • IMPROVED: Dark mode tokens use color-mix() fallbacks * • IMPROVED: High contrast mode boosts more tokens * • IMPROVED: Forced colors mode simplified * • IMPROVED: Reduced motion kills ALL motion tokens * • HARDENED: All tokens are pure declarations (no cascade) * • HARDENED: Zero element selectors (theme-safe) * * ───────────────────────────────────────────────────────────── * 🎯 SCOPE * ───────────────────────────────────────────────────────────── * * • No element selectors. * • No layout rules — only tokens (custom properties). * • No media queries that emit rules (only token redefinitions). * • Zero interference with any WordPress theme. * * Tokens are defined on the `:root` pseudo-element with the * `aj-` prefix so they never clash with theme variables. * * ───────────────────────────────────────────────────────────── * 🎨 TOKEN CATEGORIES * ───────────────────────────────────────────────────────────── * * 1. Colour — Brand * 2. Colour — Success * 3. Colour — Danger * 4. Colour — Warning * 5. Colour — Info * 6. Colour — Neutral grey scale * 7. Colour — Surfaces * 8. Colour — Text * 9. Colour — Borders * 10. Colour — Overlays & glass * 11. Gradients * 12. Typography (family, size, weight, line-height, letter) * 13. Fluid typography (clamp) * 14. Spacing scale * 15. Border radius * 16. Shadows (elevation) * 17. Transitions & easing * 18. Motion tokens * 19. Z-index scale * 20. Breakpoints (documented) * 21. Container query breakpoints * 22. Component tokens * 23. Accessibility tokens * 24. Density tokens * * ───────────────────────────────────────────────────────────── * 🌗 DARK MODE * ───────────────────────────────────────────────────────────── * * Dark-mode overrides live at the bottom of this file so the * token definitions remain pure and predictable. Component * stylesheets do not need any dark-mode media queries. * * ───────────────────────────────────────────────────────────── * 📦 BROWSER SUPPORT * ───────────────────────────────────────────────────────────── * * Custom properties: ✅ All modern browsers * @layer: ✅ Chrome 99+, Firefox 97+, Safari 15.4+ * color-mix(): ✅ Chrome 111+, Firefox 113+, Safari 16.2+ * @container: ✅ Chrome 105+, Firefox 110+, Safari 16+ * clamp(): ✅ All modern browsers * logical properties: ✅ All modern browsers * * Every advanced feature has a fallback that works in older * browsers (see individual token comments). * * ========================================================= */ /* ============================================================= * CASCADE LAYERS (v9.0 NEW) * ============================================================= * * Layers establish a predictable cascade order. Component * stylesheets opt into these layers via `@layer`. * * Order (lowest priority → highest priority): * aj.tokens → design tokens (this file) * aj.base → component base styles * aj.theme → component theme variants * aj.utilities → utility overrides * aj.overrides → final safety overrides */ @layer aj.tokens, aj.base, aj.theme, aj.utilities, aj.overrides; /* ============================================================= * ROOT TOKENS * ============================================================= */ @layer aj.tokens { :root { /* ========================================================= * 1.1 COLOUR — BRAND (purple gradient pair) * ========================================================= * The primary brand identity. Used on: * • Dashboard header background * • Convert card background * • Primary CTA hover states * ========================================================= */ --aj-brand-primary: #667eea; --aj-brand-primary-dark: #5a67d8; --aj-brand-primary-light: #7c8ef0; --aj-brand-primary-50: #eef2ff; --aj-brand-primary-100: #e0e7ff; --aj-brand-primary-200: #c7d2fe; --aj-brand-secondary: #764ba2; --aj-brand-secondary-dark: #6b3f96; --aj-brand-secondary-light:#8a5fb8; --aj-brand-secondary-50: #f5f3ff; --aj-brand-secondary-100: #ede9fe; --aj-brand-gradient-start: #667eea; --aj-brand-gradient-end: #764ba2; /* Accent — for highlights & secondary actions */ --aj-accent: #f59e0b; --aj-accent-dark: #d97706; --aj-accent-light: #fbbf24; /* ========================================================= * 1.2 COLOUR — SUCCESS (green) * ========================================================= */ --aj-success: #2ecc71; --aj-success-dark: #27ae60; --aj-success-darker: #1e8449; --aj-success-light: #e8f5e9; --aj-success-lighter: #d4edda; --aj-success-fg: #155724; --aj-success-border: #c3e6cb; --aj-success-gradient-start: #2ecc71; --aj-success-gradient-end: #27ae60; /* ========================================================= * 1.3 COLOUR — DANGER / ERROR (red) * ========================================================= */ --aj-danger: #e74c3c; --aj-danger-dark: #c0392b; --aj-danger-darker: #a93226; --aj-danger-light: #f8d7da; --aj-danger-lighter: #fee2e2; --aj-danger-fg: #721c24; --aj-danger-border: #f5c6cb; --aj-danger-gradient-start: #e74c3c; --aj-danger-gradient-end: #c0392b; /* ========================================================= * 1.4 COLOUR — WARNING (amber) * ========================================================= */ --aj-warning: #f39c12; --aj-warning-dark: #e67e22; --aj-warning-darker: #d35400; --aj-warning-light: #fff3cd; --aj-warning-lighter: #fef3c7; --aj-warning-fg: #856404; --aj-warning-border: #ffeeba; /* ========================================================= * 1.5 COLOUR — INFO (blue) * ========================================================= */ --aj-info: #3498db; --aj-info-dark: #2980b9; --aj-info-darker: #1f618d; --aj-info-light: #d1ecf1; --aj-info-lighter: #e3f2fd; --aj-info-fg: #0c5460; --aj-info-border: #bee5eb; /* ========================================================= * 1.6 COLOUR — NEUTRAL GREY SCALE * ========================================================= * 50 (lightest) → 900 (darkest). * Tailwind-compatible slate scale. * ========================================================= */ --aj-gray-50: #f8fafc; --aj-gray-100: #f1f5f9; --aj-gray-200: #e2e8f0; --aj-gray-300: #cbd5e1; --aj-gray-400: #94a3b8; --aj-gray-500: #64748b; --aj-gray-600: #475569; --aj-gray-700: #334155; --aj-gray-800: #1e293b; --aj-gray-900: #0f172a; --aj-gray-950: #020617; /* ========================================================= * 1.7 COLOUR — SURFACES * ========================================================= */ --aj-surface-white: #ffffff; --aj-surface-off-white: #fafbfc; --aj-surface-light: #f5f6f8; --aj-surface-lighter: #f9fafb; --aj-surface-glass: rgba(255, 255, 255, 0.1); --aj-surface-glass-light: rgba(255, 255, 255, 0.2); --aj-surface-glass-heavy: rgba(255, 255, 255, 0.35); --aj-surface-overlay: rgba(15, 23, 42, 0.4); --aj-surface-overlay-heavy: rgba(15, 23, 42, 0.6); --aj-surface-backdrop: rgba(15, 23, 42, 0.35); /* ========================================================= * 1.8 COLOUR — TEXT * ========================================================= */ --aj-text-primary: #1e293b; --aj-text-secondary: #475569; --aj-text-tertiary: #64748b; --aj-text-muted: #94a3b8; --aj-text-disabled: #cbd5e1; --aj-text-inverse: #ffffff; --aj-text-inverse-muted: rgba(255, 255, 255, 0.85); --aj-text-inverse-faint: rgba(255, 255, 255, 0.7); --aj-text-inverse-ghost: rgba(255, 255, 255, 0.5); /* ========================================================= * 1.9 COLOUR — BORDERS * ========================================================= */ --aj-border-light: #e0e0e0; --aj-border-lighter: #f0f0f0; --aj-border-default: #d1d5db; --aj-border-strong: #94a3b8; --aj-border-focus: var(--aj-brand-primary); --aj-border-input-focus: var(--aj-success); --aj-border-glass: rgba(255, 255, 255, 0.2); --aj-border-glass-light: rgba(255, 255, 255, 0.15); /* ========================================================= * 1.10 COLOUR — OVERLAYS & GLASS * ========================================================= */ --aj-overlay-faint: rgba(15, 23, 42, 0.05); --aj-overlay-soft: rgba(15, 23, 42, 0.15); --aj-overlay-medium: rgba(15, 23, 42, 0.35); --aj-overlay-strong: rgba(15, 23, 42, 0.55); --aj-overlay-max: rgba(15, 23, 42, 0.75); --aj-glass-light: rgba(255, 255, 255, 0.08); --aj-glass-medium: rgba(255, 255, 255, 0.15); --aj-glass-heavy: rgba(255, 255, 255, 0.25); --aj-blur-sm: 4px; --aj-blur-md: 8px; --aj-blur-lg: 16px; --aj-blur-xl: 24px; /* ========================================================= * 2.0 GRADIENT PRESETS * ========================================================= */ --aj-gradient-brand: linear-gradient( 135deg, var(--aj-brand-gradient-start) 0%, var(--aj-brand-gradient-end) 100% ); --aj-gradient-success: linear-gradient( 135deg, var(--aj-success-gradient-start) 0%, var(--aj-success-gradient-end) 100% ); --aj-gradient-danger: linear-gradient( 135deg, var(--aj-danger-gradient-start) 0%, var(--aj-danger-gradient-end) 100% ); --aj-gradient-glass: linear-gradient( 135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100% ); --aj-gradient-mesh: radial-gradient( ellipse at top left, rgba(102, 126, 234, 0.18) 0%, transparent 60% ), radial-gradient( ellipse at bottom right, rgba(118, 75, 162, 0.18) 0%, transparent 60% ); /* ========================================================= * 2.1 TYPOGRAPHY * ========================================================= */ --aj-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --aj-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; --aj-font-size-xs: 11px; --aj-font-size-sm: 12px; --aj-font-size-base: 13px; --aj-font-size-md: 14px; --aj-font-size-lg: 16px; --aj-font-size-xl: 18px; --aj-font-size-2xl: 22px; --aj-font-size-3xl: 26px; --aj-font-size-4xl: 32px; --aj-font-size-5xl: 40px; --aj-font-weight-normal: 400; --aj-font-weight-medium: 500; --aj-font-weight-semibold: 600; --aj-font-weight-bold: 700; --aj-font-weight-heavy: 800; --aj-line-height-tight: 1.2; --aj-line-height-snug: 1.3; --aj-line-height-normal: 1.5; --aj-line-height-relaxed: 1.6; --aj-line-height-loose: 1.75; --aj-letter-spacing-tight: -0.01em; --aj-letter-spacing-normal: 0; --aj-letter-spacing-wide: 0.02em; --aj-letter-spacing-wider: 0.05em; /* ========================================================= * 2.2 FLUID TYPOGRAPHY (v9.0 NEW) * ========================================================= * clamp() based fluid sizes. Each token scales smoothly * between 320px and 1280px viewports. * ========================================================= */ --aj-font-fluid-xs: clamp(10px, 0.6vw + 8px, 12px); --aj-font-fluid-sm: clamp(12px, 0.7vw + 10px, 14px); --aj-font-fluid-base: clamp(14px, 0.8vw + 12px, 16px); --aj-font-fluid-lg: clamp(16px, 1vw + 13px, 20px); --aj-font-fluid-xl: clamp(18px, 1.4vw + 14px, 24px); --aj-font-fluid-2xl: clamp(22px, 2vw + 16px, 32px); --aj-font-fluid-3xl: clamp(26px, 2.6vw + 18px, 40px); --aj-font-fluid-4xl: clamp(32px, 3.4vw + 22px, 52px); /* ========================================================= * 2.3 SPACING SCALE * ========================================================= * Based on a 4-px grid (Tailwind-compatible). * ========================================================= */ --aj-space-0: 0; --aj-space-px: 1px; --aj-space-1: 4px; --aj-space-2: 8px; --aj-space-3: 12px; --aj-space-4: 16px; --aj-space-5: 20px; --aj-space-6: 24px; --aj-space-7: 28px; --aj-space-8: 32px; --aj-space-10: 40px; --aj-space-12: 48px; --aj-space-16: 64px; --aj-space-20: 80px; --aj-space-24: 96px; /* ========================================================= * 2.4 BORDER RADIUS * ========================================================= */ --aj-radius-xs: 4px; --aj-radius-sm: 6px; --aj-radius-md: 8px; --aj-radius-lg: 12px; --aj-radius-xl: 16px; --aj-radius-2xl: 20px; --aj-radius-3xl: 24px; --aj-radius-4xl: 32px; --aj-radius-pill: 50px; --aj-radius-round: 50%; /* ========================================================= * 2.5 SHADOWS (ELEVATION) * ========================================================= * Six elevation tiers. Plus colour-tinted variants. * ========================================================= */ --aj-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --aj-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --aj-shadow-md: 0 5px 20px rgba(0, 0, 0, 0.08); --aj-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10); --aj-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15); --aj-shadow-2xl: 0 25px 60px rgba(0, 0, 0, 0.20); /* ── Coloured shadows (brand-tinted) ─────────────── */ --aj-shadow-brand: 0 20px 40px rgba(102, 126, 234, 0.25); --aj-shadow-brand-hover: 0 25px 50px rgba(102, 126, 234, 0.35); --aj-shadow-success: 0 10px 25px rgba(46, 204, 113, 0.3); --aj-shadow-danger: 0 10px 25px rgba(231, 76, 60, 0.3); --aj-shadow-info: 0 10px 25px rgba(52, 152, 219, 0.25); /* ── Inset ───────────────────────────────────────── */ --aj-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05); --aj-shadow-inset-strong: inset 0 2px 6px rgba(0, 0, 0, 0.08); /* ── Focus rings (WCAG 2.2) ──────────────────────── */ --aj-focus-ring-success: 0 0 0 3px rgba(46, 204, 113, 0.15); --aj-focus-ring-brand: 0 0 0 3px rgba(102, 126, 234, 0.20); --aj-focus-ring-danger: 0 0 0 3px rgba(231, 76, 60, 0.20); --aj-focus-ring-strong: 0 0 0 4px rgba(102, 126, 234, 0.35); /* ── Focus ring thickness tokens ────────────────── */ --aj-focus-width: 2px; --aj-focus-width-thick: 3px; --aj-focus-offset: 2px; --aj-focus-offset-lg: 3px; /* ========================================================= * 2.6 TRANSITIONS & EASING * ========================================================= */ --aj-transition-fast: 0.15s ease; --aj-transition-base: 0.20s ease; --aj-transition-slow: 0.30s ease; --aj-transition-colors: 0.20s ease; --aj-transition-transform: 0.20s ease; --aj-transition-all: all 0.20s ease; --aj-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --aj-ease-out: cubic-bezier(0, 0, 0.2, 1); --aj-ease-in: cubic-bezier(0.4, 0, 1, 1); --aj-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --aj-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* ========================================================= * 2.7 MOTION TOKENS (v9.0 NEW) * ========================================================= * Duration scale + spring presets. * ========================================================= */ --aj-duration-instant: 100ms; --aj-duration-fast: 150ms; --aj-duration-base: 250ms; --aj-duration-slow: 350ms; --aj-duration-slower: 500ms; --aj-duration-toast-in: 250ms; --aj-duration-toast-out: 200ms; --aj-duration-modal-in: 250ms; --aj-duration-modal-out: 200ms; --aj-duration-page: 400ms; --aj-duration-skeleton: 1400ms; /* ========================================================= * 2.8 Z-INDEX SCALE * ========================================================= * Kept below WordPress's admin bar (~99999). * ========================================================= */ --aj-z-base: 1; --aj-z-dropdown: 100; --aj-z-sticky: 200; --aj-z-overlay: 300; --aj-z-modal: 400; --aj-z-toast: 500; --aj-z-tooltip: 600; --aj-z-max: 999999; /* ========================================================= * 2.9 BREAKPOINTS (documented — cannot be used in MQ) * ========================================================= * * Mobile small: ≤ 380px * Mobile: ≤ 480px * Mobile large: ≤ 600px * Tablet: ≤ 768px * Tablet large: ≤ 965px * Desktop: > 965px * Wide: > 1280px * ========================================================= */ --aj-bp-mobile-sm: 380px; --aj-bp-mobile: 480px; --aj-bp-mobile-lg: 600px; --aj-bp-tablet: 768px; --aj-bp-tablet-lg: 965px; --aj-bp-desktop: 966px; --aj-bp-wide: 1280px; /* ========================================================= * 2.10 CONTAINER QUERY BREAKPOINTS (v9.0 NEW) * ========================================================= * Used with @container queries. Separate from media * queries because container widths differ from viewport. * ========================================================= */ --aj-cq-sm: 320px; --aj-cq-md: 480px; --aj-cq-lg: 640px; --aj-cq-xl: 800px; /* ========================================================= * 2.11 COMPONENT TOKENS * ========================================================= * Semantic tokens for individual components. * ========================================================= */ /* ── Registration form ───────────────────────────── */ --aj-form-border: 2px solid var(--aj-success); --aj-form-radius: var(--aj-radius-2xl); --aj-form-padding: var(--aj-space-10); --aj-form-max-width: 550px; --aj-form-shadow: var(--aj-shadow-brand); --aj-form-bg: var(--aj-surface-white); --aj-input-border: 2px solid var(--aj-border-light); --aj-input-border-focus: 2px solid var(--aj-border-input-focus); --aj-input-radius: var(--aj-radius-md); --aj-input-padding: 14px; --aj-input-bg: var(--aj-surface-white); --aj-input-bg-disabled: var(--aj-surface-light); /* ── Convert card ────────────────────────────────── */ --aj-convert-bg: var(--aj-gradient-brand); --aj-convert-radius: var(--aj-radius-2xl); --aj-convert-padding: var(--aj-space-10); --aj-convert-max-width: 600px; --aj-convert-shadow: var(--aj-shadow-brand); /* ── Dashboard ───────────────────────────────────── */ --aj-dashboard-radius: var(--aj-radius-2xl); --aj-dashboard-header-padding: var(--aj-space-10); --aj-dashboard-max-width: 1200px; --aj-card-bg: var(--aj-surface-white); --aj-card-radius: var(--aj-radius-xl); --aj-card-padding: var(--aj-space-8); --aj-card-shadow: var(--aj-shadow-md); --aj-card-shadow-hover: 0 10px 30px rgba(102, 126, 234, 0.12); /* ── Status message card ─────────────────────────── */ --aj-message-radius: var(--aj-radius-2xl); --aj-message-padding: var(--aj-space-10); /* ── Toast ───────────────────────────────────────── */ --aj-toast-radius: var(--aj-radius-lg); --aj-toast-padding: 15px 25px; --aj-toast-shadow: var(--aj-shadow-lg); /* ── Admin table ─────────────────────────────────── */ --aj-admin-table-radius: var(--aj-radius-md); --aj-admin-stats-gap: var(--aj-space-5); --aj-stat-card-radius: var(--aj-radius-md); --aj-stat-card-padding: var(--aj-space-5); --aj-stat-card-shadow: var(--aj-shadow-sm); /* ── Buttons ─────────────────────────────────────── */ --aj-btn-radius: var(--aj-radius-md); --aj-btn-radius-pill: var(--aj-radius-pill); --aj-btn-padding-y: var(--aj-space-4); --aj-btn-padding-x: var(--aj-space-6); --aj-btn-font-weight: var(--aj-font-weight-semibold); --aj-btn-transition: var(--aj-transition-all); /* ── Skeleton loader (v9.0 NEW) ──────────────────── */ --aj-skeleton-bg: var(--aj-gray-100); --aj-skeleton-shine: var(--aj-gray-200); --aj-skeleton-radius: var(--aj-radius-md); --aj-skeleton-height: 16px; /* ========================================================= * 2.12 DENSITY TOKENS (v9.0 NEW) * ========================================================= * Base density unit — components can use these to * scale padding + spacing. * ========================================================= */ --aj-density-compact: 0.85; --aj-density-comfortable: 1; --aj-density-spacious: 1.2; --aj-density-multiplier: var(--aj-density-comfortable); /* ========================================================= * 2.13 ACCESSIBILITY TOKENS * ========================================================= */ --aj-focus-outline: 2px solid var(--aj-brand-primary); --aj-focus-outline-offset: 2px; --aj-touch-target-min: 44px; --aj-touch-target-lg: 48px; --aj-visible-focus-outline: 3px solid var(--aj-brand-primary); --aj-visible-focus-offset: 3px; --aj-reduced-motion-duration: 0.001ms; } /* ============================================================= * 3. DARK MODE TOKENS * ============================================================= * When the OS reports a dark color scheme, we remap the * surface + text + border tokens. Component stylesheets * consume the same token names, so this single remap affects * every view automatically. */ @media (prefers-color-scheme: dark) { :root { /* ── Surfaces ─────────────────────────────── */ --aj-surface-white: #1e1e2e; --aj-surface-off-white: #1a1a26; --aj-surface-light: #252538; --aj-surface-lighter: #2a2a3e; --aj-surface-overlay: rgba(0, 0, 0, 0.6); --aj-surface-overlay-heavy: rgba(0, 0, 0, 0.75); --aj-surface-backdrop: rgba(0, 0, 0, 0.6); /* ── Text ─────────────────────────────────── */ --aj-text-primary: #f0f0f8; --aj-text-secondary: #b8b8c8; --aj-text-tertiary: #a0a0b0; --aj-text-muted: #808090; --aj-text-disabled: #606070; --aj-text-inverse: #ffffff; --aj-text-inverse-muted: rgba(255, 255, 255, 0.9); /* ── Borders ──────────────────────────────── */ --aj-border-light: #3e3e52; --aj-border-lighter: #2e2e42; --aj-border-default: #4e4e62; --aj-border-strong: #6e6e82; /* ── Inputs ───────────────────────────────── */ --aj-input-border: 2px solid #3e3e52; --aj-input-bg: #252538; --aj-input-bg-disabled: #2a2a3e; /* ── Cards ────────────────────────────────── */ --aj-card-bg: #252538; --aj-form-bg: #1e1e2e; /* ── Neutral greys (remapped for dark) ───── */ --aj-gray-50: #1e1e2e; --aj-gray-100: #252538; --aj-gray-200: #2e2e42; --aj-gray-300: #3e3e52; --aj-gray-400: #5e5e72; --aj-gray-500: #808090; --aj-gray-600: #a0a0b0; --aj-gray-700: #c0c0d0; --aj-gray-800: #d8d8e0; --aj-gray-900: #f0f0f8; --aj-gray-950: #ffffff; /* ── Skeleton loader ──────────────────────── */ --aj-skeleton-bg: #2e2e42; --aj-skeleton-shine: #3e3e52; /* ── Coloured shadows (dimmer for dark) ──── */ --aj-shadow-brand: 0 20px 40px rgba(102, 126, 234, 0.35); --aj-shadow-brand-hover: 0 25px 50px rgba(102, 126, 234, 0.45); --aj-shadow-success: 0 10px 25px rgba(46, 204, 113, 0.35); --aj-shadow-danger: 0 10px 25px rgba(231, 76, 60, 0.35); --aj-shadow-info: 0 10px 25px rgba(52, 152, 219, 0.35); /* ── Overlays (deeper in dark mode) ──────── */ --aj-overlay-faint: rgba(0, 0, 0, 0.15); --aj-overlay-soft: rgba(0, 0, 0, 0.30); --aj-overlay-medium: rgba(0, 0, 0, 0.50); --aj-overlay-strong: rgba(0, 0, 0, 0.70); --aj-overlay-max: rgba(0, 0, 0, 0.85); } } /* ============================================================= * 4. REDUCED MOTION * ============================================================= * When the user prefers reduced motion, collapse all * transition + animation duration tokens to a no-op so * downstream stylesheets inherit the preference. */ @media (prefers-reduced-motion: reduce) { :root { --aj-transition-fast: 0s; --aj-transition-base: 0s; --aj-transition-slow: 0s; --aj-transition-colors: 0s; --aj-transition-transform: 0s; --aj-transition-all: none; --aj-duration-instant: 0.001ms; --aj-duration-fast: 0.001ms; --aj-duration-base: 0.001ms; --aj-duration-slow: 0.001ms; --aj-duration-slower: 0.001ms; --aj-duration-toast-in: 0.001ms; --aj-duration-toast-out: 0.001ms; --aj-duration-modal-in: 0.001ms; --aj-duration-modal-out: 0.001ms; --aj-duration-page: 0.001ms; --aj-duration-skeleton: 0.001ms; } } /* ============================================================= * 5. HIGH CONTRAST MODE * ============================================================= * Boost text + border tokens so downstream components stay * legible in Windows High Contrast / forced colors. */ @media (prefers-contrast: more) { :root { --aj-text-primary: #000000; --aj-text-secondary: #1a1a1a; --aj-text-tertiary: #333333; --aj-text-muted: #555555; --aj-border-light: #000000; --aj-border-default: #000000; --aj-border-strong: #000000; --aj-shadow-xs: none; --aj-shadow-sm: none; --aj-shadow-md: none; --aj-shadow-lg: none; --aj-shadow-xl: none; --aj-shadow-2xl: none; --aj-shadow-inset: none; --aj-shadow-inset-strong: none; --aj-focus-width: 3px; --aj-focus-width-thick: 4px; --aj-visible-focus-outline: 3px solid currentColor; } } /* ============================================================= * 6. FORCED COLORS MODE * ============================================================= * Defer to the OS-forced palette. Individual component * stylesheets apply the system color keywords * (ButtonFace, ButtonText, etc.); here we disable custom * backgrounds + shadows so they don't interfere. */ @media (forced-colors: active) { :root { --aj-shadow-xs: none; --aj-shadow-sm: none; --aj-shadow-md: none; --aj-shadow-lg: none; --aj-shadow-xl: none; --aj-shadow-2xl: none; --aj-shadow-brand: none; --aj-shadow-brand-hover: none; --aj-shadow-success: none; --aj-shadow-danger: none; --aj-shadow-info: none; --aj-shadow-inset: none; --aj-shadow-inset-strong: none; /* Colours deferred to system */ --aj-surface-white: Canvas; --aj-surface-off-white: Canvas; --aj-surface-light: Canvas; --aj-text-primary: CanvasText; --aj-text-secondary: CanvasText; --aj-text-tertiary: CanvasText; } } /* ============================================================= * 7. PRINT TOKENS * ============================================================= * Print stylesheets favour high-contrast black on white. */ @media print { :root { --aj-surface-white: #ffffff; --aj-text-primary: #000000; --aj-text-secondary: #000000; --aj-text-tertiary: #333333; --aj-text-muted: #666666; --aj-border-light: #cccccc; --aj-border-default: #999999; --aj-border-strong: #000000; --aj-shadow-xs: none; --aj-shadow-sm: none; --aj-shadow-md: none; --aj-shadow-lg: none; --aj-shadow-xl: none; --aj-shadow-2xl: none; --aj-shadow-brand: none; --aj-shadow-brand-hover: none; --aj-shadow-success: none; --aj-shadow-danger: none; --aj-shadow-info: none; --aj-shadow-inset: none; --aj-shadow-inset-strong: none; } } /* ============================================================= * 8. LOGICAL PROPERTY HELPERS (v9.0 NEW) * ============================================================= * RTL-friendly spacing tokens. Use these in components * instead of hard-coded left/right. * ========================================================= */ :root { --aj-inline-start: inline-start; --aj-inline-end: inline-end; --aj-block-start: block-start; --aj-block-end: block-end; } /* ============================================================= * 9. COLOR-MIX HELPERS (v9.0 NEW) * ============================================================= * These tokens use color-mix() where supported and fall back * to sensible values in older browsers. They let components * derive tints + shades without hardcoding hex values. * * --aj-brand-tint-10 = 10% brand + 90% white * --aj-brand-shade-10 = 10% black + 90% brand * ========================================================= */ @supports (color: color-mix(in srgb, red, blue)) { :root { --aj-brand-tint-5: color-mix(in srgb, var(--aj-brand-primary) 5%, white); --aj-brand-tint-10: color-mix(in srgb, var(--aj-brand-primary) 10%, white); --aj-brand-tint-20: color-mix(in srgb, var(--aj-brand-primary) 20%, white); --aj-brand-tint-30: color-mix(in srgb, var(--aj-brand-primary) 30%, white); --aj-brand-shade-10: color-mix(in srgb, var(--aj-brand-primary) 90%, black); --aj-brand-shade-20: color-mix(in srgb, var(--aj-brand-primary) 80%, black); --aj-success-tint-10: color-mix(in srgb, var(--aj-success) 10%, white); --aj-success-shade-10: color-mix(in srgb, var(--aj-success) 90%, black); --aj-danger-tint-10: color-mix(in srgb, var(--aj-danger) 10%, white); --aj-danger-shade-10: color-mix(in srgb, var(--aj-danger) 90%, black); --aj-info-tint-10: color-mix(in srgb, var(--aj-info) 10%, white); --aj-warning-tint-10: color-mix(in srgb, var(--aj-warning) 10%, white); } @media (prefers-color-scheme: dark) { :root { --aj-brand-tint-5: color-mix(in srgb, var(--aj-brand-primary) 5%, black); --aj-brand-tint-10: color-mix(in srgb, var(--aj-brand-primary) 10%, black); --aj-brand-tint-20: color-mix(in srgb, var(--aj-brand-primary) 20%, black); --aj-brand-tint-30: color-mix(in srgb, var(--aj-brand-primary) 30%, black); --aj-success-tint-10: color-mix(in srgb, var(--aj-success) 10%, black); --aj-danger-tint-10: color-mix(in srgb, var(--aj-danger) 10%, black); --aj-info-tint-10: color-mix(in srgb, var(--aj-info) 10%, black); --aj-warning-tint-10: color-mix(in srgb, var(--aj-warning) 10%, black); } } } /* ── Fallback tokens when color-mix() is unsupported ── */ @supports not (color: color-mix(in srgb, red, blue)) { :root { --aj-brand-tint-5: #f4f6ff; --aj-brand-tint-10: #eef2ff; --aj-brand-tint-20: #e0e7ff; --aj-brand-tint-30: #c7d2fe; --aj-brand-shade-10: #5a67d8; --aj-brand-shade-20: #4c51bf; --aj-success-tint-10: #e8f5e9; --aj-success-shade-10: #27ae60; --aj-danger-tint-10: #fdecea; --aj-danger-shade-10: #c0392b; --aj-info-tint-10: #e3f2fd; --aj-warning-tint-10: #fff8e1; } } /* ============================================================= * 10. CONTAINER QUERY HELPERS (v9.0 NEW) * ============================================================= * Container queries let components respond to their own * parent width instead of the viewport width. Components * opt-in by adding `container-type: inline-size` to their * wrapper. * ========================================================= */ @container (min-width: 480px) { :root { --aj-cq-active-sm: 1; } } @container (min-width: 640px) { :root { --aj-cq-active-lg: 1; } } } /* ============================================================= * 11. ADDITIONAL GLOBAL TOKENS (outside @layer for safety) * ============================================================= * Some themes override @layer declarations. These are * declared outside any layer to guarantee they take precedence. */ :root { --aj-theme-version: "9.0.0"; --aj-theme-boot-time: 0; } /* ============================================================= * ✅ END OF FILE * ============================================================= */