/* ========================================================================== Arkalabs — Official Design Tokens Sources: arka-deck, arka-web/HomeHero.tsx, Hero-hexagone/dist/ArkaHexHero ========================================================================== */ /* ========================================================================== 1. Brand identity — invariant across themes ========================================================================== */ :root { /* Primary brand */ --color-primary: #c70f43; --arka-red: #c70f43; /* CTA primaires, accents, identité de marque */ /* Accents — viz / data only */ --arka-green: #00d287; /* État actif/sélectionné UI */ --arka-purple: #8b5cf6; /* Data viz */ --arka-blue: #4a90e2; /* Data viz */ --arka-fuchsia: #d946ef; /* Data viz */ /* Status — sémantique (distinct des accents UI) */ --status-pass: #16a34a; --status-fail: #dc2626; --status-warn: #d97706; --status-pending: var(--arka-red); /* ===== Sand palette — light mode only ===== Ne jamais utiliser en dark. */ --color-sand-50: #FAF7F4; /* surface light */ --color-sand-100: #F0EBE5; --color-sand-200: #E3DCD5; --color-sand-300: #D1C9C0; --color-sand-900: #1C1816; /* text on light */ /* Typography — Poppins remplace Inter sur tous les écrans */ --font-sans: 'Poppins', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-display: 'Poppins', system-ui, sans-serif; /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; /* Spacing — 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Glows */ --glow-red: 0 0 8px rgba(199, 15, 67, 0.5); --glow-green: 0 0 8px rgba(0, 210, 135, 0.5); --glow-amber: 0 0 8px rgba(217, 119, 6, 0.5); } /* ========================================================================== 2. Dark theme — CANONICAL. Default tokens live on :root so consumers get the operator-console look with no theme class required. ========================================================================== */ :root { color-scheme: dark; --surface: #171718; --surface-alt: #1e1e1f; --surface-card: rgba(255, 255, 255, 0.025); /* translucent — lets gradients bleed through */ --surface-hover: rgba(255, 255, 255, 0.05); --app-border: rgba(255, 255, 255, 0.08); --app-border-subtle: rgba(255, 255, 255, 0.04); --content: #ffffff; --content-muted: #9ca3af; --content-subtle: #6b7280; --scrollbar-thumb: #3f3f46; } /* ========================================================================== 3. Light theme — Sand. Opt in with class="theme-light" on . ========================================================================== */ .theme-light { color-scheme: light; --surface: #FAF7F4; --surface-alt: #F0EBE5; --surface-card: #FFFFFF; --surface-hover: rgba(0, 0, 0, 0.05); --app-border: rgba(0, 0, 0, 0.08); --app-border-subtle: rgba(0, 0, 0, 0.04); --content: #1C1816; --content-muted: #5C5650; --content-subtle: #9C9288; --scrollbar-thumb: #D1C9C0; } /* Aliases kept so `.theme-dark` / `.theme-arka` still resolve to the default */ .theme-dark, .theme-arka { color-scheme: dark; } /* ========================================================================== 4. Legacy aliases — for the live ui-HCM_v3 codebase Map the older --praxis-* / --text-* / --border-* names onto the new tokens. ========================================================================== */ :root { --praxis-base: var(--surface); --praxis-surface: var(--surface-alt); --praxis-elevated: var(--surface-hover); --praxis-interactive: #3f3f46; --text-primary: var(--content); --text-secondary: var(--content-muted); --text-muted: var(--content-subtle); --border-color: var(--app-border); --border-subtle: var(--app-border-subtle); } /* ========================================================================== 5. Base + semantic typography ========================================================================== */ html, body { background-color: var(--surface); color: var(--content); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .t-h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--content); } h2, .t-h2 { font-size: 14px; font-weight: 700; color: var(--content); } /* The signature: section eyebrow */ .t-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--content-subtle); } .t-meta { font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--content-subtle); } .t-body { font-size: 12px; line-height: 1.6; color: var(--content-muted); } .t-label { font-size: 12px; font-weight: 500; color: var(--content); } .t-metric { font-family: var(--font-mono); font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: var(--content); } .t-mono { font-family: var(--font-mono); font-size: 12px; color: var(--content); } /* Hero display — Poppins, flat arka-red, reserved for hero titles on arka-web */ .t-hero { font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 1.05; letter-spacing: -0.03em; color: var(--arka-red); } code, kbd, .t-kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border: 1px solid var(--app-border-subtle); background: var(--surface-hover); border-radius: var(--radius-md); color: var(--content-muted); } /* ========================================================================== 6. Component recipes ========================================================================== */ .ds-card { background: var(--surface-card); border: 1px solid var(--app-border); border-radius: var(--radius-xl); padding: var(--space-4); position: relative; overflow: hidden; transition: border-color 200ms, background-color 200ms; } .ds-card:hover { border-color: var(--app-border-subtle); background: var(--surface-hover); } .ds-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: var(--surface-hover); border: 1px solid var(--app-border-subtle); color: var(--content-subtle); } .ds-pill--red { background: rgba(199, 15, 67, 0.12); border-color: rgba(199, 15, 67, 0.25); color: var(--arka-red); } .ds-pill--green { background: rgba(0, 210, 135, 0.12); border-color: rgba(0, 210, 135, 0.25); color: var(--arka-green); } .ds-pill--pass { background: rgba(22, 163, 74, 0.12); border-color: rgba(22, 163, 74, 0.25); color: var(--status-pass); } .ds-pill--fail { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.25); color: var(--status-fail); } .ds-pill--warn { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.25); color: var(--status-warn); } .ds-dot { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; } .ds-dot--online { background: var(--arka-green); box-shadow: var(--glow-green); } .ds-dot--active { background: var(--arka-red); box-shadow: var(--glow-red); } .ds-dot--alert { background: var(--status-warn); box-shadow: var(--glow-amber); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--arka-red); } /* ========================================================================== 7. App theming extension — extra semantic levels used by the Cortex app. The --w channel flips every white wash/border to a warm near-black in light. ========================================================================== */ :root { --w: 255, 255, 255; --bar: #222121; /* sidebar + topbar */ --zone: #1D1C1C; /* content reading pane */ --elevated: #1e1e20; /* menus, popovers, modals */ --tx1: #ffffff; /* primary text */ --tx2: #e5e7eb; /* strong text */ --tx3: #9ca3af; /* muted */ --tx4: #6b7280; /* subtle */ --tx5: #5b6470; /* faint eyebrow */ --tx-soft: #c9ccd2; /* secondary strong */ --tx-inactive: #8b929c; /* inactive nav */ --tx-dim: #7c828c; /* dim label */ } .theme-light { --surface: #ECE8E1; /* app base (behind chrome) */ --surface-alt: #F4F1EC; --w: 28, 24, 20; --bar: #F4F1EC; --zone: #FFFFFF; --elevated: #FFFFFF; --tx1: #1C1816; --tx2: #33302B; --tx3: #57524B; --tx4: #857E74; --tx5: #A39A8C; --tx-soft: #45403A; --tx-inactive: #6E675E; --tx-dim: #7C7568; --scrollbar-thumb: #D1C9C0; }