/* ═══════════════════════════════════════════════════════════════════ cobreOS "Concentric" — the one token block for the whole system. Linked from every page; the same tokens are mirrored into admin-shell.js so shell-injected chrome never renders unstyled. Two rules carry the look: 1. Concentric radii — a child is 4–8px tighter than its parent, never rounder. Containers are square-ish big radii, controls are capsules (999px). Nothing lands on the old 6/8/10px. 2. No glass. Depth is a hairline border plus a soft shadow. No backdrop-filter, no translucent panels, anywhere. Colours come in two themes; --accent comes from the tenant record (tenants.primary_color) and is written onto by theme.js before first paint. Everything else is fixed. ══════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces (dark, the default) ── */ --bg: #100E0C; /* window canvas behind the floating cards */ --surface: #1C1916; /* cards, top bar, nav panel */ --surface2: #28231F; /* insets: row hover, totals, inputs, secondary buttons */ --border: rgba(255, 255, 255, 0.08); --text: #F5F1EA; --muted: #9A8F82; --sh1: 0 1px 2px rgba(0, 0, 0, 0.25); /* card resting elevation */ --sh2: 0 12px 32px rgba(0, 0, 0, 0.35); /* nav panel, overlays */ --sh-modal: 0 32px 80px rgba(0, 0, 0, 0.45); /* ── Accent ── theme.js sets --accent-dark / --accent-light from the tenant's primary_color. The fallbacks here are Pedro's copper, so a page still looks right if the settings call is slow or fails. */ --accent: var(--accent-dark, #D7942C); --accent-soft: var(--accent-soft-dark, rgba(215, 148, 44, 0.15)); /* ── Semantic ── */ --green: #30D158; /* ready, available, confirmed, online, positive */ --red: #FF453A; /* needs action, void, sold out, no-show, overtime */ --yellow: #F7C43E; /* waiting, warning, bartender */ --blue: #4A90D9; /* in progress, seated, PM shift, food runner */ --teal: #40C8B0; /* app orders, hostess, informational */ --indigo: #7A6EE6; /* live orders needing action */ --purple: #9B59B6; /* busser */ /* Tints — the same semantic colour at chip strength (~14%). */ --green-soft: rgba(48, 209, 88, 0.14); --red-soft: rgba(255, 69, 58, 0.14); --yellow-soft: rgba(247, 196, 62, 0.14); --blue-soft: rgba(74, 144, 217, 0.14); --teal-soft: rgba(64, 200, 176, 0.14); --indigo-soft: rgba(122, 110, 230, 0.14); --purple-soft: rgba(155, 89, 182, 0.14); /* ── Radius scale — steps down, never up ── */ --r-window: 34px; /* page frame on framed/phone layouts */ --r-nav: 28px; /* floating nav panel */ --r-modal: 30px; --r-card-lg: 26px; /* order card, category block, panel */ --r-card: 24px; /* stat card, dashboard panel */ --r-bar: 22px; /* top bar, action bar */ --r-row: 18px; /* inset row inside a card */ --r-inset: 14px; /* tight inset: check line, nav item, input */ --r-tile: 15px; /* 44px icon tile / square icon button */ --r-pill: 999px; /* every control that isn't a container */ /* ── Type ── */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; /* ── Motion ── */ --ease-panel: cubic-bezier(.32, .72, 0, 1); /* Native controls — date/time pickers, select popups, scrollbars — follow the theme too, so a time field doesn't open a white panel in dark mode. */ color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --bg: #F2EFE9; --surface: #FFFFFF; --surface2: #F4F0EA; --border: rgba(30, 20, 10, 0.09); --text: #1F1A14; --muted: #8A7E70; --sh1: 0 1px 2px rgba(30, 20, 10, 0.06); --sh2: 0 12px 32px rgba(30, 20, 10, 0.10); --sh-modal: 0 32px 80px rgba(30, 20, 10, 0.22); --accent: var(--accent-light, #B67310); --accent-soft: var(--accent-soft-light, rgba(182, 115, 16, 0.12)); /* Darkened for contrast against white — same meanings. */ --green: #248A3D; --red: #D70015; --yellow: #96700A; --blue: #2F6DB5; --teal: #0E7C6E; --indigo: #5348B8; --purple: #7B3F98; --green-soft: rgba(36, 138, 61, 0.12); --red-soft: rgba(215, 0, 21, 0.10); --yellow-soft: rgba(150, 112, 10, 0.12); --blue-soft: rgba(47, 109, 181, 0.12); --teal-soft: rgba(14, 124, 110, 0.12); --indigo-soft: rgba(83, 72, 184, 0.12); --purple-soft: rgba(123, 63, 152, 0.12); } /* ── Base ────────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 500; -webkit-font-smoothing: antialiased; transition: background .25s ease; } /* Nothing in the system goes above 700. */ h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.3px; } /* Never the browser's own focus ring. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Money, counts and clocks stop jittering as they tick. */ .c-nums, .c-money { font-variant-numeric: tabular-nums; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } /* ── Card ────────────────────────────────────────────────────────── */ /* A card holding a LIST takes .c-card--list: 10px padding so its rows, rounded one step tighter, read as inset tiles rather than table rows. A card holding prose or a chart keeps the default 18px padding and rounds nothing inside it. */ .c-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh1); padding: 18px; } .c-card--lg { border-radius: var(--r-card-lg); } .c-card--list { padding: 10px; } /* Header row: the gap does the separating, so no bottom border. */ .c-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 8px; } .c-card--list > .c-card-head { padding: 10px 12px 8px; } .c-card-head h2, .c-card-head h3, .c-card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); } .c-card-head > .c-btn, .c-card-head > .c-actions { margin-left: auto; } /* Uppercase section label. */ .c-label { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); } /* A rule only where a list genuinely needs one — indented past the leading icon, never full-bleed. */ .c-rule { height: 1px; background: var(--border); margin-left: 58px; } /* ── Row ─────────────────────────────────────────────────────────── */ .c-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-inset); transition: background .15s; } .c-row:hover { background: var(--surface2); } .c-row--tile { border-radius: var(--r-row); background: var(--surface2); } /* ── Buttons ─────────────────────────────────────────────────────── */ .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border: none; border-radius: var(--r-pill); background: var(--accent); color: #fff; /* on a solid accent fill, always white */ font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: filter .15s, background .15s, color .15s, border-color .15s; } .c-btn:hover { filter: brightness(1.08); } .c-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; } .c-btn--secondary { background: var(--surface2); border: 1px solid var(--border); color: var(--text); } .c-btn--soft { background: var(--accent-soft); color: var(--accent); } .c-btn--ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); } .c-btn--ghost:hover { color: var(--text); } .c-btn--danger { background: transparent; border: 1px solid rgba(255, 69, 58, .4); color: var(--red); } .c-btn--danger:hover { background: var(--red-soft); filter: none; } .c-btn--green { background: var(--green); color: #fff; } .c-btn--block { width: 100%; } .c-btn--lg { padding: 13px 22px; font-size: 13px; } /* Square icon button — a rounded square, one step tighter than its card. */ .c-icon-btn { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-tile); background: var(--surface2); border: 1px solid var(--border); color: var(--text); cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; } .c-icon-btn:hover { color: var(--accent); } .c-icon-btn svg { width: 20px; height: 20px; } /* Small in-card actions are round instead. */ .c-icon-btn--round { width: 32px; height: 32px; border-radius: var(--r-pill); } /* Press feedback, kept from the POS. */ .tap { transition: transform .06s; } .tap:active { transform: scale(0.97); } /* ── Segmented control / tabs / filter pills ─────────────────────── */ .c-seg { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-pill); } .c-seg > button, .c-seg > a, .c-seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: none; background: transparent; border-radius: var(--r-pill); color: var(--muted); font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .c-seg > button:hover, .c-seg-opt:hover { color: var(--text); } .c-seg > .active, .c-seg-opt.active { background: var(--accent); color: #fff; } /* Lifted-white variant, used on the Dashboard chart control. */ .c-seg--lift > .active { background: var(--surface); color: var(--text); box-shadow: var(--sh1); } /* A count inside a tab is its own nested pill. */ .c-seg-count { padding: 1px 7px; border-radius: var(--r-pill); background: var(--border); color: inherit; font-size: 10px; font-weight: 700; } /* ── Status chip ─────────────────────────────────────────────────── */ /* Tint fill at ~14%, solid colour as text, no border. */ .c-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; letter-spacing: 0.4px; background: var(--surface2); color: var(--muted); white-space: nowrap; } .c-chip--accent { background: var(--accent-soft); color: var(--accent); } .c-chip--green { background: var(--green-soft); color: var(--green); } .c-chip--red { background: var(--red-soft); color: var(--red); } .c-chip--yellow { background: var(--yellow-soft); color: var(--yellow); } .c-chip--blue { background: var(--blue-soft); color: var(--blue); } .c-chip--teal { background: var(--teal-soft); color: var(--teal); } .c-chip--indigo { background: var(--indigo-soft); color: var(--indigo); } .c-chip--purple { background: var(--purple-soft); color: var(--purple); } .c-chip--solid { background: var(--accent); color: #fff; } /* ── Icon tiles ──────────────────────────────────────────────────── */ /* Rounded squares, never circles. The radius follows the size. */ .c-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-tile); background: var(--accent-soft); font-size: 20px; font-weight: 700; } .c-tile--30 { width: 30px; height: 30px; border-radius: 11px; font-size: 13px; } .c-tile--34 { width: 34px; height: 34px; border-radius: 12px; font-size: 14px; } .c-tile--40 { width: 40px; height: 40px; border-radius: 14px; font-size: 18px; } .c-tile--52 { width: 52px; height: 52px; border-radius: 18px; font-size: 24px; } /* ── Inputs ──────────────────────────────────────────────────────── */ .c-input, .c-select, .c-textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-inset); padding: 11px 14px; color: var(--text); font-family: var(--font); font-size: 13px; font-weight: 500; outline: none; transition: border-color .15s; } .c-input:focus, .c-select:focus, .c-textarea:focus { border-color: var(--accent); } .c-input::placeholder, .c-textarea::placeholder { color: var(--muted); } .c-textarea { resize: vertical; min-height: 84px; line-height: 1.5; } /* Search is a capsule with a leading glyph. */ .c-input--search { border-radius: var(--r-pill); padding-left: 38px; } /* ── Modal ───────────────────────────────────────────────────────── */ /* Backdrop is flat black — no blur, no frosting. */ .c-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .c-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-modal); box-shadow: var(--sh-modal); padding: 8px; width: min(560px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; } /* Header and footer stay put; only the middle scrolls. */ .c-modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; flex-shrink: 0; } .c-modal-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; flex: 1; min-width: 0; } .c-modal-body { flex: 1; overflow-y: auto; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; } .c-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px 14px; flex-shrink: 0; } .c-modal-close { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--surface2); border: none; color: var(--muted); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .c-modal-close:hover { color: var(--text); } /* ── Theme toggle ────────────────────────────────────────────────── */ .c-theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface2); border: 1px solid var(--border); color: var(--muted); font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .c-theme-toggle:hover { color: var(--text); } /* ── Motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }