/* ============================================================================ Sites — application token layer v2 · 22 Aug 2026 ---------------------------------------------------------------------------- Blueprint Risk #24: runtime theming tokens, never hardcoded hex. v2 — NAMING. Arthur's direction, 22 Aug: the console vocabulary travels. The prefix is --ic-* and the 27 names KJPTV's console.css already defines keep their spelling exactly, so a console component drops in without a rename. Everything Sites needs on top is additive and marked ADDED. The console's gold is gone. --ic-gold-* becomes --ic-accent, defaulting to Flag Red. That was the leak the Agency white-label could not survive. Arthur codes every component against --ic-* only. Load order: n3tworth tokens/*.css → sites-tokens.css ==========================================================================*/ :root{ /* ====================================================================== THE CONSOLE 27 — names carried over verbatim, values replaced ====================================================================== */ /* --- Surfaces ---------------------------------------------------------- */ --ic-paper: var(--platinum); /* the sunken console ground */ --ic-card: var(--white); /* every card, the top bar — LIGHTER than paper */ --ic-card-2: #E9E9E9; /* one step DOWN — wells, table heads, chips */ --ic-card-3: #E1E1E1; /* two steps down — the deepest well */ /* A whole CARD that has been retired: merged, superseded, closed. It sinks BELOW the ground rather than sitting on it, which on a dark console means near-black, not a lighter grey. Not a well — a card that stopped counting. */ --ic-card-recede: #E1E1E1; /* --- Ink --------------------------------------------------------------- */ --ic-ink: var(--carbon-black); /* titles, values */ --ic-body: var(--graphite); /* running copy */ --ic-muted: #6B6B6B; /* keys, meta, placeholder */ /* --- Hairlines --------------------------------------------------------- */ --ic-line: rgba(24,24,24,.09); /* the default separator — nearly invisible */ --ic-line-2: rgba(24,24,24,.16); /* the stronger one */ /* --- Elevation: the console's model, re-pitched for a white ground ------ Recessed fields, raised white controls. This is the soft glass button language, and the one thing the console gave us that the marketing system has no equivalent for. The console's four shadows, cooled. Light source top-left: raised things cast to the bottom-right and catch white on the top-left; anything a value sits IN is a well. KJPTV's rgba(92,82,66,…) warm stone becomes neutral rgba(24,24,24,…) Carbon — the model survives, the beige does not. */ --ic-raise: 6px 6px 15px rgba(24,24,24,.11), -6px -6px 15px rgba(255,255,255,.95); --ic-raise-sm: 4px 4px 9px rgba(24,24,24,.10), -4px -4px 9px rgba(255,255,255,.92); --ic-lift: 9px 9px 21px rgba(24,24,24,.14), -8px -8px 18px rgba(255,255,255,1); --ic-inset: inset 5px 5px 10px rgba(24,24,24,.11), inset -5px -5px 10px rgba(255,255,255,.92); --ic-inset-sm: inset 3px 3px 6px rgba(24,24,24,.10), inset -3px -3px 6px rgba(255,255,255,.9); /* The accent's glow is the accent (5 Oct, Nikol': the red shadows stayed red after a white-label color change). Same .6 of Sites' red as before. */ --ic-accent-soft: 0 6px 16px -8px color-mix(in srgb, var(--ic-accent-brand) 60%, transparent); /* was --ic-gold-soft */ /* --- Status ------------------------------------------------------------ Red and green carry every state Sites has. --ic-blue keeps its console name so a ported component needs no edit, but it resolves to Graphite rather than a new hue — the palette is seven colors plus one green. There is no --ic-gold. That is the point of this file. */ --ic-red: var(--flag-red); --ic-red-bg: var(--flag-red-tint); --ic-red-line: var(--flag-red); --ic-green: #0E7A4D; --ic-green-bg: #E8F3ED; --ic-blue: var(--graphite); --ic-blue-bg: var(--platinum); /* Reconciliation status tints. Three axes needed three washes that read apart at pill size without touching Flag Red. No gold, no amber. */ --ic-info: #1F4D8F; --ic-info-bg: #E7EEF8; --ic-violet: #5B3E9B; --ic-violet-bg: #EFEAF8; --ic-orange: #A24A12; --ic-orange-bg: #FBEBDF; --ic-teal: #14666B; --ic-teal-bg: #E4F1F1; /* Requested for the Matched Design pill. Lemon, kept clear of the retired gold: it is a status wash, never a surface or a button. */ --ic-yellow: #6B6410; --ic-yellow-bg: #F8F4CC; /* --- Accent — was --ic-gold-* ------------------------------------------ BRAND IN, ACCENT OUT. A white-labelled portal writes its client's colour to --ic-accent-brand and nothing else; every accent token below is derived from it, per theme. Writing --ic-accent directly would pin one hex across both grounds, and a hex that carries on white rarely carries on black. */ --ic-accent-brand: var(--flag-red); --ic-accent: var(--ic-accent-brand); /* 92 AND 86, NOT 88 AND 78, and the numbers are measured rather than judged. Nikol', 9 Sept, on the dashboard's Continue button: "We don't have that button hover anywhere.. we don't really do that hover style. It's too much of a color change." She was right, and the design system says by how much: it ships --flag-red-hover #B81C24 and --flag-red-press #A81A21 as the brand's own steps off #CE2029, and the mixes here were landing well past both - 12% black against the brand's 8% on hover, 22% against 14% on press, so every accent button in the console moved about one and a half times as far as it was ever meant to. Derived rather than hardcoded, still: a white-labelled portal writes only --ic-accent-brand, so pinning the flag-red literals here would give every agency n3tworth's hover on their own colour. These two ratios reproduce #B81C24 and #A81A21 exactly against the brand red - verified by computing both and comparing to the literals - and give an agency the same proportional step off theirs. */ --ic-accent-hover: color-mix(in oklab, var(--ic-accent-brand) 92%, #000); --ic-accent-press: color-mix(in oklab, var(--ic-accent-brand) 86%, #000); --ic-accent-wash: color-mix(in oklab, var(--ic-accent-brand) 10%, transparent); --ic-accent-line: var(--ic-accent-brand); /* INK vs FILL. Accent does two opposite jobs: it is small type and hairlines ON a surface, and it is a saturated surface UNDER a white label. Those pull lightness in opposite directions, and on a dark ground no single value clears AA for both. So the accent splits: --ic-accent is the ink, and --ic-accent-fill is the surface a white label sits on. On white the brand hex already carries a white label, so light keeps them identical. */ --ic-accent-fill: var(--ic-accent-brand); --ic-accent-fill-hover: var(--ic-accent-hover); --ic-accent-fill-press: var(--ic-accent-press); --ic-red-fill: var(--ic-red); /* --- Frame dimensions -------------------------------------------------- */ --ic-rail-w: 248px; --ic-top-h: 64px; /* ====================================================================== ADDED — what Sites needs and the console never had ====================================================================== */ /* --- Aliases kept so nothing already built has to change --------------- */ --ic-bg: var(--ic-card); --ic-bg-app: var(--ic-paper); --ic-bg-sunken: var(--ic-paper); --ic-surface: var(--ic-card); --ic-surface-muted: var(--ic-card-2); --ic-ink-2: var(--ic-body); --ic-ink-3: var(--ic-muted); --ic-line-soft: var(--ic-line); --ic-live: var(--ic-green); --ic-live-wash: var(--ic-green-bg); --ic-failed: var(--ic-red); --ic-failed-wash: var(--ic-red-bg); --ic-danger: var(--ic-red); --ic-danger-wash: var(--ic-red-bg); --ic-working: var(--ic-accent); --ic-working-wash: var(--ic-accent-wash); /* --- On black --------------------------------------------------------- */ --ic-card-inverse: var(--carbon-black); --ic-card-inverse-2: #202020; --ic-ink-inverse: var(--white); --ic-ink-inverse-2: var(--silver); --ic-line-inverse: rgba(255,255,255,.14); /* Elevation for a control that stands ON the carbon card rather than on paper. The paper pair above catches white at 92% and 100%, which is what makes a raised control look embossed on white and exactly what would make it glow on black: the rule is stated at the head of sites-dark.css, on a dark ground the cast goes to near-black and the catch drops to about 4% white, or every card grows a halo. These are --ic-raise-sm and --ic-lift re-derived for that ground, so a pill on an inverse surface can be raised at rest and lift on hover the way the design draws it. Dark does not re-point them: the ground under them is carbon in BOTH themes, so the same two values are correct in both. */ --ic-raise-sm-inverse: 4px 4px 9px rgba(0,0,0,.48), -4px -4px 9px rgba(255,255,255,.038); --ic-lift-inverse: 9px 9px 21px rgba(0,0,0,.62), -8px -8px 18px rgba(255,255,255,.06); --ic-line-strong: var(--graphite); --ic-line-accent: var(--flag-red); --ic-ink-accent: var(--flag-red); --ic-idle: var(--silver); --ic-idle-wash: var(--platinum); --ic-rail-w-mini: 72px; /* --- Focus (never removed) --------------------------------------------- */ --ic-focus: var(--flag-red); --ic-focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--flag-red); --ic-focus-ring-inverse: 0 0 0 2px var(--carbon-black), 0 0 0 4px var(--white); /* --- Type -------------------------------------------------------------- */ --ic-font-heading: var(--font-heading); /* Delight — Bold 700 only */ --ic-font-body: var(--font-body); /* Jost 100–900 */ --ic-font-mono: ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; /* domains, keys, timers */ /* ADDED 5 Sep. ic-auth.css has referenced --ic-font-ui since it was written and NOTHING defined it: the design system ships --font-ui, not --ic-font-ui, so three `font-family` overrides on the auth buttons have been dead the whole time. Harmless only because each sits after a `font:` shorthand that already set a family - had it been inside the shorthand, the undefined var would have invalidated the entire declaration and taken the size and weight with it. Mapped here the same way --ic-font-body maps to --font-body. */ --ic-font-ui: var(--font-ui); /* buttons, nav, labels, tags */ --ic-text-xs: var(--text-12); --ic-text-sm: var(--text-14); --ic-text-md: var(--text-16); --ic-text-lg: var(--text-18); --ic-text-xl: var(--text-20); --ic-text-2xl: var(--text-24); --ic-text-3xl: var(--text-32); --ic-text-4xl: var(--text-40); --ic-type-screen-title: var(--weight-bold) var(--text-40)/var(--leading-display) var(--font-heading); --ic-type-panel-title: var(--weight-bold) var(--text-24)/var(--leading-subhead) var(--font-heading); --ic-type-card-title: var(--weight-bold) var(--text-20)/var(--leading-subhead) var(--font-heading); --ic-type-stat: var(--weight-bold) var(--text-32)/1.1 var(--font-heading); --ic-type-lead: var(--weight-regular) var(--text-18)/var(--leading-body) var(--font-body); --ic-type-body: var(--weight-regular) var(--text-16)/var(--leading-body) var(--font-body); --ic-type-small: var(--weight-regular) var(--text-14)/var(--leading-body) var(--font-body); --ic-type-label: var(--weight-semibold) var(--text-14)/var(--leading-body) var(--font-body); --ic-type-meta: var(--weight-medium) var(--text-12)/var(--leading-body) var(--font-body); --ic-type-key: var(--weight-bold) var(--text-12)/1.2 var(--font-body); /* the ic-stat key */ --ic-type-eyebrow: var(--weight-bold) var(--text-12)/var(--leading-body) var(--font-body); /* --- Control geometry --------------------------------------------------- */ --ic-control-h: 48px; --ic-control-h-sm: 37px; --ic-control-pad-x: var(--space-16); --ic-radius-control: var(--radius-sm); /* 12 — panels, alerts */ --ic-radius-field: var(--radius-pill); /* 50 — inputs are pills */ --ic-radius-card: var(--radius-md); /* 20 */ --ic-radius-chip: var(--radius-md); /* 20 */ --ic-radius-pill: var(--radius-pill); /* 50 */ --ic-radius-round: var(--radius-round); /* --- App frame ---------------------------------------------------------- */ --ic-topbar-h: var(--ic-top-h); --ic-pad-screen: var(--space-32); --ic-pad-card: var(--space-24); --ic-gap-stack: var(--space-16); --ic-form-max: 440px; --ic-panel-w: 600px; --ic-measure: 1180px; /* --- Motion ------------------------------------------------------------- */ --ic-dur-fast: var(--dur-fast); --ic-dur-base: var(--dur-base); --ic-dur-slow: var(--dur-slow); --ic-ease: var(--ease-standard); /* --- The auth material: black ground, orbs, glass ------------------------ AUTH ONLY. The console is white. These values are white-on-dark and go invisible on paper — the light equivalents are --ic-raise / --ic-inset above. Sites is deliberately not the marketing surface: it runs on the brand black with crisp CIRCULAR orbs and translucent glass over them. The only shape in this product is a circle. Orbs are CRISP — the panel's backdrop-filter does the blurring where it overlaps them. Never pre-blur an orb; that gives a wash, not a circle. Flag Red is never text on this ground (2.8:1). It is orbs, filled buttons with white labels (6.3:1), dots and hairlines only. */ --ic-ground: radial-gradient(120% 100% at 50% 0%, #202020 0%, var(--carbon-black) 52%, #0E0E0E 100%); --ic-glass-fill: rgba(255,255,255,.09); --ic-glass-fill-strong: rgba(255,255,255,.14); --ic-glass-fill-soft: rgba(255,255,255,.055); --ic-glass-blur: blur(28px) saturate(1.3); --ic-glass-border: rgba(255,255,255,.22); --ic-glass-border-lit: rgba(255,255,255,.34); --ic-glass-shadow: 0 2px 8px rgba(0,0,0,.28), 0 28px 72px rgba(0,0,0,.48); --ic-glass-highlight: inset 0 1px 0 rgba(255,255,255,.26); --ic-ink-on-glass: var(--white); --ic-ink-on-glass-2: var(--silver); --ic-ink-on-glass-3: rgba(255,255,255,.55); --ic-line-on-glass: rgba(255,255,255,.16); --ic-control-inset: inset 0 1px 2px rgba(0,0,0,.38); --ic-control-glass: rgba(255,255,255,.10); --ic-control-raise: 0 6px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.28); --ic-accent-raise: 0 10px 30px color-mix(in srgb, var(--ic-accent-brand) 44%, transparent), inset 0 1px 0 rgba(255,255,255,.30); /* White buttons sit ON the glass, so their glow is white. The accent glow belongs to accent-filled buttons only: red light under a white pill reads as a warning. */ --ic-light-raise: 0 10px 30px rgba(255,255,255,.20), inset 0 1px 0 rgba(255,255,255,.55); --ic-orb-accent: var(--flag-red); --ic-orb-white: var(--white); --ic-orb-silver: var(--silver); --ic-orb-grey: var(--graphite); --ic-ring: rgba(255,255,255,.34); --ic-ring-soft: rgba(255,255,255,.16); /* --- Card elevation on paper -------------------------------------------- */ --ic-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); --ic-shadow-card-lifted: 0 2px 4px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.09); --ic-shadow-inset: inset 0 1px 2px rgba(0,0,0,.05); --ic-shadow-popover: var(--shadow-overlay); --ic-shadow-sheet: var(--shadow-xl); /* ADDED 2 Oct (account chat). The five accent swatches an agency picks from on Account & Billing's White Label tab (design script 1234). They are DATA, saved into the agency's theming as hex, never console colours, and they do not change in dark mode. The first is our own red. */ --wl-swatch-1: #CE2029; --wl-swatch-2: #0E7C6B; --wl-swatch-3: #1F4E9C; --wl-swatch-4: #5B3D8C; --wl-swatch-5: #8A4A1E; } /* ── Overlay material: white glass ───────────────────────────────────────── Anything that LAYS OVER the console — menus, sheets, popovers, panes, tooltips — is see-through white with the page blurred behind it. Anything that SITS ON the page keeps the recessed/raised inset language instead. The auth screens use the dark equivalent above; this is its white twin. */ :root{ --ic-glass-paper: rgba(255,255,255,.62); --ic-glass-paper-strong: rgba(255,255,255,.80); --ic-glass-paper-blur: blur(20px) saturate(155%); --ic-glass-paper-ring: inset 0 0 0 1px rgba(255,255,255,.9); --ic-glass-paper-shadow: 0 2px 8px rgba(24,24,24,.06), 0 26px 60px -22px rgba(24,24,24,.34); /* The scrim under a modal: TINT ONLY, never a blur. A backdrop-filter on the wrapper makes it the blur root, so the sheet inside it ends up frosting a wash instead of the page and the glass goes flat. The sheet does its own blurring, exactly as the editor's drawer panes do. */ --ic-scrim: rgba(24,24,24,.10); /* The Media Library lightbox's scrim, Nikol' 27 Sept: "an underlay when that lightbox is up, that way they can focus on the modal". The file under the glass is the point there and the tiles behind it compete; still a tint. */ --ic-scrim-focus: rgba(24,24,24,.48); /* Two wells that sit ON the glass rather than on paper, so they can't use --ic-card: they have to read as a hole cut in a translucent panel. */ --ic-glass-well: rgba(255,255,255,.42); --ic-glass-chip: rgba(255,255,255,.72); /* Laid over a site thumbnail while it imports. */ --ic-veil: rgba(255,255,255,.72); /* The smallest lift there is: a 26px round control, a toggle knob at rest. */ --ic-raise-xs: 0 1px 3px rgba(24,24,24,.26); } .ic-scrim{ background: var(--ic-scrim) !important; } /* Every rich text well, inline and expanded, on every screen. The background stays inline because the well's depth depends on the panel holding it; what this owns is everything that must never drift between them. */ .ic-rt{ box-shadow: var(--ic-inset-sm) !important; color: var(--ic-ink) !important; outline: none; } .ic-rt:focus-visible{ box-shadow: var(--ic-inset-sm), var(--ic-focus-ring) !important; } .ic-rt a{ color: var(--ic-accent); } .ic-rt th, .ic-rt td{ border-color: var(--ic-line-2) !important; } /* Inline styles are this product's norm, so the utility has to outrank them. */ .ic-glass{ background: var(--ic-glass-paper) !important; -webkit-backdrop-filter: var(--ic-glass-paper-blur); backdrop-filter: var(--ic-glass-paper-blur); box-shadow: var(--ic-glass-paper-ring), var(--ic-glass-paper-shadow) !important; } .ic-glass-solid{ background: var(--ic-glass-paper-strong) !important; -webkit-backdrop-filter: var(--ic-glass-paper-blur); backdrop-filter: var(--ic-glass-paper-blur); box-shadow: var(--ic-glass-paper-ring), var(--ic-glass-paper-shadow) !important; } /* ── Tooltips ────────────────────────────────────────────────────────────── Native titles cannot be styled, so anything with a tip carries data-tip. */ [data-tip]{position:relative} [data-tip]::after{ content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 9px); transform:translate(-50%,-4px);z-index:400;width:max-content;max-width:196px; padding:9px 13px;border-radius:13px;text-align:center; /* WHITE-SPACE IS RESET, and without it max-width above does nothing. A tooltip inherits white-space from the element it hangs off, and the things that carry tips are overwhelmingly chips and pills - .ic-conf and .ic-port both set nowrap so their own label never breaks. The pseudo- element took it too, so "A standard section type. It survives a theme swap." rendered as one 350px line that ran across the row below it while max-width:196px sat there unable to apply. Nikol', 9 Sept: "Fix the tooltip." One property, and it fixes every tip on a chip at once. */ white-space:normal; background:var(--ic-glass-paper); -webkit-backdrop-filter:var(--ic-glass-paper-blur);backdrop-filter:var(--ic-glass-paper-blur); box-shadow:var(--ic-glass-paper-ring),var(--ic-glass-paper-shadow); font:var(--weight-semibold) 13.5px/1.4 var(--ic-font-body);color:var(--ic-ink); opacity:0;pointer-events:none; transition:opacity var(--ic-dur-fast) var(--ic-ease),transform var(--ic-dur-fast) var(--ic-ease)} [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)} /* No reason to give, no tip to show. */ [data-tip=""]::after{display:none} [data-tip-align="start"]::after{left:0;transform:translate(0,-4px)} [data-tip-align="start"]:hover::after,[data-tip-align="start"]:focus-visible::after{transform:translate(0,0)} [data-tip-align="end"]::after{left:auto;right:0;transform:translate(0,-4px)} [data-tip-align="end"]:hover::after,[data-tip-align="end"]:focus-visible::after{transform:translate(0,0)} /* ── The accent button's running outline ─────────────────────────────────── Same move as the auth screens, drawn from the element itself so any red button can carry it without extra markup. */ @keyframes ic-trace{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}} .ic-trace{position:relative} .ic-trace-run{position:absolute;inset:-5px;pointer-events:none;opacity:0;transition:opacity var(--ic-dur-fast) var(--ic-ease)} .ic-trace:hover .ic-trace-run,.ic-trace:focus-visible .ic-trace-run{opacity:1} .ic-trace:hover .ic-trace-run rect,.ic-trace:focus-visible .ic-trace-run rect{animation:ic-trace 1.6s linear infinite} @media (prefers-reduced-motion: reduce){.ic-trace-run rect{animation:none !important}} /* ── The glass chip on a stat card ──────────────────────────────────────── Bottom right of any KPI tile, so a card is recognisable before it is read. Glass, never inset: a pane sitting on the card rather than cut into it. */ .ic-stat-glass{ position:absolute;right:14px;bottom:14px;width:52px;height:52px; display:grid;place-items:center;border-radius:50%; background:rgba(255,255,255,.55); -webkit-backdrop-filter:var(--ic-glass-paper-blur);backdrop-filter:var(--ic-glass-paper-blur); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(24,24,24,.06),0 2px 6px rgba(24,24,24,.07); color:var(--ic-accent);pointer-events:none; } .ic-stat-glass svg{width:26px;height:26px} /* The chip is corner-anchored, so only the row beside it yields — the card keeps its full measure everywhere else. */ :has(> .ic-stat-glass){position:relative;padding-bottom:62px !important;box-sizing:border-box} /* ============================================================================ ADDED 5 Sep 2026 — the console layer Arthur ---------------------------------------------------------------------------- Nine values Minnie's Dashboard Home uses that had no token. They live HERE because sites-tokens.css is one of only four files scripts/check-tokens.js lets a literal colour sit in, and every one of these is a literal in her file. Extracted by reading the design, then reconciled across six readings of it — rgba(24,24,24,.12) alone came back under three different names, and one colour with three names is three colours the first time somebody edits one of them. The four shadows are all the SAME tint at different offsets, so the tint is its own token and they compose from it. That is the whole point: re-point one value for dark mode and every soft edge in the console follows. ==========================================================================*/ :root{ /* The single tint under every soft edge in the console. */ --ic-shadow-tint: rgba(24,24,24,.12); /* A 10px drop with an -18px spread is a 2px smear, not a shadow: it reads as a soft hairline under the sticky top bar, which paints the same --ic-paper as the page and would otherwise have nothing separating it from content scrolling beneath. */ --ic-edge-down: 0 10px 20px -18px var(--ic-shadow-tint); --ic-edge-up: 0 -10px 20px -18px var(--ic-shadow-tint); --ic-shadow-sheet-panel: -30px 0 70px -30px var(--ic-shadow-tint); --ic-shadow-toast: 0 24px 50px -20px var(--ic-shadow-tint); /* The middle stop of the upgrade card's scrim, over its animated ground. */ --ic-cosmos-veil: rgba(0,0,0,.35); /* The unlit part of the import spinner's ring. RAISED WITH NIKOL': this is Flag Red at 30%, so the spinner stays red on a white-labelled console while the allowance meter 30px away honours the brand. Her design says red; changing it is a design decision, so it is reproduced as drawn and flagged rather than quietly re-pointed at --ic-accent-brand. */ --ic-spin-track: color-mix(in oklab, var(--ic-red) 30%, transparent); /* Deliberately NOT the same as the spinner track: 28% against 30%, two points apart, on two different elements. Merging them would be tidier and would silently change one of her values. */ --ic-step-ring: color-mix(in oklab, var(--ic-accent-brand) 28%, transparent); /* The toast's busy ring sits on a white-topped surface, so its track is a white wash rather than an ink one. */ --ic-spinner-track-inverse: rgba(255,255,255,.3); } /* ── The screens before sign-in, under an agency's white label (X1, 5 Oct) ── Minnie's own values from sites-brand.js (authGround, LIGHT and SCRIM), so auth-brand.js sets a name, never a colour. data-ic-auth="light" is set on only on an auth screen, only for an agency that turned Dark sign-in screens off; --carbon-black carries real black everywhere else. */ :root { --ic-auth-scrim-soft: rgba(24,24,24,.42); --ic-auth-scrim-strong: rgba(24,24,24,.68); } :root[data-ic-auth="light"] { --carbon-black: #EFEFEF; --ic-ground: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #EFEFEF 54%, #E2E2E2 100%); --ic-glass-fill: rgba(255,255,255,.66); --ic-glass-fill-strong: rgba(255,255,255,.86); --ic-glass-fill-soft: rgba(255,255,255,.52); --ic-glass-border: rgba(24,24,24,.10); --ic-glass-highlight: inset 0 1px 0 rgba(255,255,255,.95); --ic-ink-on-glass: #181818; --ic-ink-on-glass-2: #333333; --ic-ink-on-glass-3: rgba(24,24,24,.58); --ic-line-on-glass: rgba(24,24,24,.12); --ic-orb-white: #D8D8D8; --ic-orb-silver: #C2C2C2; }