/* ========================================================================== Anchor Ops - brand color system Day mode is the default. Night mode via . With no explicit data-theme, the OS preference (prefers-color-scheme) decides. One amber knob; neutrals, status, and surfaces derive from the tokens below. ========================================================================== */ :root { /* ---- Brand (mode-independent) ---- */ --ao-amber: #EA5D15; /* primary / CTA / accent */ /* Signature amber is ONE exact value (#EA5D15) in every state - rest, hover, active, focus. No darker/lighter variant. --accent-hover / --accent-hi below are kept as names for back-compat but resolve to the exact accent. */ --ao-amber-hover: #EA5D15; --ao-amber-tint: #FBE7D5; /* ---- Neutrals (mode-independent palette) ---- */ --ao-ink: #0E0E0F; --ao-charcoal: #1C1D20; --ao-slate: #6B6E76; --ao-mist: #E4E2DD; --ao-bone: #F7F5F1; --ao-white: #FFFFFF; /* ---- Status (mode-independent) ---- */ --ao-success: #1D9E75; --ao-warning: #EF9F27; --ao-danger: #E24B4A; --ao-info: #378ADD; /* expose as plain status names too */ --success: var(--ao-success); --warning: var(--ao-warning); --danger: var(--ao-danger); --info: var(--ao-info); --purple: #8B5CF6; /* accent is the same in both modes */ --accent: var(--ao-amber); --accent-hover: var(--ao-amber-hover); --accent-tint: var(--ao-amber-tint); --on-accent: #FFFFFF; } /* ========================================================================== Structural design tokens (Phase 1) - mode-independent, so :root covers both day and night. DEFINED ONLY here; not yet applied to markup (Phase 2+). Values mirror what both apps already use, so later adoption is shift-free. ========================================================================== */ :root { /* Spacing scale: 4 / 8 / 16 / 24 / 32 */ --space-1: 4px; --space-05: 2px; /* tag / pill vertical padding (below the main scale) */ --space-2: 8px; --space-2h: 12px; /* half-step for control padding (buttons/inputs/table cells) */ --space-3: 16px; --space-4: 24px; --space-5: 32px; /* Layout structure (Phase 6): content cap, page gutter, card-grid min column */ --content-max: 1280px; --gutter: var(--space-5); /* 32px horizontal page gutter */ --card-min: 180px; /* min width of a card in .ao-card-grid */ /* Radius scale: small / medium / large + pill (matches current usage) */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-pill: 99px; /* Type sizes (11-16 cover body text; 19/22 for headings) */ --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-body: 15px; --fs-lead: 16px; --fs-h2: 19px; --fs-h1: 22px; --fs-display: 32px; /* card metric numbers */ --fs-metric: 40px; /* big dashboard KPI numbers - oversized, tool-spec */ --fs-hero: 48px; /* hero KPI numbers on dashboards */ /* Weights. Numbers/headings run heavy (tool-brand: bold, confident). */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* oversized KPI numbers + display headings */ /* Line-heights */ --lh-none: 1; --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.55; /* ------------------------------------------------------------------------ GLOVE-SPEC field tokens (Phase 4). For future "works-with-work-gloves, outdoors, at-a-glance" screens. These are NEW variables only - no existing rule references them, so declaring them changes NOTHING on current pages. A later screen opts in by using them (e.g. min-height: var(--field-touch-min)). ------------------------------------------------------------------------ */ --field-touch-min: 56px; /* minimum tap target (any control) */ --field-touch-primary: 64px; /* primary action tap target (bigger) */ --field-gap: 12px; /* minimum gap BETWEEN adjacent tap targets */ --field-gap-lg: 16px; /* comfortable gap for stacked field controls */ --field-fs-body: 18px; /* minimum readable body text in the field */ --field-fs-label: 16px; /* secondary label text (still large) */ --field-fs-hero: 40px; /* hero numerals - 40px floor */ --field-fs-hero-xl: 56px; /* extra-large glove hero numeral */ --field-radius: 14px; /* touch-friendly corner radius */ --field-focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); /* One-amber-per-screen: this is the SINGLE sanctioned accent a field screen may use (exactly #EA5D15 via --accent). Intent, enforced by discipline: at most one element amber per screen. */ --field-accent: var(--accent); } /* ========================================================================== Shared component tokens (Phase 1.5) - mode-independent. Ported from the portal so both apps read one token system. Accent-relative values render identically in both modes (accent is the same #EA5D15). The dashboard does not reference these names (except --card2, defined per-mode below), so adding them here does not change the dashboard. ========================================================================== */ :root { /* Type families (per-app: only the portal references --sans/--serif; the dashboard keeps system-ui in its own CSS, so fonts stay per-app). */ --serif: "Inter","Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --sans: "Inter","Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* Radius (portal effective values; --radius-lg already defined above = 14px) */ --radius: 9px; --btn-radius: 9px; /* Accent-derived (palette-independent: depend only on --accent) */ --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent); --accent-line: color-mix(in srgb, var(--accent) 26%, transparent); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* ---- DAY (default) ------------------------------------------------------- */ :root, :root[data-theme="day"] { color-scheme: light; --bg: #EDEFF3; /* cool light page so white cards pop (was flat white) */ --surface: #FFFFFF; --panel: #F4F6F9; /* headers / sidebar / table head */ --card: #FFFFFF; --hover: #E6EAF1; --active: var(--ao-amber-tint); --chip: #E7EBF1; --chip-fg: #2E343F; /* strong chip text */ --line: #D5DAE3; --line2: #BFC7D3; --dot: #B3BCC9; /* canvas grid dots - darker than --line so they read on the light page */ --fg: #14171C; /* strong ink */ --mut: #495059; /* strong secondary (killed the washed slate) */ --mut2: #5D6470; --input-bg: #FFFFFF; --accent-tint-bg: var(--ao-amber-tint); /* Shared component tokens (Phase 1.5) - DAY */ --bg2: #F4F6F9; /* secondary surface (header / table head / inputs) */ --card2: #EEF1F6; /* alt card surface */ --accent-hi: var(--accent); /* exact #EA5D15 - never a darkened variant */ --glass: color-mix(in srgb, var(--bg2) 78%, transparent); --shadow-sm: 0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04); --shadow-card: 0 1px 2px rgba(16,24,40,.06),0 12px 28px -14px rgba(16,24,40,.22); --shadow-pop: 0 8px 16px -6px rgba(16,24,40,.14),0 24px 60px -24px rgba(16,24,40,.30); --shadow-btn: 0 1px 2px rgba(16,24,40,.16),0 6px 16px -8px color-mix(in srgb,var(--accent) 50%,transparent); --shadow-btn-h:0 2px 4px rgba(16,24,40,.18),0 14px 26px -8px color-mix(in srgb,var(--accent) 60%,transparent); } /* ---- NIGHT --------------------------------------------------------------- */ :root[data-theme="night"] { color-scheme: dark; --bg: #0A0B0D; /* deep ink so cards clearly lift off it */ --surface: #1E2026; --panel: #141518; --card: #1E2026; /* lifted card (was muddy #1C1D20) */ --hover: #2A2D34; --active: #3A2A1E; --chip: #2B2E35; --chip-fg: #D4D9E1; /* strong chip text */ --line: #333842; --line2: #474C57; --fg: #FFFFFF; --mut: #B7BDC7; /* strong secondary (killed the faint gray) */ --mut2: #929AA5; --input-bg: #17181C; --accent-tint-bg: #3A2417; /* Shared component tokens (Phase 1.5) - NIGHT */ --bg2: #141518; --card2: #2A2D34; --accent-hi: var(--accent); /* exact #EA5D15 - never a lightened variant */ --glass: color-mix(in srgb, var(--bg2) 70%, transparent); --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-card: 0 1px 2px rgba(0,0,0,.40),0 14px 34px -18px rgba(0,0,0,.72); --shadow-pop: 0 10px 24px -8px rgba(0,0,0,.55),0 30px 70px -28px rgba(0,0,0,.8); --shadow-btn: 0 1px 2px rgba(0,0,0,.45),0 8px 20px -10px color-mix(in srgb,var(--accent) 55%,transparent); --shadow-btn-h:0 2px 4px rgba(0,0,0,.5),0 16px 30px -10px color-mix(in srgb,var(--accent) 65%,transparent); } /* ---- OS dark fallback: only when the user has NOT chosen explicitly ------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0A0B0D; --surface: #1E2026; --panel: #141518; --card: #1E2026; --hover: #2A2D34; --active: #3A2A1E; --chip: #2B2E35; --chip-fg: #D4D9E1; --line: #333842; --line2: #474C57; --fg: #FFFFFF; --mut: #B7BDC7; --mut2: #929AA5; --input-bg: #17181C; --accent-tint-bg: #3A2417; /* Shared component tokens (Phase 1.5) - OS-dark fallback */ --bg2: #141518; --card2: #2A2D34; --accent-hi: var(--accent); /* exact #EA5D15 - never a lightened variant */ --glass: color-mix(in srgb, var(--bg2) 70%, transparent); --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-card: 0 1px 2px rgba(0,0,0,.40),0 14px 34px -18px rgba(0,0,0,.72); --shadow-pop: 0 10px 24px -8px rgba(0,0,0,.55),0 30px 70px -28px rgba(0,0,0,.8); --shadow-btn: 0 1px 2px rgba(0,0,0,.45),0 8px 20px -10px color-mix(in srgb,var(--accent) 55%,transparent); --shadow-btn-h:0 2px 4px rgba(0,0,0,.5),0 16px 30px -10px color-mix(in srgb,var(--accent) 65%,transparent); } } /* ---- Pills / status chips: legible in both modes via color-mix ----------- */ /* Shared base pill (Phase 3): rounded-rect + leading status dot, shared tokens. Color variants below tint bg/text/border per status. Used by both apps. */ .pill { display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-05) var(--space-2h); border-radius:var(--radius-sm); font-size:var(--fs-sm); font-weight:var(--fw-medium); border:1px solid transparent; white-space:nowrap; text-transform:capitalize; line-height:1.4; } .pill::before { content:""; width:6px; height:6px; border-radius:var(--radius-pill); background:currentColor; opacity:.9; } .pill.green { background: color-mix(in srgb, var(--success) 14%, transparent); color: color-mix(in srgb, var(--success) 72%, var(--fg)); border-color: color-mix(in srgb, var(--success) 34%, transparent); } .pill.blue { background: color-mix(in srgb, var(--info) 14%, transparent); color: color-mix(in srgb, var(--info) 72%, var(--fg)); border-color: color-mix(in srgb, var(--info) 34%, transparent); } .pill.red { background: color-mix(in srgb, var(--danger) 14%, transparent); color: color-mix(in srgb, var(--danger) 72%, var(--fg)); border-color: color-mix(in srgb, var(--danger) 34%, transparent); } .pill.amber { background: color-mix(in srgb, var(--warning) 16%, transparent); color: color-mix(in srgb, var(--warning) 72%, var(--fg)); border-color: color-mix(in srgb, var(--warning) 36%, transparent); } .pill.purple { background: color-mix(in srgb, var(--purple) 14%, transparent); color: color-mix(in srgb, var(--purple) 72%, var(--fg)); border-color: color-mix(in srgb, var(--purple) 34%, transparent); } .pill.gray { background: var(--chip); color: var(--chip-fg); border-color: var(--line2); } /* ========================================================================== Layout structure helpers (Phase 6). Arrangement only - no colors/fonts. Applied to pages one at a time; defining them here changes nothing until a page uses the class. Both apps share these. ========================================================================== */ /* Center the content column and cap its width with even side gutters. */ .ao-container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } /* Metric cards as an even grid that fills the row (no left-clustering). */ .ao-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr)); gap: var(--space-3); } /* Page header row: title left, primary action(s) right, on one line. */ .ao-page-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } /* Toolbar row: filters/tabs left, search right. */ .ao-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* Dashboard split: main ~2/3 + side ~1/3, collapses on narrow screens. */ .ao-split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); } @media (max-width: 900px) { .ao-split { grid-template-columns: 1fr; } } /* Consistent vertical section rhythm. */ .ao-section { margin-bottom: var(--space-5); } /* ---- Brand logo: show the right one for the mode (pure CSS) --------------- */ .ao-logo { height: 26px; width: auto; display: block; } .ao-logo-night { display: none; } :root[data-theme="night"] .ao-logo-day { display: none; } :root[data-theme="night"] .ao-logo-night { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .ao-logo-day { display: none; } :root:not([data-theme]) .ao-logo-night { display: block; } } /* ---- Theme toggle button (shared) ---------------------------------------- */ .ao-theme-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: var(--chip); color: var(--fg); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; line-height: 1; } .ao-theme-toggle:hover { border-color: var(--accent); } /* Auth screens (staff_auth.py) - extracted from inline style= (Phase 0b). These live in the shared theme because the auth pages load ONLY this stylesheet. */ .auth-qr{background:#fff;padding:8px;border-radius:8px} .auth-note{font-size:13px;color:var(--mut);margin:14px 0 6px} .auth-note.tight{margin:0 0 12px} .auth-center{display:flex;justify-content:center;margin:6px 0 14px} .auth-code{font-family:monospace;letter-spacing:.08em}