/* ============================================================ YATES INDUSTRIES — ENTERPRISE DESIGN TOKENS (v0.1) The single source of design truth. Every application consumes these tokens; no app hard-codes raw values. Brand kits override ONLY the --brand-* tokens (see /css/brand-*.css). ============================================================ */ :root { /* ---------- Brand hooks (overridden per company brand kit) ---------- */ --brand-primary: #2c3e50; /* Yates enterprise default (navy) */ --brand-primary-dark: #22303d; --brand-accent: #b8863b; /* Yates gold */ --brand-on-primary: #ffffff; /* ---------- Core palette (enterprise, brand-neutral) ---------- */ --color-navy: #2c3e50; --color-navy-2: #22303d; --color-blue: #3d6ea5; --color-blue-2: #4f9dff; --color-gold: #b8863b; --color-olive: #6b7f4e; /* ---------- Semantic / status ---------- */ --color-success: #3f9d6b; --color-warning: #d69a2d; --color-danger: #c65b53; --color-info: #3d6ea5; --color-success-bg: #e6f2ea; --color-warning-bg: #fbf1da; --color-danger-bg: #f8e5e3; --color-info-bg: #eaf0f8; /* ---------- Neutrals (light) ---------- */ --neutral-0: #ffffff; --neutral-50: #f7f6f2; --neutral-100:#f0efe8; --neutral-200:#e4e2d9; --neutral-300:#cfd4d8; --neutral-400:#9fb0c3; --neutral-500:#6b7d92; --neutral-600:#5c6b76; --neutral-700:#3a4650; --neutral-800:#23303a; --neutral-900:#141b24; /* ---------- Surface / text (light mode defaults) ---------- */ --surface-bg: var(--neutral-50); --surface-panel: var(--neutral-0); --surface-panel-2: var(--neutral-100); --surface-border: var(--neutral-200); --text-strong: var(--neutral-800); --text: var(--neutral-700); --text-dim: var(--neutral-600); --text-faint: var(--neutral-500); /* ---------- Typography ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: "Georgia", "Iowan Old Style", "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base:14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 44px; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal:1.5; --lh-relaxed:1.65; /* ---------- Spacing (4px base scale) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10:40px; --space-12:48px; --space-16:64px; /* ---------- Radius ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* ---------- Elevation / shadow ---------- */ --shadow-1: 0 1px 2px rgba(0,0,0,.06); --shadow-2: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05); --shadow-3: 0 10px 30px rgba(0,0,0,.12); /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(.2,0,0,1); --ease-emphasis: cubic-bezier(.2,0,0,1.2); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ---------- Layout ---------- */ --container-sm: 720px; --container-md: 1060px; --container-lg: 1280px; --sidebar-w: 232px; --grid-cols: 12; --grid-gap: var(--space-4); /* ---------- Z-index scale ---------- */ --z-base: 1; --z-sticky: 15; --z-nav: 20; --z-overlay: 40; --z-modal: 50; --z-toast: 60; /* ---------- Opacity ---------- */ --opacity-disabled: .5; --opacity-muted: .7; } /* ============================================================ DARK MODE — enterprise standard. Apply via or prefers-color-scheme. Only surface/text tokens flip; brand + status hues persist. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-bg: #0f141b; --surface-panel: #161d27; --surface-panel-2: #1c2530; --surface-border: #2a3644; --text-strong: #e7edf4; --text: #d2dbe4; --text-dim: #9fb0c3; --text-faint: #6b7d92; --brand-on-primary:#ffffff; --shadow-2: 0 2px 10px rgba(0,0,0,.35); } } [data-theme="dark"] { --surface-bg: #0f141b; --surface-panel: #161d27; --surface-panel-2: #1c2530; --surface-border: #2a3644; --text-strong: #e7edf4; --text: #d2dbe4; --text-dim: #9fb0c3; --text-faint: #6b7d92; --shadow-2: 0 2px 10px rgba(0,0,0,.35); } /* Respect reduced motion everywhere. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }