/* INTUITONE Design System — token layer (single source of truth). * DESIGN.md §2-§4 · INTUITONEUI.md §2. Components read these variables, never * literal hex. Changing a token re-themes the whole platform (Back Office, * Super Admin console, WebPOS SPA). * * No build pipeline exists in this repo (Tailwind is a committed prebuilt * artifact), so this file is served directly as public/css/intuitone/tokens.css * — keep the two byte-identical until a real asset build is introduced. */ :root { /* Brand */ --in-primary:#1D4ED8; --in-primary-hover:#1A44BE; --in-primary-50:#EFF4FF; --in-primary-100:#DCE7FF; --in-accent:#0EA5E9; /* Neutrals */ --in-fg:#0F172A; --in-fg-muted:#475569; --in-fg-subtle:#94A3B8; --in-bg:#F8FAFC; --in-surface:#FFFFFF; --in-surface-2:#F1F5F9; --in-border:#E2E8F0; --in-border-strong:#CBD5E1; /* Semantic (fg / bg-soft) */ --in-success:#15803D; --in-success-bg:#DCFCE7; --in-warning:#B45309; --in-warning-bg:#FEF3C7; --in-danger:#B91C1C; --in-danger-bg:#FEE2E2; --in-info:#1D4ED8; --in-info-bg:#DBEAFE; /* Radius */ --in-radius-sm:6px; --in-radius:8px; --in-radius-lg:12px; --in-radius-pill:9999px; /* Elevation */ --in-e1:0 1px 2px rgba(15,23,42,.06); --in-e2:0 4px 12px rgba(15,23,42,.08); --in-e3:0 12px 32px rgba(15,23,42,.12); --in-ring:0 0 0 2px var(--in-surface),0 0 0 4px var(--in-primary); /* Type + motion */ --in-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --in-motion:180ms cubic-bezier(.2,.8,.2,1); /* Spacing scale (4px base) */ --in-s1:2px; --in-s2:4px; --in-s3:6px; --in-s4:8px; --in-s5:12px; --in-s6:16px; --in-s7:20px; --in-s8:24px; --in-s9:32px; --in-s10:40px; --in-s11:48px; --in-s12:64px; } /* Dark theme — first-class. Applied via .theme-dark on or a container. */ .theme-dark { --in-fg:#E5E7EB; --in-fg-muted:#9CA3AF; --in-fg-subtle:#6B7280; --in-bg:#0B1220; --in-surface:#111827; --in-surface-2:#0F172A; --in-border:#1F2937; --in-border-strong:#374151; --in-primary:#3B82F6; --in-e1:0 0 0 1px #1F2937; --in-e2:0 4px 12px rgba(0,0,0,.4); --in-e3:0 12px 32px rgba(0,0,0,.5); } /* Super Admin console accent identity — same components, distinct hue. */ .theme-console { --in-primary:#4F46E5; --in-primary-hover:#4338CA; --in-accent:#818CF8; } .theme-console.theme-dark { --in-primary:#818CF8; } @media (prefers-reduced-motion: reduce) { :root { --in-motion:0ms; } }