/* ============================================================ PALLAS — Design Tokens Single source of truth for surfaces outside the 26 web pages (lifecycle emails, magic-link/invite/reauth emails, chatbot widget). Generated from the redesign/claude-design-pass visual layer. Usage: include once, then reference var(--pa-*). Dark + light are both provided; default below is the dark "vintage black" identity. Wrap a subtree in [data-pa-theme="light"] (or set it on ) for the warm-parchment variant. ============================================================ */ :root, [data-pa-theme="dark"] { /* ---- Brand colors ---- */ --pa-color-deep-black: #0C0C11; /* base ground (never pure black) */ --pa-color-deep-black-2: #15151C; /* raised band */ --pa-color-card: #1C1C24; /* card surface (dark) */ --pa-color-cream: #ECE3D1; /* warm parchment (light ground) */ --pa-color-bone-white: #F2ECDE; /* primary ink on dark */ --pa-color-bone-white-hi: #F4EEDF; /* brightest bone (hero type) */ --pa-color-brass: #B08D57; /* primary accent */ --pa-color-brass-deep: #8A6E3E; /* borders / pressed */ --pa-color-brass-bright: #C8A86C; /* hover / highlight (gold) */ --pa-color-brass-tint: rgba(176,141,87,0.12); /* pill/badge fills */ --pa-color-brass-rule: rgba(176,141,87,0.30); /* hairline dividers */ --pa-color-wedgwood-indigo: #828ACB; /* data category */ --pa-color-verdigris-sage: #80A28F; /* data category / positive */ --pa-color-oxblood: #9C4A40; /* emphasis / destructive */ --pa-color-oxblood-soft: #C98175; /* oxblood data-series tint */ --pa-color-ink: #F2ECDE; /* body text on dark */ --pa-color-ink-dim: #B7AD96; /* secondary text on dark */ /* ---- Data-viz categorical series (muted Victorian palette) ---- */ --cat-brass: #B08D57; --cat-sage: #80A28F; --cat-indigo: #828ACB; --cat-gold: #C8A86C; --cat-oxblood: #C98175; /* ---- Buttons ---- */ --pa-button-primary-bg: var(--pa-color-brass); --pa-button-primary-text: #1C150B; /* dark ink on brass */ --pa-button-primary-border: var(--pa-color-brass-deep); --pa-button-primary-bg-hover: var(--pa-color-brass-bright); --pa-button-secondary-bg: transparent; --pa-button-secondary-text: var(--pa-color-ink); --pa-button-secondary-border: var(--pa-color-brass-rule); --pa-button-secondary-text-hover: var(--pa-color-brass); --pa-button-ghost-bg: transparent; --pa-button-ghost-text: var(--pa-color-ink-dim); --pa-button-ghost-border: transparent; --pa-button-ghost-text-hover: var(--pa-color-brass); /* ---- Dividers ---- */ --pa-divider-gold: var(--pa-color-brass-rule); --pa-divider-gold-strong: rgba(176,141,87,0.5); /* ---- Shadows ---- */ --pa-shadow-warm: 0 8px 24px -14px rgba(176,141,87,0.55); --pa-shadow-card: 0 18px 50px -30px rgba(0,0,0,0.8); } [data-pa-theme="light"] { --pa-color-card: #F5EFE1; /* parchment card */ --pa-color-deep-black-2: #E4D9C2; /* parchment band */ --pa-color-bone-white: #2A2418; /* ink flips dark on light */ --pa-color-brass: #8A6E3E; --pa-color-brass-deep: #6F5730; --pa-color-brass-bright: #9E7E47; --pa-color-brass-tint: rgba(138,110,62,0.10); --pa-color-brass-rule: rgba(138,110,62,0.34); --pa-color-wedgwood-indigo: #42498A; --pa-color-verdigris-sage: #4E6B5C; --pa-color-oxblood: #8A3A30; --pa-color-oxblood-soft: #B0584A; --pa-color-ink: #2A2418; /* dark sepia ink */ --pa-color-ink-dim: #6E6450; --cat-brass: #8A6E3E; --cat-sage: #4E6B5C; --cat-indigo: #42498A; --cat-gold: #9E7E47; --cat-oxblood: #8A3A30; --pa-button-primary-text: #1C150B; --pa-shadow-warm: 0 16px 40px -28px rgba(74,58,30,0.4); --pa-shadow-card: 0 16px 44px -28px rgba(74,58,30,0.4); } :root { /* ============================================================ Theme-independent tokens (type, scale, spacing, radii) ============================================================ */ /* ---- Typography ---- */ --pa-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* display / headings */ --pa-font-body: 'Spectral', Georgia, 'Times New Roman', serif; /* body / UI / labels */ --pa-font-mono: 'Spectral', Georgia, serif; /* numerics/labels use Spectral small-caps; no separate mono face */ /* Weights */ --pa-weight-light: 300; --pa-weight-regular: 400; --pa-weight-medium: 500; --pa-weight-semibold:600; --pa-weight-bold: 700; /* ---- Type scale ---- (static rem values for emails/chatbot; web pages use fluid clamp() equivalents shown in comments) ---- */ --pa-font-size-h1: 3.25rem; /* 52px · web: clamp(40px,5.4vw,68px) */ --pa-font-size-h2: 2.5rem; /* 40px · web: clamp(34px,4.6vw,56px) */ --pa-font-size-h3: 1.75rem; /* 28px */ --pa-font-size-h4: 1.4375rem;/* 23px */ --pa-font-size-h5: 1.25rem; /* 20px */ --pa-font-size-h6: 1.0625rem;/* 17px */ --pa-font-size-body: 1rem; /* 16px */ --pa-font-size-sm: 0.875rem; /* 14px */ --pa-font-size-xs: 0.75rem; /* 12px */ --pa-font-size-eyebrow: 0.8125rem; /* 13px · uppercase small-caps kicker */ --pa-line-height-tight: 1.08; /* display headings */ --pa-line-height-snug: 1.3; /* sub-headings */ --pa-line-height-body: 1.7; /* paragraphs */ --pa-line-height-relaxed:1.75; --pa-letter-spacing-eyebrow: 0.26em; /* uppercase kickers */ --pa-letter-spacing-wordmark: 0.15em; /* ---- Spacing (4px base) ---- */ --pa-space-xs: 4px; --pa-space-sm: 8px; --pa-space-md: 16px; --pa-space-lg: 24px; --pa-space-xl: 40px; --pa-space-2xl: 64px; --pa-space-3xl: 100px; /* marketing section padding */ /* ---- Radii ---- */ --pa-radius-small: 4px; /* inputs, tags */ --pa-radius-button: 4px; --pa-radius-card: 8px; --pa-radius-card-lg: 12px; --pa-radius-pill: 100px; /* ---- Texture (optional) ---- */ --pa-grain-opacity: 0.05; /* film/paper grain overlay */ }