/* ============================================================ Soneium Ambassador Studio · design tokens ------------------------------------------------------------ The single source of truth for colour, type, radius, spacing and the glass rim system. Nothing in here is a component. Every page inherits from this file, so a new page written against these variables is automatically on-system. Load order is: tokens.css -> app.css -> theme.css tokens declares, app.css is the v1 sheet, theme.css is the component layer that overrides app.css using these tokens. ============================================================ */ :root{ /* ---- environment --------------------------------------- Neutral off-black. Reads as black or graphite, never navy. The gradient between these two is deliberately almost imperceptible: about 2 points of luminance across the page. */ --env-top:#050607; --env-bot:#070809; --env:linear-gradient(180deg,var(--env-top) 0%,var(--env-top) 30%,var(--env-bot) 100%); /* Sidebar sits very slightly above the main environment so the divider does almost no work. */ --surface-nav:#07090A; --divider:rgba(255,255,255,.05); /* ---- glass interiors ----------------------------------- Three tiers. Interiors are near-black; the tier is communicated by the rim and the internal light, not by making the fill progressively lighter. */ --glass-1:#08090B; /* hero · KPI cards, podium, summary */ --glass-2:#07080A; /* data · panels, tables, charts */ --glass-3:rgba(255,255,255,.035); /* utility · nav, buttons, pills */ --glass-viewport:#040506; /* globe chamber, darkest */ /* ---- typography ---------------------------------------- Three greys, all neutral. No blue cast: the hue is held near 205 but the saturation is low enough that none of these read as blue against the off-black. */ --t1:#F2F4F5; /* primary · 17.4:1 on --env-top */ --t2:#98A3AD; /* secondary · 7.9:1 */ --t3:#7A858E; /* tertiary · 5.0:1 · lightened 25 Aug 2026, the old #68737C read as unreadably grey on the Studio pane */ --t-num:#FFFFFF;/* KPI values, the brightest thing on the page */ /* ---- accents ------------------------------------------- Colour behaves as light, data or status. Never as a painted card background. */ --cyan:#63B9CE; /* Ion Cyan · primary accent, data series 1 */ --cyan-dim:#4A9AB0; --cyan-text:#8FD2E2; /* 9.0:1 · use for cyan text on glass */ --teal:#6FB397; /* sage · positive, active, shipped */ --teal-text:#8FCBB1; --violet:#816FA8; /* Signal Violet · data series 2 */ --violet-text:#A493C9; /* 7.0:1 · violet fails as body text at full strength */ --amber:#C5A469; /* RESERVED · beta, warning, pending. Not a brand accent. */ --amber-text:#D6BA8A; --red:#C77B7B; /* Atmospheric light. Very low alpha: these are meant to be felt rather than seen. */ --air-cyan:rgba(99,185,206,.055); --air-teal:rgba(111,179,151,.05); --air-violet:rgba(129,111,168,.05); --air-amber:rgba(197,164,105,.045); --air-neutral:rgba(150,175,190,.035); /* ---- the glass rim ------------------------------------- A rim is a 1px gradient ring, not a border. Light comes from above, so the top edge and the upper corners catch more of it and the bottom edge nearly disappears. A plain CSS border cannot vary around a perimeter, which is why every rim below is a masked gradient. */ --rim-1-top:rgba(255,255,255,.145); --rim-1-side-hi:rgba(255,255,255,.100); --rim-1-side-lo:rgba(255,255,255,.070); --rim-1-bot:rgba(255,255,255,.058); --rim-2-top:rgba(255,255,255,.110); --rim-2-side-hi:rgba(255,255,255,.078); --rim-2-side-lo:rgba(255,255,255,.056); --rim-2-bot:rgba(255,255,255,.046); --rim-3-top:rgba(255,255,255,.090); --rim-3-side-hi:rgba(255,255,255,.062); --rim-3-side-lo:rgba(255,255,255,.048); --rim-3-bot:rgba(255,255,255,.040); /* corner catches, applied as small radial gradients */ --corner-1:rgba(255,255,255,.20); --corner-2:rgba(255,255,255,.15); --corner-3:rgba(255,255,255,.115); /* Inner highlight and seat. The inset dark shadow is what makes a surface look set into the page rather than floating on it. We use almost no outer drop shadow. */ --inner-hi:inset 0 1px 0 rgba(255,255,255,.030); --seat:inset 0 2px 3px rgba(0,0,0,.42); --surface-shadow:var(--inner-hi),var(--seat); /* ---- radius --------------------------------------------- */ --r-hero:19px; --r-panel:17px; --r-card:15px; --r-ctrl:11px; --r-pill:999px; /* ---- spacing scale -------------------------------------- 4 / 8 / 12 / 16 / 24 / 32 / 48. Nothing between pages should use a value that is not on this scale. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --pad-card:22px; /* internal padding, all glass surfaces */ --gap-card:16px; /* between cards in a row */ --gap-section:32px; /* between major sections */ --pad-page-x:30px; /* main content, horizontal */ --pad-page-y:30px; /* main content, top */ --side-w:224px; /* sidebar, fixed on every page */ --page-max:1180px; /* ---- motion --------------------------------------------- Interaction is a change in light, not in position. */ --ease:cubic-bezier(.4,0,.2,1); --t-fast:.14s var(--ease); --t-med:.22s var(--ease); /* ---- v1 compatibility ----------------------------------- app.css and the application JS still reference these names. Repointed at the tokens above so the old sheet retones itself and no JavaScript needs to change. */ --bg:var(--env-top); --card:var(--glass-1); --line:var(--divider); --ink:var(--t1); --sub:var(--t2); --muted:var(--t3); --brand:var(--cyan); --blue:var(--cyan); --green:var(--teal); --grad:linear-gradient(90deg,#4FB3CE,#7A8BC4); --nav-bg:var(--surface-nav); --hero:var(--env-top); } /* ------------------------------------------------------------ Rim mixins, as reusable backgrounds. Applied by theme.css through ::after on any glass surface. ------------------------------------------------------------ */ :root{ --rim-grad-1: radial-gradient(34px 26px at 3% 3%,var(--corner-1),transparent 76%), radial-gradient(34px 26px at 97% 3%,var(--corner-1),transparent 76%), radial-gradient(30px 23px at 3% 97%,rgba(255,255,255,.075),transparent 76%), radial-gradient(30px 23px at 97% 97%,rgba(255,255,255,.07),transparent 76%), linear-gradient(178deg, var(--rim-1-top) 0%, var(--rim-1-side-hi) 22%, var(--rim-1-side-lo) 62%, var(--rim-1-bot) 100%); --rim-grad-2: radial-gradient(32px 24px at 3% 3%,var(--corner-2),transparent 76%), radial-gradient(32px 24px at 97% 3%,var(--corner-2),transparent 76%), radial-gradient(28px 21px at 3% 97%,rgba(255,255,255,.058),transparent 76%), radial-gradient(28px 21px at 97% 97%,rgba(255,255,255,.054),transparent 76%), linear-gradient(178deg, var(--rim-2-top) 0%, var(--rim-2-side-hi) 22%, var(--rim-2-side-lo) 62%, var(--rim-2-bot) 100%); --rim-grad-3: linear-gradient(178deg, var(--rim-3-top) 0%, var(--rim-3-side-hi) 30%, var(--rim-3-side-lo) 70%, var(--rim-3-bot) 100%); /* the mask that turns a filled box into a 1px ring */ --rim-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); /* ---- the beam ----------------------------------------------- A horizontal light line that runs behind KPI card rows. 1px crisp line + a soft haze. Never thicker than 1px. */ --beam:linear-gradient(90deg, transparent 0%,#35C9D6 7%,#4FB3CE 26%,#5B9FD4 52%, #8E86CE 76%,#A87FD8 93%,transparent 100%); --beam-y:38%; --beam-haze:.16; --beam-reach:70px; } /* ============================================================ THEME v2 · locked 24 Aug 2026 ------------------------------------------------------------ Added, not substituted. Everything above still applies: the 1px --beam and its haze keep living alongside the 2px --beam2 introduced here. See CLAUDE.md "Theme rules v2". ============================================================ */ :root{ /* ---- header beam (2px variant) --------------------------- Both tips fade to transparent so the bar feathers into open air instead of ending on a cut edge. */ --beam2:linear-gradient(90deg,rgba(53,201,214,0) 0%,#35C9D6 9%, #4FB3CE 30%,#5B9FD4 48%,#8f7fe2 66%,#c65fd0 82%,#e04fb4 92%, rgba(224,79,180,0) 100%); --beam2-h:2px; /* the bar */ --beam2-haze-h:22px; /* blurred copy behind it */ --beam2-haze-blur:12px; --beam2-haze-o:.4; --beam2-bloom:.45; /* interior wash opacity inside KPI cards */ /* ---- spectrum stops ------------------------------------------- The same ramp as --beam2, but as six discrete values, because an SVG linearGradient needs stops and cannot read a CSS gradient. The entertainment line under the greeting paints from these, so it follows the palette instead of hardcoding a second copy. */ --spec-1:#35C9D6; --spec-2:#4FB3CE; --spec-3:#5B9FD4; --spec-4:#8f7fe2; --spec-5:#c65fd0; --spec-6:#e04fb4; /* ---- panel air (dot-lit wash) ----------------------------- */ --air-o:.14; /* standard; ceiling .22, never higher */ --air-blur:24px; /* ---- recording dot ---------------------------------------- */ --dot-size:2px; --dot-inset:13px; /* top + right */ --dot-breathe:3.2s; /* ---- glass v2 --------------------------------------------- Near-opaque. Nothing shows through, so light is painted deliberately rather than borrowed from whatever sits behind. */ --glass-fill:rgba(11,12,14,.96); /* ---- hue pairs (KPI cards, left to right across the row) --- */ --hue-kpi1-l:#35C9D6; --hue-kpi1-r:#3ECBD1; --hue-kpi2-l:#5B9FD4; --hue-kpi2-r:#8f7fe2; --hue-kpi3-l:#c65fd0; --hue-kpi3-r:#e04fb4; /* ---- tier halo hues --------------------------------------- The third tier ships as a hue only. Its name is sealed. */ --halo-cand:rgba(174,189,199,.34); --halo-amb:rgba(53,201,214,.5); --halo-final:rgba(224,79,180,.5); /* ---- dot hues, one light source per surface ---------------- Each panel picks a pair: the dot colour and the wash it throws from its own corner. */ --dot-radar:#63B9CE; --wash-radar:rgba(99,185,206,1); --dot-highlights:#6FB397;--wash-highlights:rgba(111,179,151,1); --dot-feed:#e04fb4; --wash-feed:rgba(224,79,180,1); --dot-calendar:#FFFFFF; --wash-calendar:rgba(129,111,168,1); /* Soneium gold (26 Aug 2026): the opportunities hue. NOT the amber token above it in spirit or use: amber stays exclusively beta, warning and pending, gold is the one warm brand accent and only the opportunities panel wears it. Neither substitutes for the other. */ --gold:#E0BE6A; --dot-opps:#E0BE6A; --wash-opps:rgba(224,190,106,1); /* ecosystem blue (26 Aug 2026): provenance, not invitation. Marks content placed for ecosystem projects: the source tag on opportunity rows and the ecosystem calendar pill. */ --blue:#5B9FD4; --blue-text:#93C0E8; /* the feed's own magenta, as text. --dot-feed at full strength is too hot to read against near-black. */ --magenta-text:#E8A5D2; /* ---- hover grammar ---------------------------------------- Light inside the glass. Never an outer box-shadow. */ --hover-rim:rgba(99,185,206,.34); --hover-wash:rgba(99,185,206,.10); --hover-rim-danger:rgba(199,123,123,.38); --hover-wash-danger:rgba(199,123,123,.10); --t-hover:.2s var(--ease); }