/* ============================================================ MILKY GLASS THEME — FIFO-ENGINE Soft frosted glass, warm milky whites, subtle depth Colors only. Structure lives in /layout/base.css ============================================================ */ /* v2.0 2026-07-21 — contrast sweep User feedback: text and surfaces sit on similarly-toned backgrounds so values in tables/dropdowns are hard to read on milky-glass. Bumped: • background hue moved slightly cooler/darker so translucent white surfaces contrast visibly against the page, • surface opacity raised (0.70→0.92 etc.) so tables/cards no longer bleed into the page, • muted text darkened (#9aa0b8 → #4a5175) to hit ≥ 4.7:1 on the new surfaces, • secondary text darkened (#5a6080 → #383d5c). Every accent kept at its original hue but at a saturation the frosted surfaces can support without washing out. */ :root { --color-bg: #dde1ee; --color-bg-secondary: #cfd4e6; --color-surface: rgba(255,255,255,0.94); --color-surface-hover: rgba(255,255,255,1.00); --color-glass: rgba(255,255,255,0.82); --color-glass-border: rgba(120,130,170,0.35); --backdrop-blur: blur(20px); --color-text: #0f1226; --color-text-secondary:#383d5c; --color-text-muted: #4a5175; --color-text-inverse: #ffffff; /* aliases used by page-level components (p28/29/30 readability sweep) — same values as the canonical tokens above, kept in sync intentionally */ --color-text-primary: var(--color-text); --color-text-muted-aa: #6b7190; /* ~4.8:1 on white/surface-elevated — AA (readability sweep) */ --color-surface-elevated: #ffffff; --color-surface-header: rgba(255,255,255,0.85); --color-icon-primary: #4338ca; /* indigo, ~6.9:1 on --color-surface-elevated — AA */ --color-code-bg: rgba(30,34,54,0.06); --color-code-fg: #3730a3; /* ~7.4:1 on --color-code-bg over surface — AA */ --select-arrow: url("data:image/svg+xml;utf8,"); /* solid, AA-guaranteed badge pill colors for count/status pills (readability sweep) — distinct from the tinted --color-*-light backgrounds, which read too low-contrast against their own text on light themes. */ --badge-count-success-bg: #047857; --badge-count-success-fg: #ffffff; --badge-count-warning-bg: #b45309; --badge-count-warning-fg: #ffffff; /* slot-type badge text colors (readability sweep) — AA-checked against --color-surface-elevated on this theme; badge bg stays a subtle tint built from the same hue at low opacity (see page CSS), so only the TEXT color needs to be theme-tuned for contrast. */ --slot-type-datetime: #0277bd; --slot-type-text: #6d28d9; --slot-type-number: #b45309; --slot-type-money: #047857; --slot-type-user-ref: #c2410c; --slot-type-selectable: #7e22ce; --slot-type-status: #1d4ed8; --slot-type-calculated: #be185d; --slot-type-boolean: #475569; --slot-type-file-ref: #b91c1c; --sidebar-bg: rgba(255,255,255,0.92); --sidebar-border: rgba(120,130,170,0.35); --sidebar-width: 240px; --sidebar-collapsed-width: 0px; --sidebar-item-hover: rgba(99,102,241,0.16); --sidebar-item-active: rgba(99,102,241,0.24); --sidebar-section-color:#4a5175; --sidebar-text: #22273f; --sidebar-text-active: #4338ca; --topbar-bg: rgba(255,255,255,0.94); --topbar-border: rgba(120,130,170,0.35); --topbar-height: 56px; --topbar-text: #0f1226; --color-primary: #6366f1; --color-primary-hover: #818cf8; --color-primary-light: rgba(99,102,241,0.12); --color-primary-text: #ffffff; --color-success: #10b981; --color-success-light: rgba(16,185,129,0.12); --color-warning: #f59e0b; --color-warning-light: rgba(245,158,11,0.12); --color-danger: #ef4444; --color-danger-light: rgba(239,68,68,0.12); --color-info: #3b82f6; --color-info-light: rgba(59,130,246,0.12); --border-color: rgba(120,130,170,0.40); --border-radius-sm: 8px; --border-radius: 12px; --border-radius-lg: 18px; --border-radius-xl: 28px; --shadow-sm: 0 2px 8px rgba(99,102,241,0.07), 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 4px 20px rgba(99,102,241,0.10), 0 2px 8px rgba(0,0,0,0.07); --shadow-lg: 0 8px 36px rgba(99,102,241,0.14), 0 4px 16px rgba(0,0,0,0.09); --shadow-glass:0 4px 24px rgba(255,255,255,0.50), inset 0 1px 0 rgba(255,255,255,0.80); --card-bg: rgba(255,255,255,0.96); --card-border: rgba(120,130,170,0.38); --card-shadow: 0 4px 24px rgba(99,102,241,0.10), inset 0 1px 0 rgba(255,255,255,0.80); --card-radius: 18px; --btn-primary-bg: rgba(99,102,241,0.90); --btn-primary-hover: rgba(129,140,248,0.95); --btn-primary-text: #ffffff; --btn-secondary-bg: rgba(255,255,255,0.98); --btn-secondary-hover: rgba(240,242,255,1.00); --btn-secondary-text: #0f1226; --btn-secondary-border:rgba(120,130,170,0.45); --btn-danger-bg: rgba(239,68,68,0.85); --btn-danger-hover: rgba(248,113,113,0.95); --btn-danger-text: #ffffff; --btn-radius: 10px; --btn-height: 36px; --btn-padding: 0 16px; --btn-font-size: 0.875rem; --btn-font-weight: 500; --input-bg: #ffffff; --input-border: rgba(120,130,170,0.55); --input-border-focus: #4338ca; --input-text: #0f1226; --input-placeholder: #6b7190; --input-radius: 10px; --input-height: 38px; --input-padding: 0 12px; --input-shadow-focus: 0 0 0 3px rgba(99,102,241,0.16), 0 2px 8px rgba(99,102,241,0.10); --table-bg: #ffffff; --table-header-bg: #edeff8; --table-header-text: #22273f; --table-row-hover: rgba(99,102,241,0.10); --table-border: rgba(120,130,170,0.30); --table-text: #0f1226; --table-radius: 12px; --badge-active-bg: rgba(16,185,129,0.22); --badge-active-text: #04613e; --badge-inactive-bg: rgba(90,96,120,0.22); --badge-inactive-text: #2b3050; --badge-pending-bg: rgba(245,158,11,0.24); --badge-pending-text: #8a4a06; --badge-danger-bg: rgba(239,68,68,0.22); --badge-danger-text: #991b1b; --badge-radius: 20px; --badge-padding: 2px 10px; --badge-font-size: 0.75rem; --scrollbar-track: rgba(232,234,242,0.60); --scrollbar-thumb: rgba(99,102,241,0.22); --scrollbar-thumb-hover:rgba(99,102,241,0.42); --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --line-height: 1.6; --transition: all 0.18s ease; --transition-fast: all 0.10s ease; --sidebar-transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease, width 0.22s cubic-bezier(0.4,0,0.2,1); /* ── ContainerBox engine vars (M11, v2.7) — Milky Glass: soft translucent surfaces, warm pastel-harmonized chips, contrast-checked against the light frosted background. ── */ --tree-root-bg: #eef0f7; --tree-box-bg: rgba(255,255,255,0.72); --tree-box-border: rgba(255,255,255,0.85); --tree-box-title: #1e2235; /* ~14.8:1 on box-bg — AA/AAA */ --tree-box-muted: #475569; /* ~7.3:1 on box-bg — AA */ --tree-accent: #6366f1; --tree-arrow: #d6668a; /* warm rose, distinct from pastel chips */ --tree-l4-color: #b45309; /* amber, darkened for contrast */ --tree-l3-color: #0f766e; /* muted teal */ --tree-l2-color: #4338ca; /* indigo */ --tree-content-color: #be185d; /* rose */ --tree-chip-bg: rgba(99,102,241,0.14); --tree-chip-text: #1e2235; /* dark label on light tinted chip */ }