/* ============================================================================= DIAAKTICO DESIGN TOKENS ----------------------------------------------------------------------------- Single source of truth for the brand's visual language. Every color, type size, spacing step, radius, shadow, and motion timing used across the site references a token below. Phase 2 (PHP) should link this file first so every page inherits the same theme layer. DIRECTION: "Refined Dark Studio" — luxury through restraint. Near-black charcoal base, electric cyan/teal accent used sparingly, confident display type, generous whitespace, scroll-driven chapters. TYPE PAIRING Display/Body: Plus Jakarta Sans (Latin + Cyrillic) — confident geometric RTL (FA/AR/CKB): Vazirmatn — modern Arabic-script companion Japanese: Noto Sans JP · Chinese: Noto Sans SC (loaded on demand) Mono: JetBrains Mono — labels, statuses, data TOKEN GROUPS 1. Color — surfaces, text, borders, brand accent, semantic, per-game 2. Typography — families, fluid scale, weights, leading, tracking 3. Spacing — 4px base scale + layout containers 4. Shape & depth — radii, shadows, accent glow 5. Motion — durations, easing, z-index scale ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. COLOR --------------------------------------------------------------------------- */ /* Surfaces (elevation: base -> raised -> overlay) */ --color-bg-base: #050609; --color-bg-raised: #0a0c12; --color-bg-overlay: #11141d; /* Text hierarchy */ --color-text-primary: #f3f5f8; --color-text-secondary: #b6bdca; --color-text-muted: #7c8697; /* Borders (subtle -> default -> emphasis) */ --color-border-subtle: #ffffff0f; --color-border-default: #ffffff1a; --color-border-emphasis: #ffffff33; /* Brand accent — electric cyan/teal */ --color-accent: #2ee8c7; --color-accent-strong: #16d8b6; --color-accent-muted: #2ee8c733; --color-accent-secondary: #0ea5e9; --color-accent-glow: #2ee8c766; --color-accent-contrast: #04120f; /* text/icon on top of accent fills */ /* Semantic status */ --color-success: #34d399; /* Live */ --color-warning: #f5b544; /* Partially live */ --color-soon: #f5913e; /* Coming Soon — orange */ --color-neutral: #8b95a7; /* muted / inactive */ /* Per-game accents (gaming chapter only — never leak site-wide) */ --game-minecraft: #6cc94e; --game-vrising: #e0455e; --game-satisfactory: #f5913e; /* --------------------------------------------------------------------------- 2. TYPOGRAPHY Locale stacks are applied via html[lang] / data-font-stack on . Latin default: Plus Jakarta Sans. RTL: Vazirmatn. JA/ZH: Noto Sans. Mono stays JetBrains across all locales. --------------------------------------------------------------------------- */ --font-latin: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --font-rtl: "Vazirmatn", "Plus Jakarta Sans", system-ui, sans-serif; --font-ja: "Noto Sans JP", "Plus Jakarta Sans", system-ui, sans-serif; --font-zh: "Noto Sans SC", "Plus Jakarta Sans", system-ui, sans-serif; --font-display: var(--font-latin); --font-body: var(--font-latin); --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* Fluid type scale (min .. max via clamp) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --text-3xl: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem); --text-4xl: clamp(2.4rem, 1.8rem + 3vw, 3.75rem); --text-5xl: clamp(2.75rem, 1.9rem + 4.2vw, 4.75rem); --text-wordmark: clamp(3.2rem, 10.5vw, 9.5rem); /* hero brand moment */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.05; --leading-snug: 1.25; --leading-normal: 1.6; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; /* --------------------------------------------------------------------------- 3. SPACING (4px base scale) + LAYOUT --------------------------------------------------------------------------- */ --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; --space-32: 8rem; --container-max: 1200px; --container-pad: clamp(1.25rem, 5vw, 3rem); --section-padding-y: clamp(4rem, 8vw, 8rem); --header-height: 4.5rem; /* --------------------------------------------------------------------------- 4. SHAPE & DEPTH --------------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, 0.65); --shadow-lg: 0 30px 70px -25px rgba(0, 0, 0, 0.8); --shadow-glow-accent: 0 0 0 1px var(--color-accent-muted), 0 18px 50px -18px var(--color-accent-glow); /* --------------------------------------------------------------------------- 5. MOTION --------------------------------------------------------------------------- */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 650ms; --duration-ambient: 14s; --duration-ticker: 36s; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1); /* slight overshoot for accents */ /* Fixed z-index scale — never use arbitrary values */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-mega: 300; --z-drawer: 400; --z-skip: 500; } /* Locale font stacks — i18n.js sets (ckb not ku) */ html[lang="fa"], html[lang="ar"], html[lang="ckb"] { --font-display: var(--font-rtl); --font-body: var(--font-rtl); } html[lang="ja"] { --font-display: var(--font-ja); --font-body: var(--font-ja); } html[lang="zh"] { --font-display: var(--font-zh); --font-body: var(--font-zh); } /* Simplify / disable motion for users who ask for it. Applied globally here so individual components can rely on this baseline. Chapter pinning and the hero dissolve are additionally gated in JS. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }