/* ============================================================================ Agentex — Unified Design System ---------------------------------------------------------------------------- Dual-theme tokens (light "premium paper" + dark "cinematic"), bilingual RTL/LTR-safe component primitives. Built to work alongside the existing Tailwind CDN, but fully usable on its own. Usage: ... marketing site + user/admin app ... the game / hero gateway dir="rtl" lang="fa" ... Persian (default) dir="ltr" lang="en" ... English All directional spacing uses CSS logical properties so a single rule works in both RTL and LTR. ============================================================================ */ /* ---- Fonts ---------------------------------------------------------------- */ /* Local-only font loading: - No remote @import or CDN requests - Uses installed local fonts if available, then system fallbacks */ @font-face { font-family: 'Fraunces'; src: url('/static/fonts/Fraunces-Regular.ttf') format('truetype'), local('Fraunces'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('/static/fonts/Fraunces-Bold.ttf') format('truetype'), local('Fraunces Bold'); font-style: normal; font-weight: 700; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-Regular.ttf') format('truetype'), local('Plus Jakarta Sans'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/fonts/PlusJakartaSans-Bold.ttf') format('truetype'), local('Plus Jakarta Sans Bold'); font-style: normal; font-weight: 700; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2'), local('Vazirmatn'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2'), local('Vazirmatn Medium'); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/static/fonts/Vazirmatn-SemiBold.woff2') format('woff2'), local('Vazirmatn SemiBold'); font-style: normal; font-weight: 600; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2'), local('Vazirmatn Bold'); font-style: normal; font-weight: 700; font-display: swap; } /* ---- Core tokens (shared) ------------------------------------------------- */ :root { /* Brand accents — the two product "paths" */ --gold-50: #FFF7E8; --gold-200: #FFD98A; --gold-400: #F0A92B; /* Ember Gold — play & earn / game / brand */ --gold-600: #C8841E; --gold-800: #8A5713; --teal-50: #E7F4F1; --teal-300: #5CC0AE; --teal-500: #1F8A78; /* Veridian — business / agents-as-a-service */ --teal-700: #136254; /* Semantic status */ --success: #2E9E6B; --warning: #D9923B; --danger: #D0453E; --info: #3B7DD8; /* Type families */ --font-display: 'Fraunces', 'Vazirmatn', Georgia, 'Times New Roman', serif; --font-ui: 'Plus Jakarta Sans', 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif; --font-fa: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif; /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(.2,.7,.2,1); --dur: .28s; --maxw: 1180px; } /* When the document is Persian, default the UI font to Vazirmatn */ :root[lang='fa'] { --font-ui: var(--font-fa); } /* ---- Light theme (premium paper) ----------------------------------------- */ :root[data-theme='light'] { --bg: #FAF7F1; /* warm paper */ --bg-tint: #F3EEE4; --surface: #FFFFFF; --surface-2: #FBF9F5; --ink: #171310; /* warm near-black */ --ink-soft: #423B33; --muted: #6B6258; --border: #E8E1D5; --border-strong: #D6CCBC; --ring: rgba(31,138,120,.35); --shadow-sm: 0 1px 2px rgba(23,19,16,.06), 0 1px 1px rgba(23,19,16,.04); --shadow-md: 0 6px 20px -8px rgba(23,19,16,.18); --shadow-lg: 0 24px 60px -20px rgba(23,19,16,.28); --accent: var(--teal-500); --accent-ink:#FFFFFF; color-scheme: light; } /* ---- Dark theme (cinematic) ---------------------------------------------- */ :root[data-theme='dark'] { --bg: #0B0A08; /* warm near-black */ --bg-tint: #131009; --surface: #16120C; --surface-2: #1E1810; --ink: #F3ECDD; --ink-soft: #CDC2AE; --muted: #A2967F; --border: #2C2418; --border-strong: #3D3220; --ring: rgba(240,169,43,.45); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 10px 30px -8px rgba(0,0,0,.6); --shadow-lg: 0 30px 80px -24px rgba(0,0,0,.8); --accent: var(--gold-400); --accent-ink:#1A1206; color-scheme: dark; } /* ---- Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.05; font-weight: 600; } :root[lang='fa'] h1, :root[lang='fa'] h2, :root[lang='fa'] h3, :root[lang='fa'] .display { /* Vazirmatn looks best a touch tighter, never italic */ font-family: var(--font-fa); font-weight: 800; line-height: 1.25; font-style: normal; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--gold-200); color: #1A1206; } /* ---- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 12px 20px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 15px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:active { transform: translateY(1px) scale(.99); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); } .btn-primary { background: var(--gold-400); color: #1A1206; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--gold-200); text-decoration: none; box-shadow: 0 8px 24px -8px var(--gold-600); } .btn-teal { background: var(--teal-500); color: #fff; } .btn-teal:hover { background: var(--teal-700); text-decoration: none; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); text-decoration: none; } .btn-lg { padding: 16px 28px; font-size: 17px; } .btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; } /* ---- Card ----------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } /* ---- Inputs --------------------------------------------------------------- */ .input, .select, .textarea { width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); transition: border-color var(--dur), box-shadow var(--dur); } .input::placeholder { color: var(--muted); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); } .input:disabled { background: var(--bg-tint); color: var(--muted); } .input[aria-invalid='true'] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(208,69,62,.18); } .label { display: block; font-size: 14px; font-weight: 600; margin-block-end: 6px; } /* ---- Badges --------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 1.4; background: var(--bg-tint); color: var(--ink-soft); border: 1px solid var(--border); } .badge-gold { background: var(--gold-50); color: var(--gold-800); border-color: var(--gold-200); } .badge-teal { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-300); } .badge-success { background: #E6F4EC; color: #1C7A4E; border-color: #B8E2C9; } .badge-warning { background: #FBF0DE; color: #8A5713; border-color: #F0D5A0; } .badge-danger { background: #FBE7E5; color: #A6332C; border-color: #F1C2BE; } /* ---- Layout helpers ------------------------------------------------------- */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); } .eyebrow { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } :root[lang='fa'] .eyebrow { letter-spacing: 0; } /* ---- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }