/* ============================================================ FORESTRY · DESIGN TOKENS ────────────────────────────────────────────────────────── Editorial-fintech palette in dark forest mode. Scoped to .ds-forestry — apply to any wrapper element to enable. Tailwind/shadcn variable remap is at the bottom so shadcn/ui components inherit the palette automatically. Use: ... ============================================================ */ .ds-forestry { /* ── Surfaces (background tints, dark forest) ───────────── */ --b-bg: #0F1A14; /* page background */ --b-surface: #182921; /* cards, panels */ --b-surface-2: #21342B; /* nested / muted surfaces */ --b-surface-3: #2B3F35; /* hovered surfaces, pills */ --b-line: #2B3F35; /* default border */ --b-line-2: #3D5447; /* stronger border, inputs */ /* ── Ink scale (text colors, cream) ─────────────────────── */ --b-ink: #F2EFE7; /* primary text */ --b-ink-2: #D4D8CF; /* secondary text */ --b-ink-3: #8FA095; /* meta, labels */ --b-ink-4: #5D6E62; /* placeholders, hairlines */ /* ── Dark panels (sidebar, hero blocks) ─────────────────── */ --b-dark: #0A1410; --b-dark-2: #14201A; --b-dark-3: #1B2A22; --b-dark-line: #2B3F35; --b-dark-ink: #F2EFE7; --b-dark-ink-2: #B8C4BC; --b-dark-ink-3: #7A8A82; /* ── Brand · forest green (primary accent) ──────────────── */ --b-accent: #4FA070; --b-accent-2: #3D8A5C; --b-accent-3: #6FBC8E; --b-accent-soft: #1F3A28; /* ── Brand · gold (secondary accent, currency, highlights) */ --b-gold: #D4A659; --b-gold-2: #B8862F; --b-gold-3: #E8BD75; --b-gold-soft: #3A2E14; /* ── Blue (info, links, foreign currency) ───────────────── */ --b-blue: #6FA8C8; --b-blue-3: #8FC0DC; --b-blue-soft: #1A2E3C; /* ── Status colors (semantic) ───────────────────────────── */ --b-good: #4FA070; --b-good-soft: #1F3A28; --b-warn: #D4A659; --b-warn-soft: #3A2E14; --b-bad: #E8806E; --b-bad-soft: #3A1F1A; --b-info: #6FA8C8; --b-info-soft: #1A2E3C; /* ── Typography ─────────────────────────────────────────── */ /* Wired to next/font CSS variables — see app/layout.tsx for Next.js setup. For non-Next projects, replace with @import URLs from Google Fonts (see README.md). */ --b-font-sans: var(--font-plex-sans), ui-sans-serif, system-ui, sans-serif; --b-font-mono: var(--font-plex-mono), ui-monospace, monospace; --b-font-serif: var(--font-source-serif), 'Tiempos', Georgia, serif; --b-text-xs: 11px; --b-text-sm: 12.5px; --b-text-md: 13.5px; /* body default */ --b-text-lg: 15px; --b-text-xl: 17px; /* card titles (serif) */ --b-text-2xl: 22px; --b-text-3xl: 30px; /* page H1 (serif) */ /* ── Radii (small, restrained) ──────────────────────────── */ --b-r-sm: 3px; --b-r: 4px; --b-r-lg: 6px; --b-r-xl: 8px; /* ── Shadows + focus ring ──────────────────────────────── */ --b-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.20); --b-shadow-2: 0 2px 6px -1px rgba(0, 0, 0, 0.35); --b-shadow-3: 0 8px 24px -6px rgba(0, 0, 0, 0.50); --b-ring: 0 0 0 3px rgba(79, 160, 112, 0.30); /* ── Spacing scale ─────────────────────────────────────── */ --b-space-1: 4px; --b-space-2: 8px; --b-space-3: 12px; --b-space-4: 16px; --b-space-5: 20px; --b-space-6: 24px; --b-space-8: 32px; --b-space-10: 40px; /* Apply baseline to root */ font-family: var(--b-font-sans); background: var(--b-bg); color: var(--b-ink); font-size: 14.5px; line-height: 1.5; font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tabular numerals for any element marked .num or [data-num] */ .ds-forestry .num, .ds-forestry *[data-num] { font-variant-numeric: tabular-nums; } /* Default focus ring across interactive controls */ .ds-forestry button:focus-visible, .ds-forestry input:focus-visible, .ds-forestry select:focus-visible, .ds-forestry textarea:focus-visible, .ds-forestry a:focus-visible { outline: none; box-shadow: var(--b-ring); } /* ============================================================ SHADCN / TAILWIND v4 VARIABLE REMAP ────────────────────────────────────────────────────────── Lets shadcn/ui components and bare Tailwind color utilities render correctly on the forestry palette without per-class overrides. ============================================================ */ .ds-forestry { --background: var(--b-bg); --foreground: var(--b-ink); --card: var(--b-surface); --card-foreground: var(--b-ink); --popover: var(--b-surface); --popover-foreground: var(--b-ink); --primary: var(--b-accent); --primary-foreground: #FFFFFF; --secondary: var(--b-surface-2); --secondary-foreground: var(--b-ink); --muted: var(--b-surface-2); --muted-foreground: var(--b-ink-3); --accent: var(--b-surface-3); --accent-foreground: var(--b-ink); --destructive: var(--b-bad); --destructive-foreground: #FFFFFF; --border: var(--b-line); --input: var(--b-line-2); --ring: var(--b-accent); --radius: 4px; /* Tailwind 4 @theme inline forwarders */ --color-background: var(--b-bg); --color-foreground: var(--b-ink); --color-card: var(--b-surface); --color-card-foreground: var(--b-ink); --color-popover: var(--b-surface); --color-popover-foreground: var(--b-ink); --color-primary: var(--b-accent); --color-primary-foreground: #FFFFFF; --color-secondary: var(--b-surface-2); --color-secondary-foreground: var(--b-ink); --color-muted: var(--b-surface-2); --color-muted-foreground: var(--b-ink-3); --color-accent: var(--b-surface-3); --color-accent-foreground: var(--b-ink); --color-destructive: var(--b-bad); --color-border: var(--b-line); --color-input: var(--b-line-2); --color-ring: var(--b-accent); }