/* =========================================================================== LIQUID GLASS — tokens only --------------------------------------------------------------------------- Values approved on the design canvas (gate G1). This file is the whole theme: it defines the contract and nothing else. If a rule ever has to be added here, that means the contract is missing a token — add the token. The --crm-* scale is redefined here too, and every value in it is OPAQUE. assets/js/main.js:3899 reads --crm-surface-2 and --crm-ink with getComputedStyle and injects them into the TinyMCE iframe body, which has nothing behind it to show through; an rgba() there makes every editor in the CRM translucent over nothing. =========================================================================== */ /* :root a secas pierde contra el @media (prefers-color-scheme: dark) del CRM, que usa :root:not([data-theme="light"]). En una pagina sin el atributo -- el login -- eso dejaba ganar la paleta oscura del sistema. El :not() de abajo iguala la especificidad y el orden de carga hace el resto. */ :root:not([data-theme="dark"]), html[data-theme="light"] { color-scheme: light; /* opaque base scale */ --crm-canvas: #eef1f8; --crm-surface: #fbfcff; --crm-surface-2: #f5f7fd; --crm-surface-3: #f2f5fc; --crm-border: #e3e7f2; --crm-border-strong:#cfd6e8; --crm-ink: #111827; --crm-ink-2: #5a606b; --crm-ink-3: #5f6673; /* darkened: the stock #8a909b fails AA on glass */ --crm-brand: #2563eb; --crm-brand-soft: #eef4ff; /* Status pairs of their own. Inherited from the CRM (#16a34a, #d97706, #dc2626 on their -50 fills) they measured 2.9-3.0:1 on the soft fill, below AA in every pill and label that uses them. Dark inherits the CRM's, which pass. */ --crm-ok: #15803d; --crm-ok-bg: #dcfce7; --crm-warn: #a16207; --crm-warn-bg: #fef9c3; --crm-bad: #b91c1c; --crm-bad-bg: #fee2e2; --crm-shadow: 0 14px 34px -26px rgba(17, 24, 39, .75); --thm-surface-fill: rgba(255, 255, 255, .52); --thm-surface-stroke: rgba(17, 24, 39, .07); --thm-surface-highlight: rgba(255, 255, 255, .95); --thm-surface-shadow: 0 14px 34px -26px rgba(17, 24, 39, .75); --thm-surface-radius: 14px; --thm-elevated-fill: rgba(255, 255, 255, .70); --thm-elevated-stroke: rgba(17, 24, 39, .10); --thm-elevated-highlight: rgba(255, 255, 255, .95); --thm-elevated-shadow: 0 18px 40px -22px rgba(17, 24, 39, .8); --thm-elevated-radius: 12px; --thm-elevated-blur: 14px; --thm-floating-fill: rgba(255, 255, 255, .66); --thm-floating-stroke: rgba(255, 255, 255, .55); --thm-floating-highlight: rgba(255, 255, 255, .95); --thm-floating-shadow: 0 30px 70px -30px rgba(17, 24, 39, .85); --thm-floating-radius: 16px; --thm-floating-blur: 22px; --thm-sunken-fill: rgba(17, 24, 39, .06); --thm-field-fill: rgba(255, 255, 255, .88); --thm-field-stroke: rgba(17, 24, 39, .20); --thm-field-inset: none; --thm-on-brand: #ffffff; --thm-hover-fill: rgba(255, 255, 255, .72); --thm-active-fill: rgba(17, 24, 39, .06); --thm-focus-ring: rgba(37, 99, 235, .30); --thm-disabled-opacity: .45; --thm-scrim: rgba(17, 24, 39, .10); --thm-backdrop: radial-gradient(900px 520px at 8% -8%, rgba(99, 102, 241, .30), transparent 62%), radial-gradient(760px 480px at 92% 6%, rgba(56, 189, 248, .26), transparent 60%), radial-gradient(820px 560px at 62% 108%, rgba(168, 85, 247, .20), transparent 62%), linear-gradient(155deg, #f2f4fb 0%, #f7f5fc 48%, #eef6fb 100%); --thm-login-panel: linear-gradient(150deg, rgba(99, 102, 241, .92) 0%, rgba(56, 189, 248, .82) 55%, rgba(168, 85, 247, .86) 100%); --thm-login-panel-ink: #ffffff; --thm-login-bleed: radial-gradient(760px 520px at 78% 20%, rgba(99, 102, 241, .42), transparent 62%), radial-gradient(680px 460px at 20% 82%, rgba(236, 72, 153, .30), transparent 62%); --thm-sat: 160%; --thm-motion: 200ms; } html[data-theme="dark"] { color-scheme: dark; --crm-canvas: #0d0e11; --crm-surface: #1a1d26; --crm-surface-2: #20242e; --crm-surface-3: #262b36; --crm-border: #2b3040; --crm-border-strong:#394052; --crm-ink: #e7e9ee; --crm-ink-2: #b4b9c4; --crm-ink-3: #8f95a2; /* lightened for AA on the dark glass */ --crm-brand: #2563eb; /* #3b82f6 put white button text at 3.68:1 */ --crm-brand-soft: #172238; /* follows the darker brand: labels stay above AA */ /* The CRM's own dark red, #ef4444, is 4.49:1 under this surface: a status button's text is the surface colour, and it fell just short. */ --crm-ok: #4ade80; --crm-ok-bg: #12301d; --crm-warn: #facc15; --crm-warn-bg: #302806; --crm-bad: #f87171; --crm-bad-bg: #3a1414; --crm-shadow: 0 14px 34px -22px rgba(0, 0, 0, .95); --thm-surface-fill: rgba(34, 38, 48, .46); --thm-surface-stroke: rgba(255, 255, 255, .07); --thm-surface-highlight: rgba(255, 255, 255, .07); --thm-surface-shadow: 0 14px 34px -22px rgba(0, 0, 0, .95); --thm-surface-radius: 14px; --thm-elevated-fill: rgba(40, 45, 57, .62); --thm-elevated-stroke: rgba(255, 255, 255, .10); --thm-elevated-highlight: rgba(255, 255, 255, .08); --thm-elevated-shadow: 0 18px 40px -20px rgba(0, 0, 0, 1); --thm-elevated-radius: 12px; --thm-elevated-blur: 14px; --thm-floating-fill: rgba(34, 38, 48, .76); --thm-floating-stroke: rgba(255, 255, 255, .13); --thm-floating-highlight: rgba(255, 255, 255, .09); --thm-floating-shadow: 0 30px 70px -26px rgba(0, 0, 0, 1); --thm-floating-radius: 16px; --thm-floating-blur: 22px; --thm-sunken-fill: rgba(255, 255, 255, .07); --thm-field-fill: rgba(0, 0, 0, .26); --thm-field-stroke: rgba(255, 255, 255, .18); --thm-field-inset: inset 0 1px 2px rgba(0, 0, 0, .38); --thm-on-brand: #ffffff; --thm-hover-fill: rgba(255, 255, 255, .06); --thm-active-fill: rgba(255, 255, 255, .10); --thm-focus-ring: rgba(59, 130, 246, .40); --thm-disabled-opacity: .45; --thm-scrim: rgba(0, 0, 0, .58); --thm-backdrop: radial-gradient(900px 520px at 8% -8%, rgba(99, 102, 241, .26), transparent 62%), radial-gradient(760px 480px at 92% 6%, rgba(56, 189, 248, .17), transparent 60%), radial-gradient(820px 560px at 62% 108%, rgba(168, 85, 247, .20), transparent 62%), linear-gradient(155deg, #101322 0%, #141225 48%, #0d1620 100%); --thm-login-panel: linear-gradient(150deg, rgba(79, 70, 229, .95) 0%, rgba(14, 165, 233, .78) 55%, rgba(147, 51, 234, .88) 100%); --thm-login-panel-ink: #ffffff; --thm-login-bleed: radial-gradient(760px 520px at 78% 20%, rgba(99, 102, 241, .34), transparent 62%), radial-gradient(680px 460px at 20% 82%, rgba(147, 51, 234, .26), transparent 62%); --thm-sat: 160%; --thm-motion: 200ms; }