/* ========================================================================== BorrowCircle — tokens ---------------------------------------------------------------------------- Independent of the design-system source files, but visually anchored in the same warm/residential vocabulary. Palette presets are applied via [data-palette] on . Each preset declares 5 base shades + a derived dark/hover. Neutrals (bg, surface, fg, border) are tinted slightly per preset so the whole UI shifts together. ========================================================================== */ :root { /* ---------- Type ------------------------------------------------------- */ --ff-heading: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-mono: ui-monospace, "SF Mono", Menlo, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px; --fs-4xl: 52px; --fs-5xl: 72px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.5; --measure: 60ch; /* ---------- Spacing (4px scale) --------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px; /* ---------- Radii ------------------------------------------------------ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* ---------- Motion ----------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 220ms; --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1); /* ---------- Shadows (always warm-tinted, never black) ----------------- */ --shadow-sm: 0 1px 2px rgba(31, 42, 36, 0.04), 0 2px 6px rgba(31, 42, 36, 0.04); --shadow-md: 0 2px 8px rgba(31, 42, 36, 0.06), 0 12px 28px rgba(31, 42, 36, 0.08); --shadow-lg: 0 8px 24px rgba(31, 42, 36, 0.08), 0 24px 60px rgba(31, 42, 36, 0.12); /* ---------- Density (tweakable) --------------------------------------- */ --density-row: 56px; /* list row height */ --density-card-pad: 20px; --density-page-pad: 32px; /* ---------- Status (constant across palettes) ------------------------- */ --color-success: #167a4a; --color-warning: #b25b15; --color-destructive: #b3261e; /* ---------- Container -------------------------------------------------- */ --container-max: 1240px; --container-narrow: 720px; } [data-density="compact"] { --density-row: 44px; --density-card-pad: 14px; --density-page-pad: 22px; --fs-base: 14px; --fs-md: 16px; } /* ========================================================================== PALETTE PRESETS ========================================================================== */ /* -- 1. Forest (default BorrowCircle) --------------------------------------- */ [data-palette="forest"], :root { --p1: #2f6b4f; /* deep forest — primary */ --p2: #4f8b6a; /* mid green */ --p3: #c8d8c4; /* sage tint */ --p4: #e8f0e5; /* very pale green */ --p5: #d97757; /* clay accent */ --color-primary: #2f6b4f; --color-primary-hover: #245540; --color-primary-soft: color-mix(in oklab, #2f6b4f 10%, transparent); --color-accent: #d97757; --color-accent-soft: color-mix(in oklab, #d97757 14%, transparent); --color-tint: #e8f0e5; --color-bg: #fbf7f1; --color-surface: #ffffff; --color-surface-muted: #f3eee4; --color-surface-warm: #f7f1e6; --color-border: #e5ded1; --color-border-strong: #d3c9b5; --color-fg: #1f2a24; --color-fg-muted: #5c6a61; --color-fg-soft: #8a9990; --color-on-primary: #ffffff; --color-on-accent: #ffffff; --color-ring: color-mix(in oklab, #2f6b4f 60%, transparent); } /* -- 2. Plum / Khaki / Lime ------------------------------------------- */ [data-palette="plum"] { --p1: #6d545d; --p2: #756d54; --p3: #8b9556; --p4: #abb557; --p5: #bed558; --color-primary: #573e47; /* darkened from 6D545D */ --color-primary-hover: #432d35; --color-primary-soft: color-mix(in oklab, #6d545d 14%, transparent); --color-accent: #8b9556; --color-accent-soft: color-mix(in oklab, #bed558 22%, transparent); --color-tint: #f1efde; --color-bg: #f7f2ec; --color-surface: #ffffff; --color-surface-muted: #ede7dc; --color-surface-warm: #f4eddf; --color-border: #d9d0bc; --color-border-strong: #b9af96; --color-fg: #2a2024; --color-fg-muted: #6b5d63; --color-fg-soft: #9a8d92; --color-on-primary: #ffffff; --color-on-accent: #ffffff; --color-ring: color-mix(in oklab, #6d545d 55%, transparent); } /* -- 3. Sage / Mint -------------------------------------------------- */ [data-palette="sage"] { --p1: #94ae89; --p2: #a8bca1; --p3: #c0da74; --p4: #beedaa; --p5: #d5ffd9; --color-primary: #4d6f48; /* darkened from sage range */ --color-primary-hover: #3a5736; --color-primary-soft: color-mix(in oklab, #94ae89 22%, transparent); --color-accent: #6b8a3a; /* darker lime for AA contrast on white */ --color-accent-soft: color-mix(in oklab, #c0da74 32%, transparent); --color-tint: #e6f5dd; --color-bg: #f6faf2; --color-surface: #ffffff; --color-surface-muted: #ecf2e3; --color-surface-warm: #f0f7e4; --color-border: #d6dfc8; --color-border-strong: #b6c7a3; --color-fg: #1c2820; --color-fg-muted: #4f6256; --color-fg-soft: #7d8d80; --color-on-primary: #ffffff; --color-on-accent: #ffffff; --color-ring: color-mix(in oklab, #4d6f48 60%, transparent); } /* -- 4. Cobalt / Slate (cooler, professional) ------------------------ */ [data-palette="cobalt"] { --p1: #1f3a5f; --p2: #3a6094; --p3: #c2d4ea; --p4: #e9f0f8; --p5: #e8a13b; --color-primary: #1f3a5f; --color-primary-hover: #152a47; --color-primary-soft: color-mix(in oklab, #1f3a5f 10%, transparent); --color-accent: #e8a13b; --color-accent-soft: color-mix(in oklab, #e8a13b 18%, transparent); --color-tint: #e9f0f8; --color-bg: #f6f5f1; --color-surface: #ffffff; --color-surface-muted: #ecebe6; --color-surface-warm: #f1efe8; --color-border: #dad7cf; --color-border-strong: #b9b5a9; --color-fg: #1c1f24; --color-fg-muted: #5a6068; --color-fg-soft: #8a8f96; --color-on-primary: #ffffff; --color-on-accent: #1c1f24; --color-ring: color-mix(in oklab, #1f3a5f 55%, transparent); }