/* CelebIsland design tokens: "Obsidian and Emerald" Brand green #51C23C is the logo green. Never change its value. */ :root { /* Brand */ --ci-green: #51C23C; --ci-green-hover: #7ee06a; --ci-green-soft: rgba(81, 194, 60, 0.12); --ci-green-ring: rgba(81, 194, 60, 0.14); --ci-green-glow: rgba(81, 194, 60, 0.6); --ci-on-green: #07080C; /* text on green buttons (white fails contrast) */ /* Surfaces, darkest to lightest */ --ci-ink: #07080C; /* page background */ --ci-panel: #0B0D12; /* sidebars, art panels */ --ci-surface: #0F1117; /* cards, inputs */ --ci-surface-2: #151821; /* hover, raised */ --ci-chip: #1d212a; /* selected pill, tooltip */ /* Lines */ --ci-line: #1d2029; --ci-line-strong: #262a34; --ci-line-soft: #1a1d25; /* Text */ --ci-bone: #F7F7F3; /* primary text */ --ci-text-2: #c3c7d0; /* labels */ --ci-text-3: #a3a8b4; /* body secondary */ --ci-text-4: #8a909c; /* captions */ --ci-text-5: #6d7280; /* placeholders, meta */ /* Status */ --ci-warn: #f0b44c; --ci-danger: #ef6b5b; /* Type */ --ci-font-display: "Fraunces", Georgia, serif; --ci-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --ci-font-mono: "JetBrains Mono", ui-monospace, monospace; --ci-fs-hero: 76px; --ci-fs-h1: 48px; --ci-fs-h2: 34px; --ci-fs-h3: 22px; --ci-fs-body: 15px; --ci-fs-small: 13px; --ci-fs-micro: 11px; /* Radius */ --ci-r-sm: 8px; --ci-r-md: 12px; --ci-r-lg: 18px; --ci-r-xl: 24px; --ci-r-pill: 999px; /* Spacing (4px base) */ --ci-s1: 4px; --ci-s2: 8px; --ci-s3: 12px; --ci-s4: 16px; --ci-s5: 20px; --ci-s6: 24px; --ci-s8: 32px; --ci-s10: 40px; --ci-s12: 48px; --ci-s16: 64px; /* Elevation */ --ci-shadow-card: 0 40px 100px -30px rgba(0, 0, 0, 0.9); --ci-shadow-cta: 0 12px 40px -12px var(--ci-green-glow); /* Theme-dependent helpers */ --ci-green-text: #51C23C; /* green used AS TEXT or icon (links, eyebrows, hashtags) */ --ci-shimmer-hi: #b8f5a8; --ci-text-6: #555a66; /* tiny uppercase section labels */ --ci-text-body: #dfe1e6; /* post body text */ --ci-line-strong2: #2a2e38; --ci-warn-text: #e9cf9e; --ci-grid-line: rgba(247, 247, 243, 0.035); --ci-topbar-bg: rgba(7, 8, 12, 0.82); --ci-glass: rgba(15, 17, 23, 0.7); --ci-chip-bg: rgba(255, 255, 255, 0.02); --ci-ph-base: #0d1016; /* media placeholder base */ --ci-idcard-bg: #111419; --ci-idcard-edge: #2b3a2a; --ci-pro-bg: #0d1210; --ci-aurora: 0.55; /* aurora glow strength */ /* Motion */ --ci-ease: cubic-bezier(.2, .7, .2, 1); --ci-dur: 180ms; } /* ========================================================= LIGHT THEME: "Ivory and Emerald" Activate with . celebisland.js sets it from the saved choice or the device setting, and the toggle button flips it. Brand green #51C23C is unchanged for fills. Green used as TEXT is darkened to #2B7A1F so it passes WCAG AA on ivory and white. ========================================================= */ :root[data-theme="light"] { color-scheme: light; --ci-green-text: #2B7A1F; --ci-green-hover: #3fa62c; --ci-green-soft: rgba(81, 194, 60, 0.14); --ci-green-ring: rgba(81, 194, 60, 0.22); --ci-green-glow: rgba(81, 194, 60, 0.45); --ci-shimmer-hi: #7ed96b; --ci-ink: #F6F5F0; /* page background, warm ivory */ --ci-panel: #EFEEE7; --ci-surface: #FFFFFF; --ci-surface-2: #F4F3EE; --ci-chip: #E7E6DE; --ci-line: #E6E4DB; --ci-line-strong: #D8D6CC; --ci-line-soft: #E6E4DB; --ci-line-strong2: #CFCDC2; --ci-bone: #111318; /* primary text */ --ci-text-2: #2c3038; --ci-text-3: #464b55; --ci-text-4: #5a606b; --ci-text-5: #6b717c; --ci-text-6: #7a7f89; --ci-text-body: #23262d; --ci-warn: #e9a52e; --ci-warn-text: #7a4f00; --ci-grid-line: rgba(17, 19, 24, 0.05); --ci-topbar-bg: rgba(246, 245, 240, 0.85); --ci-glass: rgba(255, 255, 255, 0.8); --ci-chip-bg: rgba(255, 255, 255, 0.7); --ci-ph-base: #E8E7E0; --ci-idcard-bg: #FFFFFF; --ci-idcard-edge: #cfe6c8; --ci-pro-bg: #F1F8EE; --ci-aurora: 0.35; --ci-shadow-card: 0 30px 80px -30px rgba(17, 19, 24, 0.25); }