/* ============================================================ n4n · COLOR TOKENS — Zoho-inspired light theme Clean white surfaces on a soft gray canvas, a professional blue primary action, crisp per-app accent hues, and calm neutral text. Token NAMES are unchanged so every component and UI kit re-themes automatically. ============================================================ */ :root { /* ---- Base neutrals (light) ---- */ --n-void: #EBEEF3; /* app rails / deepest chrome */ --n-bg: #F4F6FA; /* app background */ --n-bg-2: #FFFFFF; /* inputs / raised fields */ --n-surface: #ffffffb8; /* glass surface (used w/ blur) */ --n-surface-1: #FFFFFF; /* solid card */ --n-surface-2: #F1F4F9; /* hover */ --n-surface-3: #E7ECF3; /* active / popover */ /* ---- Hairlines & borders ---- */ --n-line: #E4E8EF; /* default border */ --n-line-2: #D4DAE3; /* stronger border */ --n-line-glow: #2f6fed40; /* accent-tinted hairline */ /* ---- Text ---- */ --n-text: #1B2534; /* primary — dark slate */ --n-text-2: #556072; /* secondary / muted */ --n-text-3: #8A94A4; /* tertiary / placeholder */ --n-text-invert: #FFFFFF; /* text on dark chrome */ /* ---- Signature accent: n4n blue (primary action) ---- */ --n-accent: #2F6FED; --n-accent-hi: #4A83FF; /* hover / lighter */ --n-accent-lo: #2258C9; /* pressed / darker */ --n-accent-dim: #2f6fed14; /* ~8% wash */ --n-accent-soft: #2f6fed29; /* ~16% wash */ --n-on-accent: #FFFFFF; /* ---- Product spectrum (one hue per n4n app) ---- */ --n-ai: #0EA5A0; /* n4n AI — teal */ --n-mail: #2F6FED; /* n4n Mail — blue */ --n-social: #E5487F; /* n4n Social — pink */ --n-web: #7A5AF8; /* n4n Web — violet */ --n-cyan: #0FA9DE; --n-amber: #F5A623; /* ---- Semantic ---- */ --n-success: #12A150; --n-warning: #F5A623; --n-danger: #E5484D; --n-info: #2F6FED; --n-success-dim: #12a15014; --n-warning-dim: #f5a62317; --n-danger-dim: #e5484d14; --n-info-dim: #2f6fed14; /* ---- Signature gradients ---- */ --n-aurora: linear-gradient(120deg, #2F6FED 0%, #0EA5A0 52%, #7A5AF8 100%); /* @kind other */ --n-plasma: linear-gradient(120deg, #E5487F 0%, #7A5AF8 100%); /* @kind other */ --n-glass: linear-gradient(180deg, #ffffffe6 0%, #ffffff99 100%); /* @kind other */ /* ---- Semantic aliases (use these in components) ---- */ --surface-page: var(--n-bg); --surface-card: var(--n-surface-1); --surface-raised: var(--n-surface-2); --surface-pop: var(--n-surface-3); --text-primary: var(--n-text); --text-body: var(--n-text-2); --text-muted: var(--n-text-3); --border-default: var(--n-line); --border-strong: var(--n-line-2); --focus-ring: var(--n-accent); color-scheme: light; } /* ============================================================ DARK THEME — opt-in via . Same token names, remapped: deep slate surfaces, hairlines a step lighter than their card, text lifted for contrast, and every accent brightened ~1 step so washes and glows carry on the dark canvas. Glow is the dark theme's signature. ============================================================ */ :root[data-theme="dark"] { /* ---- Base neutrals (dark) ---- */ --n-void: #0A0E16; /* app rails / deepest chrome */ --n-bg: #0E131D; /* app background */ --n-bg-2: #161D2B; /* inputs / raised fields */ --n-surface: #141b28cc; /* glass surface (used w/ blur) */ --n-surface-1: #131A26; /* solid card */ --n-surface-2: #1A2333; /* hover */ --n-surface-3: #212C40; /* active / popover */ /* ---- Hairlines & borders ---- */ --n-line: #232E42; --n-line-2: #31405C; --n-line-glow: #5b8df659; /* ---- Text ---- */ --n-text: #E9EEF7; --n-text-2: #A3AFC2; --n-text-3: #67748C; --n-text-invert: #FFFFFF; /* dark chrome stays dark */ /* ---- Signature accent: n4n blue, lifted for dark ---- */ --n-accent: #5B8DF6; --n-accent-hi: #7CA5FF; --n-accent-lo: #3D6FE0; --n-accent-dim: #5b8df61f; /* ~12% wash */ --n-accent-soft: #5b8df63d; /* ~24% wash */ --n-on-accent: #FFFFFF; /* ---- Product spectrum, lifted ---- */ --n-ai: #22C7C1; --n-mail: #5B8DF6; --n-social: #F06D9B; --n-web: #9B82FF; --n-cyan: #38BDEF; --n-amber: #FFB84D; /* ---- Semantic ---- */ --n-success: #2ED47C; --n-warning: #FFB84D; --n-danger: #F26D72; --n-info: #5B8DF6; --n-success-dim: #2ed47c1f; --n-warning-dim: #ffb84d21; --n-danger-dim: #f26d721f; --n-info-dim: #5b8df61f; /* ---- Signature gradients ---- */ --n-aurora: linear-gradient(120deg, #4A83FF 0%, #22C7C1 52%, #9B82FF 100%); /* @kind other */ --n-plasma: linear-gradient(120deg, #F06D9B 0%, #9B82FF 100%); /* @kind other */ --n-glass: linear-gradient(180deg, #1a2333e6 0%, #141b2899 100%); /* @kind other */ color-scheme: dark; }