/** * Design System Tokens * * Three-tier token architecture: * 1. Primitive Tokens (Neutral scales, raw sizes, transitions, z-index) * 2. Semantic Tokens (Role-based variables, Elementor Site Settings bridge) * 3. Component Tokens (Reusable component defaults) * * @package ATheme\Theme * @since 1.0.0 */ :root { /* ========================================================================== 1. PRIMITIVE TOKENS (Brand-Neutral Foundation) ========================================================================== */ /* Neutral Palette Scale (Slate / Gray) */ --color-neutral-0: #ffffff; --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a; --color-neutral-950: #020617; /* Spacing Scale (4px Base Unit / Logical Spacing) */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Typography Primitives: Font Families */ --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-arabic: "IBM Plex Sans Arabic", "Tajawal", "Almarai", system-ui, sans-serif; --font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-family-body: var(--e-global-typography-text-font-family, var(--font-family-arabic)); --font-family-heading: var(--e-global-typography-primary-font-family, var(--font-family-arabic)); /* Typography Primitives: Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Typography Primitives: Line Heights */ --line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 1.75; /* Typography Primitives: Fluid Size Scale (clamp: 320px viewport to 1280px+ desktop) */ --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12px - 13px */ --font-size-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); /* 14px - 15px */ --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 16px - 17px */ --font-size-md: clamp(1.125rem, 1.06rem + 0.33vw, 1.25rem); /* 18px - 20px */ --font-size-lg: clamp(1.25rem, 1.16rem + 0.45vw, 1.4375rem); /* 20px - 23px */ --font-size-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24px - 30px */ --font-size-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.375rem); /* 28px - 38px */ --font-size-3xl: clamp(2.125rem, 1.75rem + 1.88vw, 3rem); /* 34px - 48px */ --font-size-hero: clamp(2.5rem, 1.95rem + 2.75vw, 3.875rem); /* 40px - 62px */ /* Radii Scale */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 9999px; /* Elevation & Shadow Scale */ --shadow-none: none; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04); /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* Z-Index Layers */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-toast: 600; /* Container Max-Widths */ --container-narrow: 768px; --container-default: 1140px; --container-wide: 1320px; --container-full: 100%; /* ========================================================================== 2. SEMANTIC TOKENS (Role-Based Tokens & Elementor Bridge) ========================================================================== */ /* Brand & Role Colors (Fallback to neutrals if Elementor variables are absent) */ --color-primary: var(--e-global-color-primary, #0f172a); --color-primary-hover: #334155; --color-secondary: var(--e-global-color-secondary, #1e293b); --color-accent: var(--e-global-color-accent, #475569); /* Canvas & Surface Colors */ --color-bg: #ffffff; --color-surface: #f1f5f9; --color-surface-elevated: #e2e8f0; --color-surface-subtle: #f8fafc; /* Borders */ --color-border: #e2e8f0; --color-border-subtle: #f1f5f9; --color-border-strong: #cbd5e1; /* Typography Colors */ --color-text: var(--e-global-color-text, #1e293b); /* Deliberately not bridged to --e-global-color-primary: heading text must not follow the brand colour, or a brand colour chosen for graphics would decide the legibility of every heading. Override this token to restyle headings. */ --color-text-heading: #0f172a; /* Every use of this token is text, and text needs 4.5:1 on whatever surface it lands on. The previous #64748b was chosen against the white canvas alone, at a narrow 4.76:1, and then used on --color-surface as well, where it measured 4.34:1 and failed. One value that clears every surface the theme paints is the fix; per-use exceptions are not, because none of these uses is exempt. */ --color-text-muted: var(--color-neutral-600); --color-text-inverse: #ffffff; /* Status & Feedback Colors */ --color-success: #15803d; --color-success-bg: #f0fdf4; --color-success-border: #bbf7d0; --color-warning: #b45309; --color-warning-bg: #fffbeb; --color-warning-border: #fde68a; --color-danger: #b91c1c; --color-danger-bg: #fef2f2; --color-danger-border: #fecaca; --color-info: #0369a1; --color-info-bg: #f0f9ff; --color-info-border: #bae6fd; /* Focus Rings (Accessibility) */ --color-focus-ring: var(--color-primary); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ========================================================================== 3. COMPONENT TOKENS (Component Level Scopes) ========================================================================== */ /* Buttons */ --btn-height: 2.75rem; /* 44px for WCAG touch compliance */ --btn-padding-inline: var(--space-5); --btn-radius: var(--radius-md); --btn-font-size: var(--font-size-sm); --btn-font-weight: var(--font-weight-medium); /* Form Controls / Inputs */ --input-height: 2.75rem; --input-padding-inline: var(--space-4); --input-radius: var(--radius-md); /* Decoupled from --color-border on purpose. A form field carries no text of its own, so its border is the only evidence that the field is there, which puts it under WCAG 1.4.11 (3:1 for non-text UI). The decorative borders that --color-border draws elsewhere have no such requirement and stay light. */ --input-border-color: var(--color-neutral-500); --input-bg: var(--color-surface); /* Cards */ --card-padding: var(--space-6); --card-radius: var(--radius-lg); --card-bg: var(--color-surface); --card-border: var(--color-border); --card-shadow: var(--shadow-sm); /* Header & Navigation Fallback */ --header-height: 4.5rem; --header-bg: var(--color-surface); --header-border: var(--color-border-subtle); /* Footer Fallback */ --footer-bg: var(--color-neutral-900); --footer-text: var(--color-neutral-300); --footer-border: var(--color-neutral-800); }