/** * Akel Tools Design System — Tokens * Quiet Luxury direction. Single source of truth for color, type, spacing, * motion, elevation, and the glass recipe. * * Operating principle: "Glass on chrome, solid for content." * Default surfaces are opaque. .at-glass is opt-in for sidebar, top bar, * modals, command palette, and dashboard hero only. * * Theme switching via data-theme on (see /_core/theme.js). */ :root { /* === Brand =========================================================== */ --brand-navy: #00244d; --brand-navy-2: #06325f; --brand-navy-3: #1e3260; --brand-accent: #379bd7; --brand-accent-hover: #2789c7; --brand-accent-soft: rgba(55, 155, 215, 0.12); --brand-success: #3d8b6a; --brand-success-soft: rgba(61, 139, 106, 0.14); --brand-success-text: #235e48; --brand-danger: #d44c62; --brand-danger-soft: rgba(212, 76, 98, 0.14); --brand-danger-text: #8a1f2c; --brand-warning: #b45309; --brand-warning-soft: rgba(180, 83, 9, 0.12); --brand-info: var(--brand-accent); /* === Typography ====================================================== */ --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-min: 14px; --text-xs: 14px; --text-sm: 14px; --text-base: 14px; --text-md: 14px; /** Uppercase nav labels + uppercase badges only — see DESIGN.md Typography */ --text-caps: 11px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 44px; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-tighter: -0.03em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.08em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* === Spacing (4px grid) ============================================== */ --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: 40px; --space-9: 56px; --space-10: 80px; /* === Breakpoints (for reference in @media; use px/em in queries) ===== */ --bp-xs: 30em; --bp-sm: 30em; --bp-md: 48em; --bp-lg: 64em; --bp-xl: 80em; --touch-min: 44px; /* === Radius (no rounded corners — square edges everywhere) =========== */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0; /* === Motion ========================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 240ms; /* === Z-index scale =================================================== */ --z-base: 1; --z-sticky: 100; --z-popover: 200; --z-tooltip: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-toast: 600; /* === Focus + backdrop ================================================ */ --focus-ring: 0 0 0 3px var(--brand-accent-soft); --backdrop: rgba(0, 36, 77, 0.55); /* === Icon sizes ====================================================== */ --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 24px; /* === Container widths ================================================ */ --container-sm: 640px; --container-md: 960px; --container-lg: 1280px; --container-xl: 1600px; /* === Light mode (default) ============================================ */ --surface-canvas: #f7f8fa; --surface-elevated: #ffffff; --surface-subtle: #f0f3f7; --surface-sunken: #ebeef3; --surface-inverse: #0b0d11; --border-default: rgba(0, 36, 77, 0.1); --border-strong: rgba(0, 36, 77, 0.18); --border-focus: var(--brand-accent); --text-primary: #00244d; --text-secondary: #4a5a70; --text-tertiary: #8295ac; --text-inverse: #ffffff; --text-link: var(--brand-accent); --shadow-sm: 0 1px 2px rgba(0, 36, 77, 0.04); --shadow-md: 0 4px 12px rgba(0, 36, 77, 0.06); --shadow-lg: 0 12px 32px rgba(0, 36, 77, 0.1); --shadow-xl: 0 24px 64px rgba(0, 36, 77, 0.14); /* Glass recipe — chrome only */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.86); --glass-blur: blur(20px) saturate(180%); --glass-border: 1px solid rgba(255, 255, 255, 0.5); --glass-border-inner: inset 0 1px 0 rgba(255, 255, 255, 0.5); --glass-shadow: 0 12px 40px rgba(0, 36, 77, 0.12); /* Canvas gradient for backgrounds that need depth (dashboard, login chrome) */ --canvas-gradient: radial-gradient(ellipse at 20% 0%, rgba(55, 155, 215, 0.08), transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(0, 36, 77, 0.06), transparent 50%), linear-gradient(180deg, #f7f8fa 0%, #eef2f7 100%); /* === Collections ==================================================== */ /* Canonical brand hex matches Trade Portal / Forge / CP Interactive. * List order everywhere (filters, chips, groups): Gold, Emerald, Ruby, * Sapphire, Diamond — see docs/DESIGN.md § Collections. * Each gets: base (border/accent), text-light (label on light bg), * text-dark (label on dark bg), tint (selected/hover wash). */ --coll-gold: #ddbc69; --coll-gold-text-light: #7a5a14; --coll-gold-text-dark: #e5c97a; --coll-gold-tint: rgba(221, 188, 105, 0.12); --coll-emerald: #5f8d77; --coll-emerald-text-light: #2e5240; --coll-emerald-text-dark: #8fbfa6; --coll-emerald-tint: rgba(95, 141, 119, 0.12); --coll-ruby: #d44c62; --coll-ruby-text-light: #8a1f2c; --coll-ruby-text-dark: #e58b98; --coll-ruby-tint: rgba(212, 76, 98, 0.12); --coll-sapphire: #4875a2; --coll-sapphire-text-light: #1e4671; --coll-sapphire-text-dark: #7fa8ce; --coll-sapphire-tint: rgba(72, 117, 162, 0.12); --coll-diamond: #8e8e86; --coll-diamond-text-light: #4a4a44; --coll-diamond-text-dark: #c9c9c2; --coll-diamond-tint: rgba(142, 142, 134, 0.12); /* Resolved text per theme — chips read these */ --coll-gold-text: var(--coll-gold-text-light); --coll-emerald-text: var(--coll-emerald-text-light); --coll-ruby-text: var(--coll-ruby-text-light); --coll-sapphire-text: var(--coll-sapphire-text-light); --coll-diamond-text: var(--coll-diamond-text-light); /* === Start groups (01–25) =========================================== */ /* Outlined badges in tables and Start Groups boards. Shared across apps. */ --sg-01: #2980b9; --sg-02: #c0392b; --sg-03: #27ae60; --sg-04: #8e44ad; --sg-05: #d35400; --sg-06: #1a5276; --sg-07: #f39c12; --sg-08: #148f77; --sg-09: #e91e63; --sg-10: #5b2c6f; --sg-11: #16a085; --sg-12: #e74c3c; --sg-13: #2c3e50; --sg-14: #f1c40f; --sg-15: #6c3483; --sg-16: #d4ac0d; --sg-17: #117a65; --sg-18: #cb4335; --sg-19: #1f618d; --sg-20: #b7950b; --sg-21: #9b59b6; --sg-22: #1abc9c; --sg-23: #c0392b; --sg-24: #7d6608; --sg-25: #1b4f72; --sg-fallback: #6b7280; /* === Construction schedule + Home progress (sequential → green) ========= * Build schedule stages (Trade Portal). Vision Home Progress maps as below. * Pills: bg + fg + accent (accent = column header / left stripe). * See docs/DESIGN.md — Home progress milestones. */ --hp-stage-color-selection-bg: #eef4fb; --hp-stage-color-selection-fg: #06325f; --hp-stage-color-selection-accent: #379bd7; --cs-stage-pre-construction-bg: #eef2f7; --cs-stage-pre-construction-fg: #475569; --cs-stage-pre-construction-accent: #64748b; --cs-stage-shell-bg: #e6f0fb; --cs-stage-shell-fg: #1d4ed8; --cs-stage-shell-accent: #3b82f6; --cs-stage-framing-rough-bg: #ebe9fd; --cs-stage-framing-rough-fg: #4338ca; --cs-stage-framing-rough-accent: #6366f1; --cs-stage-drywall-bg: #f1e9fb; --cs-stage-drywall-fg: #6d28d9; --cs-stage-drywall-accent: #8b5cf6; --cs-stage-exterior-interior-finishes-bg: #fdf2dc; --cs-stage-exterior-interior-finishes-fg: #b45309; --cs-stage-exterior-interior-finishes-accent: #f59e0b; --cs-stage-final-inspections-bg: #e0f5f1; --cs-stage-final-inspections-fg: #0f766e; --cs-stage-final-inspections-accent: #14b8a6; --cs-stage-completion-bg: #e3f5e8; --cs-stage-completion-fg: #15803d; --cs-stage-completion-accent: #22c55e; /* Sale status pills (Forge homesites + Vision) */ --st-sale-available-bg: #ccfbf1; --st-sale-available-fg: #0f766e; --st-sale-available-border: #5eead4; --st-sale-unavailable-bg: #ffe4e6; --st-sale-unavailable-fg: #be123c; --st-sale-unavailable-border: #fda4af; --st-sale-reserved-bg: #dbeafe; --st-sale-reserved-fg: #1d4ed8; --st-sale-reserved-border: #93c5fd; --st-sale-sold-bg: #bbf7d0; --st-sale-sold-fg: #14532d; --st-sale-sold-border: #4ade80; --st-sale-spec-bg: #fef3c7; --st-sale-spec-fg: #b45309; --st-sale-spec-border: #fcd34d; --st-sale-spec-accent: #f59e0b; --st-sale-model-bg: #fae8ff; --st-sale-model-fg: #86198f; --st-sale-model-border: #f0abfc; --st-sale-model-accent: #d946ef; --st-sale-stay-play-bg: #fce7f3; --st-sale-stay-play-fg: #be185d; --st-sale-stay-play-border: #f9a8d4; --st-sale-stay-play-accent: #ec4899; --st-sale-closed-bg: #ede9fe; --st-sale-closed-fg: #5b21b6; --st-sale-closed-border: #c4b5fd; /* Deposit types — Vision Deposits tab (Reservation, Contract, Option) */ --st-deposit-reservation-bg: #fef3c7; --st-deposit-reservation-fg: #b45309; --st-deposit-reservation-border: #fcd34d; --st-deposit-reservation-accent: #f59e0b; --st-deposit-contract-bg: #dbeafe; --st-deposit-contract-fg: #1d4ed8; --st-deposit-contract-border: #93c5fd; --st-deposit-contract-accent: #2563eb; --st-deposit-option-bg: #ede9fe; --st-deposit-option-fg: #5b21b6; --st-deposit-option-border: #c4b5fd; --st-deposit-option-accent: #7c3aed; /* Debit / credit — Ledger normal balance and Dr/Cr labels */ --st-debit-bg: rgba(55, 155, 215, 0.12); --st-debit-fg: #1e6a9a; --st-debit-border: rgba(55, 155, 215, 0.28); --st-credit-bg: rgba(61, 139, 106, 0.14); --st-credit-fg: #235e48; --st-credit-border: rgba(61, 139, 106, 0.28); /* Color Selection workflow — Vision Color Selections tab section headers */ --st-sel-status-revision-required-header: #dc2626; --st-sel-status-revision-required-accent: #dc2626; --st-sel-status-not-started-header: #64748b; --st-sel-status-not-started-accent: #94a3b8; --st-sel-status-in-progress-header: #ea580c; --st-sel-status-in-progress-accent: #f97316; --st-sel-status-awaiting-signoff-header: #2563eb; --st-sel-status-awaiting-signoff-accent: #3b82f6; --st-sel-status-ready-for-review-header: #ca8a04; --st-sel-status-ready-for-review-accent: #eab308; --st-sel-status-completed-header: #16a34a; --st-sel-status-completed-accent: #22c55e; --st-sel-status-spec-header: #b45309; --st-sel-status-spec-accent: #f59e0b; /* DocuSign envelope statuses — Vision DocuSign tab */ --st-ds-envelope-sent-bg: #e8f0fe; --st-ds-envelope-sent-fg: #1967d2; --st-ds-envelope-sent-border: rgba(25, 103, 210, 0.28); --st-ds-envelope-in-progress-bg: #ffedd5; --st-ds-envelope-in-progress-fg: #c2410c; --st-ds-envelope-in-progress-border: rgba(234, 88, 12, 0.28); --st-ds-envelope-void-bg: #fce8e6; --st-ds-envelope-void-fg: #c5221f; --st-ds-envelope-void-border: rgba(197, 34, 31, 0.28); } @keyframes at-spin { to { transform: rotate(360deg); } } @keyframes at-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes at-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes at-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* === Dark mode (true dark, not navy-glass) ============================= */ [data-theme="dark"] { --surface-canvas: #0b0d11; --surface-elevated: #14171d; --surface-subtle: #1a1e26; --surface-sunken: #0f1217; --surface-inverse: #ffffff; --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text-primary: #e8edf5; --text-secondary: #9bacc0; --text-tertiary: #5f6b7c; --text-inverse: #00244d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6); --brand-accent-soft: rgba(55, 155, 215, 0.18); --brand-success-soft: rgba(61, 139, 106, 0.22); --brand-success-text: #7dbe9c; --brand-danger-soft: rgba(212, 76, 98, 0.2); --brand-danger-text: #e58b98; --brand-warning-soft: rgba(180, 83, 9, 0.22); /* Chrome sits above canvas: slightly lighter than content, not navy-on-black */ --glass-bg: rgba(26, 30, 38, 0.92); --glass-bg-strong: rgba(36, 41, 52, 0.96); --glass-border: 1px solid rgba(255, 255, 255, 0.1); --glass-border-inner: inset 0 1px 0 rgba(255, 255, 255, 0.08); --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --canvas-gradient: radial-gradient(ellipse at 20% 0%, rgba(55, 155, 215, 0.06), transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(55, 155, 215, 0.04), transparent 50%), linear-gradient(180deg, #0b0d11 0%, #07090c 100%); --coll-gold-text: var(--coll-gold-text-dark); --coll-gold-tint: rgba(221, 188, 105, 0.16); --coll-emerald-text: var(--coll-emerald-text-dark); --coll-emerald-tint: rgba(95, 141, 119, 0.18); --coll-ruby-text: var(--coll-ruby-text-dark); --coll-ruby-tint: rgba(212, 76, 98, 0.16); --coll-sapphire-text: var(--coll-sapphire-text-dark); --coll-sapphire-tint: rgba(72, 117, 162, 0.18); --coll-diamond-text: var(--coll-diamond-text-dark); --coll-diamond-tint: rgba(142, 142, 134, 0.16); --backdrop: rgba(0, 0, 0, 0.65); --hp-stage-color-selection-bg: rgba(55, 155, 215, 0.18); --hp-stage-color-selection-fg: #93c5fd; --hp-stage-color-selection-accent: #379bd7; --cs-stage-pre-construction-bg: rgba(100, 116, 139, 0.22); --cs-stage-pre-construction-fg: #cbd5e1; --cs-stage-pre-construction-accent: #94a3b8; --cs-stage-shell-bg: rgba(59, 130, 246, 0.2); --cs-stage-shell-fg: #93c5fd; --cs-stage-shell-accent: #3b82f6; --cs-stage-framing-rough-bg: rgba(99, 102, 241, 0.2); --cs-stage-framing-rough-fg: #a5b4fc; --cs-stage-framing-rough-accent: #6366f1; --cs-stage-drywall-bg: rgba(139, 92, 246, 0.2); --cs-stage-drywall-fg: #c4b5fd; --cs-stage-drywall-accent: #8b5cf6; --cs-stage-exterior-interior-finishes-bg: rgba(245, 158, 11, 0.18); --cs-stage-exterior-interior-finishes-fg: #fcd34d; --cs-stage-exterior-interior-finishes-accent: #f59e0b; --cs-stage-final-inspections-bg: rgba(20, 184, 166, 0.18); --cs-stage-final-inspections-fg: #5eead4; --cs-stage-final-inspections-accent: #14b8a6; --cs-stage-completion-bg: rgba(34, 197, 94, 0.18); --cs-stage-completion-fg: #86efac; --cs-stage-completion-accent: #22c55e; --st-sale-available-bg: rgba(20, 184, 166, 0.2); --st-sale-available-fg: #5eead4; --st-sale-available-border: rgba(45, 212, 191, 0.45); --st-sale-unavailable-bg: rgba(244, 63, 94, 0.18); --st-sale-unavailable-fg: #fda4af; --st-sale-unavailable-border: rgba(251, 113, 133, 0.4); --st-sale-reserved-bg: rgba(59, 130, 246, 0.22); --st-sale-reserved-fg: #93c5fd; --st-sale-reserved-border: rgba(96, 165, 250, 0.45); --st-sale-sold-bg: rgba(34, 197, 94, 0.28); --st-sale-sold-fg: #4ade80; --st-sale-sold-border: rgba(34, 197, 94, 0.55); --st-sale-spec-bg: rgba(245, 158, 11, 0.22); --st-sale-spec-fg: #fcd34d; --st-sale-spec-border: rgba(251, 191, 36, 0.45); --st-sale-spec-accent: #f59e0b; --st-sale-model-bg: rgba(217, 70, 239, 0.22); --st-sale-model-fg: #f0abfc; --st-sale-model-border: rgba(232, 121, 249, 0.45); --st-sale-model-accent: #d946ef; --st-sale-stay-play-bg: rgba(236, 72, 153, 0.22); --st-sale-stay-play-fg: #f9a8d4; --st-sale-stay-play-border: rgba(244, 114, 182, 0.45); --st-sale-stay-play-accent: #ec4899; --st-sale-closed-bg: rgba(139, 92, 246, 0.2); --st-sale-closed-fg: #c4b5fd; --st-sale-closed-border: rgba(167, 139, 250, 0.4); --st-deposit-reservation-bg: rgba(245, 158, 11, 0.22); --st-deposit-reservation-fg: #fcd34d; --st-deposit-reservation-border: rgba(251, 191, 36, 0.45); --st-deposit-reservation-accent: #f59e0b; --st-deposit-contract-bg: rgba(59, 130, 246, 0.22); --st-deposit-contract-fg: #93c5fd; --st-deposit-contract-border: rgba(96, 165, 250, 0.45); --st-deposit-contract-accent: #3b82f6; --st-deposit-option-bg: rgba(139, 92, 246, 0.2); --st-deposit-option-fg: #c4b5fd; --st-deposit-option-border: rgba(167, 139, 250, 0.4); --st-deposit-option-accent: #7c3aed; --st-debit-bg: rgba(55, 155, 215, 0.18); --st-debit-fg: #7ec8ef; --st-debit-border: rgba(55, 155, 215, 0.4); --st-credit-bg: rgba(61, 139, 106, 0.22); --st-credit-fg: #8fd4b3; --st-credit-border: rgba(61, 139, 106, 0.4); --st-sel-status-revision-required-header: #ef4444; --st-sel-status-revision-required-accent: #f87171; --st-sel-status-not-started-header: #475569; --st-sel-status-not-started-accent: #94a3b8; --st-sel-status-in-progress-header: #f97316; --st-sel-status-in-progress-accent: #fb923c; --st-sel-status-awaiting-signoff-header: #3b82f6; --st-sel-status-awaiting-signoff-accent: #60a5fa; --st-sel-status-ready-for-review-header: #eab308; --st-sel-status-ready-for-review-accent: #facc15; --st-sel-status-completed-header: #22c55e; --st-sel-status-completed-accent: #4ade80; --st-sel-status-spec-header: #f59e0b; --st-sel-status-spec-accent: #fbbf24; --st-ds-envelope-sent-bg: rgba(59, 130, 246, 0.16); --st-ds-envelope-sent-fg: #93c5fd; --st-ds-envelope-sent-border: rgba(147, 197, 253, 0.35); --st-ds-envelope-in-progress-bg: rgba(249, 115, 22, 0.18); --st-ds-envelope-in-progress-fg: #fdba74; --st-ds-envelope-in-progress-border: rgba(253, 186, 116, 0.35); --st-ds-envelope-void-bg: rgba(212, 76, 98, 0.18); --st-ds-envelope-void-fg: #fca5a5; --st-ds-envelope-void-border: rgba(252, 165, 165, 0.35); } /* === Base reset for prototype shell ==================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: var(--text-min); line-height: var(--leading-normal); color: var(--text-primary); background: var(--surface-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea, optgroup { font-size: inherit; } small, sub, sup { font-size: inherit !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .text-xs, .text-sm { font-size: var(--text-min) !important; } /* === No rounded corners — global enforcement ========================== */ *, *::before, *::after { border-radius: 0 !important; } /* Toggle/switch controls — rounded track + circular thumb (only exception) */ .at-switch__track { border-radius: 11px !important; } .at-switch__thumb { border-radius: 50% !important; } .dm-toggle-switch, .dm-toggle-track, .toggle-slider, .pm-toggle-switch { border-radius: 999px !important; } .commissions-toggle-slider { border-radius: 6px !important; } .dm-toggle-switch::after, .dm-toggle-thumb, .toggle-slider::before, .toggle-slider:before, .pm-toggle-switch::after { border-radius: 50% !important; } .sdn-sale-data-tab .sdn-field-toggle-field .dm-toggle-track, .sdn-sale-data-tab .sdn-field-home-progress .sdn-home-progress-dm-toggle .dm-toggle-track { border-radius: 999px !important; } .sdn-sale-data-tab .sdn-field-toggle-field .dm-toggle-thumb, .sdn-sale-data-tab .sdn-field-home-progress .sdn-home-progress-dm-toggle .dm-toggle-thumb { border-radius: 50% !important; } /* Loading spinners — circular (exception to square-corner policy beside toggles above) */ :is( .at-spinner, .spinner, .dm-spinner, .dm-edit-hs-myakel-inline-compare-loading-spinner, .est-spinner, .clear-cache-spinner, .mh-spinner, .ods-login-btn-spinner, .tp-ack-submit-spinner, .insp-card-loader-spinner, .looks-big-spinner, .sd-plan-spinner, .ods-spinner-one, .sdn-sale-data-tab .sdn-overview-myakel-sync-spinner ) { border-radius: 50% !important; } .at-btn.is-loading::after, .loading::after, .ods-spinner-one::before { border-radius: 50% !important; }