/* Charlie's Agents design system 1.0 — import in new experiences. */ :root { --ca-color-navy: #0B2038; --ca-color-navy-raised: #17314C; --ca-color-brand-gold: #C8913A; --ca-color-accent-gold: #A97827; --ca-color-ivory: #FBF8F0; --ca-color-paper: #FFFDF8; --ca-color-soft-gold: #E7DAC0; --ca-color-border: #D7CDBB; --ca-color-input-border: #CFC5B2; --ca-color-text: #172331; --ca-color-text-muted: #46515A; --ca-color-success: #2F725F; --ca-color-error: #9B352F; --ca-font-heading: Manrope, Arial, sans-serif; --ca-font-body: Inter, Arial, sans-serif; --ca-font-size-page: 32px; --ca-font-size-page-mobile: 27px; --ca-font-size-section: 21px; --ca-font-size-subheading: 17px; --ca-font-size-body: 14px; --ca-font-size-input: 16px; --ca-font-size-label: 13px; --ca-font-size-hint: 12px; --ca-font-size-kicker: 11px; --ca-space-4: 4px; --ca-space-8: 8px; --ca-space-12: 12px; --ca-space-16: 16px; --ca-space-20: 20px; --ca-space-24: 24px; --ca-space-32: 32px; --ca-space-40: 40px; --ca-space-48: 48px; --ca-radius-panel: 4px; --ca-radius-control: 6px; --ca-radius-helper: 24px; --ca-size-sidebar: 248px; --ca-size-header: 100px; --ca-size-input-min: 46px; --ca-size-button-min: 42px; --ca-size-touch-target: 44px; --ca-motion-fast: 150ms; --ca-focus-width: 3px; --ca-focus-offset: 3px; } /* ========================================================================== 1.1 extensions (this repository) — rules that design system 1.0 states in prose but did not tokenize. Names follow the --ca-* convention. Keep the 1.0 block above verbatim so upstream diffs stay trivial. ========================================================================== */ :root { /* Type: weights, line heights and tracking */ --ca-font-weight-heading: 750; --ca-font-weight-subheading: 700; --ca-font-weight-label: 600; --ca-font-weight-body: 400; --ca-font-weight-kicker: 700; --ca-line-height-page: 40px; --ca-line-height-page-mobile: 34px; --ca-line-height-section: 28px; --ca-line-height-subheading: 24px; --ca-line-height-body: 23px; --ca-line-height-input: 24px; --ca-line-height-label: 18px; --ca-line-height-hint: 19px; --ca-line-height-kicker: 16px; --ca-letter-spacing-kicker: 1.2px; --ca-letter-spacing-page: -0.5px; /* Dense metadata only (timestamps, table meta). Never for labels or instructions. */ --ca-font-size-micro: 10px; --ca-line-height-micro: 14px; /* Color additions */ --ca-color-border-strong: #8A9099; /* essential UI boundaries, 3.1:1 on paper */ --ca-color-focus: var(--ca-color-accent-gold); --ca-color-on-navy: var(--ca-color-paper); --ca-color-on-navy-muted: rgba(251, 248, 240, 0.72); --ca-color-on-navy-border: rgba(251, 248, 240, 0.2); --ca-color-success-soft: #E3F0EA; --ca-color-error-soft: #F6E4E2; --ca-color-info-soft: var(--ca-color-soft-gold); /* Motion. The system is flat: no shadows, one elevation. */ --ca-motion-medium: 250ms; --ca-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ca-ease-exit: cubic-bezier(0.4, 0, 1, 1); --ca-shadow-none: none; /* Layering */ --ca-z-base: 0; --ca-z-raised: 10; --ca-z-sticky: 50; --ca-z-overlay: 100; --ca-z-dialog: 200; --ca-z-toast: 300; /* Breakpoints (reference only: custom properties cannot drive @media; mirrored in design-tokens.json) */ --ca-breakpoint-tablet: 900px; --ca-breakpoint-phone: 650px; } /* ========================================================================== 1.2 semantic layer and themes. Components and pages reference ONLY these semantic names; the literal palette above never changes per theme. Light = product and setup surfaces (design system 1.0 default). Dark navy = marketing surfaces. Switch with `.ca-theme-dark` or `[data-theme="dark"]` on any ancestor (usually ). ========================================================================== */ :root { --ca-color-scheme: light; --ca-surface-page: var(--ca-color-ivory); --ca-surface-panel: var(--ca-color-paper); --ca-surface-band: var(--ca-color-paper); --ca-surface-header: var(--ca-color-paper); --ca-surface-footer: var(--ca-color-navy); --ca-surface-tint: var(--ca-color-soft-gold); --ca-text-primary: var(--ca-color-text); --ca-text-secondary: var(--ca-color-text-muted); --ca-ink: var(--ca-color-navy); --ca-ink-hover: var(--ca-color-navy-raised); --ca-kicker: var(--ca-color-text-muted); --ca-line: var(--ca-color-border); --ca-line-strong: var(--ca-color-border-strong); --ca-line-input: var(--ca-color-input-border); --ca-accent: var(--ca-color-accent-gold); --ca-accent-line: var(--ca-color-navy); --ca-accent-outline: var(--ca-color-soft-gold); --ca-action-bg: var(--ca-color-navy); --ca-action-bg-hover: var(--ca-color-navy-raised); --ca-action-fg: var(--ca-color-paper); --ca-chart-fill: var(--ca-color-navy); --ca-status-success: var(--ca-color-success); --ca-status-error: var(--ca-color-error); --ca-tint-success: var(--ca-color-success-soft); --ca-tint-error: var(--ca-color-error-soft); --ca-tint-info: var(--ca-color-info-soft); --ca-on-footer: var(--ca-color-paper); --ca-on-footer-muted: var(--ca-color-on-navy-muted); --ca-on-footer-line: var(--ca-color-on-navy-border); --ca-select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230B2038'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); } .ca-theme-dark, [data-theme="dark"] { --ca-color-scheme: dark; --ca-surface-page: #0B2038; --ca-surface-panel: #17314C; --ca-surface-band: #071626; --ca-surface-header: #0B2038; --ca-surface-footer: #0B2038; --ca-surface-tint: rgba(251, 248, 240, 0.12); --ca-text-primary: #FBF8F0; --ca-text-secondary: #B9C2CE; /* 9.4:1 on navy */ --ca-ink: #FBF8F0; --ca-ink-hover: #E7DAC0; --ca-kicker: #D9A555; /* 7.0:1 on navy, 5.1:1 on raised navy */ --ca-line: rgba(251, 248, 240, 0.14); --ca-line-strong: rgba(251, 248, 240, 0.4); --ca-line-input: rgba(251, 248, 240, 0.28); --ca-accent: #C8913A; --ca-accent-line: #C8913A; --ca-accent-outline: rgba(200, 145, 58, 0.45); --ca-action-bg: #FFFDF8; --ca-action-bg-hover: #E7DAC0; --ca-action-fg: #0B2038; --ca-chart-fill: #C8913A; --ca-status-success: #7FCBA8; /* 8.6:1 on navy */ --ca-status-error: #E08A83; /* 6.5:1 on navy */ --ca-tint-success: rgba(127, 203, 168, 0.14); --ca-tint-error: rgba(224, 138, 131, 0.14); --ca-tint-info: rgba(200, 145, 58, 0.16); --ca-on-footer: #FBF8F0; --ca-on-footer-muted: rgba(251, 248, 240, 0.72); --ca-on-footer-line: rgba(251, 248, 240, 0.2); --ca-color-focus: #D9A555; --ca-select-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23FBF8F0'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); }