/* * design-tokens.css — Cafe Assistant authoritative visual token layer * Issue #278 — single warm cafe palette; no second theme. * * Core palette (change here to retint the product): * #24332b dark anchor * #668b75 sage * #88ac90 sage soft * #eddfac cream * #e8ceb8 tan * #dab79f warm accent * * Contrast law (I278-R1): * Primary actions and links use the dark anchor with white/cream pairings * so operational text meets readable contrast. Sage remains the accent / * success / soft-fill family, not the sole primary interactive fill with * white label text. */ :root { /* ── Core palette ── */ --ca-palette-dark: #24332b; --ca-palette-sage: #668b75; --ca-palette-sage-soft: #88ac90; --ca-palette-cream: #eddfac; --ca-palette-tan: #e8ceb8; --ca-palette-warm: #dab79f; /* ── Surfaces ── */ --ca-color-bg: #eddfac; --ca-color-bg-deep: #e8ceb8; --ca-color-surface: #ffffff; --ca-color-surface-muted: #f4ebcf; --ca-color-header: #24332b; --ca-color-header-text: #ffffff; /* ── Text ── */ --ca-color-text: #24332b; --ca-color-text-muted: #3d4a43; --ca-color-text-subtle: #4f5c55; --ca-color-text-on-primary: #ffffff; --ca-color-text-on-header: #ffffff; /* ── Interactive / brand actions ── * Primary fill + links: dark anchor for WCAG-readable pairings. * Sage retained as accent / outline / soft interactive family. */ --ca-color-primary: #24332b; --ca-color-primary-hover: #1a2620; --ca-color-primary-active: #14201a; --ca-color-primary-soft: #88ac90; --ca-color-primary-tint: rgba(36, 51, 43, 0.10); --ca-color-secondary: transparent; --ca-color-secondary-border: #24332b; --ca-color-link: #24332b; --ca-color-link-hover: #1a2620; --ca-color-accent: #668b75; --ca-color-accent-soft: #88ac90; --ca-color-accent-tint: rgba(102, 139, 117, 0.14); /* ── Borders / dividers ── */ --ca-color-border: #d4c2a8; --ca-color-border-strong: #b7a48a; --ca-color-border-focus: rgba(36, 51, 43, 0.45); --ca-color-divider: #d4c2a8; /* ── Status (centralized, palette-compatible) ── */ --ca-color-success: #3f6b56; --ca-color-success-bg: #e6efe9; --ca-color-success-border: #668b75; --ca-color-warning: #6b4510; --ca-color-warning-bg: #f7efd8; --ca-color-warning-border: #dab79f; --ca-color-error: #8a2424; --ca-color-error-bg: #fef2f2; --ca-color-error-border: #e8a0a0; --ca-color-destructive: #8a2424; --ca-color-destructive-hover: #6f1b1b; --ca-color-info: #3f6b56; --ca-color-disabled-bg: #f3ebe1; --ca-color-disabled-text: #4f5c55; /* ── Typography ── */ --ca-font-family: "Vazirmatn", Tahoma, Arial, sans-serif; --ca-font-size-xs: 0.78rem; --ca-font-size-sm: 0.88rem; --ca-font-size-md: 0.95rem; --ca-font-size-base: 1rem; --ca-font-size-lg: 1.15rem; --ca-font-size-xl: 1.35rem; --ca-font-size-2xl: 1.6rem; --ca-font-weight-regular: 400; --ca-font-weight-medium: 500; --ca-font-weight-semibold: 600; --ca-font-weight-bold: 700; --ca-line-height-tight: 1.35; --ca-line-height-base: 1.7; --ca-line-height-relaxed: 1.85; /* ── Spacing rhythm (4px base) ── */ --ca-space-1: 0.25rem; --ca-space-2: 0.5rem; --ca-space-3: 0.75rem; --ca-space-4: 1rem; --ca-space-5: 1.25rem; --ca-space-6: 1.5rem; --ca-space-8: 2rem; --ca-space-10: 2.5rem; --ca-space-12: 3rem; /* ── Radii ── */ --ca-radius-sm: 6px; --ca-radius-md: 10px; --ca-radius-lg: 14px; --ca-radius-xl: 18px; --ca-radius-pill: 999px; /* ── Elevation ── */ --ca-shadow-sm: 0 1px 3px rgba(36, 51, 43, 0.08); --ca-shadow-md: 0 2px 14px rgba(36, 51, 43, 0.08); --ca-shadow-lg: 0 12px 32px rgba(36, 51, 43, 0.10); /* ── Focus ── */ --ca-focus-ring: 0 0 0 3px rgba(102, 139, 117, 0.45); --ca-focus-outline: 3px solid #668b75; /* ── Layout ── * I278-UAT-1: reusable readable / wide shell modes. * Shell chrome (header/nav) and main share --ca-shell-max so phone * gutters stay balanced and desktop ops pages can widen without * becoming full-bleed. */ --ca-content-width-readable: 920px; --ca-content-width-wide: 1200px; --ca-content-width-platform: 1600px; --ca-content-width: var(--ca-content-width-readable); --ca-content-width-narrow: var(--ca-content-width-readable); --ca-content-width-form: 560px; --ca-shell-max: var(--ca-content-width-readable); --ca-page-inline: 1rem; --ca-tap-min: 2.75rem; --ca-bp-phone: 640px; --ca-bp-tablet: 720px; --ca-bp-desktop: 960px; /* ── Compatibility aliases (existing product-theme contracts) ── */ --pt-primary: var(--ca-color-primary); --pt-primary-hover: var(--ca-color-primary-hover); --pt-primary-light: var(--ca-color-primary-tint); --pt-primary-border: rgba(36, 51, 43, 0.25); --pt-sage: var(--ca-palette-sage); --pt-sage-bg: var(--ca-color-success-bg); --pt-sage-border: var(--ca-color-success-border); --pt-cream: var(--ca-color-bg); --pt-cream-deep: var(--ca-color-bg-deep); --pt-white: var(--ca-color-surface); --pt-ink: var(--ca-color-text); --pt-muted: var(--ca-color-text-muted); --pt-muted-light: var(--ca-color-text-subtle); --pt-border: var(--ca-color-border); --pt-border-strong: var(--ca-color-border-strong); --pt-border-focus: var(--ca-color-border-focus); --pt-warn-bg: var(--ca-color-warning-bg); --pt-warn: var(--ca-color-warning); --pt-err-bg: var(--ca-color-error-bg); --pt-err: var(--ca-color-error); --pt-radius: var(--ca-radius-md); --pt-radius-sm: var(--ca-radius-sm); --pt-shadow: var(--ca-shadow-md); --mdp-tap-min: var(--ca-tap-min); --mdp-focus-ring: var(--ca-focus-ring); /* ── Compatibility aliases (public registration theme contracts) ── */ --white: var(--ca-color-surface); --radius: var(--ca-radius-xl); --cream: var(--ca-color-bg); --cream-deep: var(--ca-color-bg-deep); --warm-accent: var(--ca-palette-warm); --ink: var(--ca-color-text); --muted: var(--ca-color-text-muted); --primary: var(--ca-color-primary); --primary-hover: var(--ca-color-primary-hover); --primary-soft: var(--ca-color-primary-soft); --shadow: var(--ca-shadow-lg); --primary-tint-08: rgba(36, 51, 43, 0.10); --primary-tint-06: rgba(36, 51, 43, 0.06); --primary-border-35: rgba(36, 51, 43, 0.35); --primary-border-25: rgba(36, 51, 43, 0.25); --ink-border-06: rgba(36, 51, 43, 0.08); --ink-border-12: rgba(36, 51, 43, 0.14); --ink-muted: var(--ca-color-text-muted); }