/* ───────────────────────────────────────────── THE COLORS Every color the site and its drawings use is named in this file and nowhere else, in two sets. The theme palette holds the colors themselves, each as a hex value. Its names say where a color stands in the palette and never what color it is, because another theme may give the same name a different color. Each family of colors takes a letter, and each color in a family takes a weight. Every family holds every weight. A weight names one lightness in OKLCH, a color space whose lightness follows what the eye sees, so a weight predicts how well text reads on a color whatever its hue: white text reads on every weight from 700. A larger weight is a darker color. The steps between weights widen gently from white toward black, because the eye tells light tints apart at smaller differences than dark shades: 050 .972 400 .780 800 .410 100 .945 500 .712 900 .290 200 .893 600 .620 950 .190 300 .838 700 .520 The neutrals add pure white at 000 and pure black at 1000. Each family takes a hue and a peak chroma. A family may turn its hue a little from its lightest weight to its darkest, the way amber leans toward yellow in its pale tints and toward brown in its deep shades. Every weight takes a set share of the peak chroma: the share is largest at 600 and falls toward both ends, where every hue grays out toward white and black. Where an sRGB screen shows less chroma at a weight's lightness, the weight takes as much as the screen shows. The brand gradient's colors are fixed, each at the weight its name gives it. The theme holds each of the gradient's stops as both pages show it, and nothing darkens or lightens it on the way. A brand family that holds a fixed color takes its hue and its peak chroma from it. A fixed color may stand a little off the scale's lightness, so the weights beside it move part of the way toward its lightness, half of its offset at the neighboring weights and a fifth at the weights beyond those, and the steps on either side of it stay even. The palette holds a family only where no other family can take its place. The accent takes its colors from a brand family, because a family of its own would nearly copy one. The hue families beside the brand's are the hues the drawings' marks need to stay apart from each other and from the brand, for every reader including one who sees color differently. The colors by function name what a color does, such as the page's ground, the ink of its text, or a stop of the brand gradient. Each is made from the theme palette, and styles.css names these alone. Where the light and the dark page give a function different colors, their own blocks set it. A translucent color is a color mixed with transparent, and the amount of the mix says how opaque it is. ───────────────────────────────────────────── */ /* ───────────────────────────────────────────── THE THEME PALETTE ───────────────────────────────────────────── */ :root{ /* theme a, b and c — the brand's families. a is a periwinkle blue that holds the gradient's first and second stops at a-400 and a-500, which are fixed, and the brand ink takes a-950. b is a blue a few degrees toward violet from a, which holds the gradient's third stop at b-400, which is fixed. The accent takes its colors from b, and the drawings paint a person in b. c is a violet, the brand's hue furthest from the blues, and it holds no fixed color. */ --theme-a-050:#f0f6ff; --theme-a-100:#e2eefe; --theme-a-200:#c7defe; --theme-a-300:#aacdfd; --theme-a-400:#8dbcfc; --theme-a-500:#6da7f3; --theme-a-600:#4c8cdb; --theme-a-700:#306cb4; --theme-a-800:#1a4b84; --theme-a-900:#0a2c51; --theme-a-950:#02142b; --theme-b-050:#f1f6ff; --theme-b-100:#e4edff; --theme-b-200:#c8daff; --theme-b-300:#a9c5ff; --theme-b-400:#86adff; --theme-b-500:#6d9afd; --theme-b-600:#507eea; --theme-b-700:#3b62c2; --theme-b-800:#274491; --theme-b-900:#142759; --theme-b-950:#071130; --theme-c-050:#f5f4ff; --theme-c-100:#eceaff; --theme-c-200:#dad6ff; --theme-c-300:#c8c1fe; --theme-c-400:#b6abfc; --theme-c-500:#a291f3; --theme-c-600:#8772dc; --theme-c-700:#6a56b4; --theme-c-800:#4b3b86; --theme-c-900:#2c2152; --theme-c-950:#140e2b; /* theme d to g — the hue families, in order around the color wheel: the family of a failure, the family of a thing that waits, the family of a success or a benefit, and the family of what an Agent did */ --theme-d-050:#fff2f3; --theme-d-100:#ffe6e8; --theme-d-200:#ffcdd1; --theme-d-300:#ffb2b9; --theme-d-400:#ff939e; --theme-d-500:#ff687e; --theme-d-600:#ea355b; --theme-d-700:#c01641; --theme-d-800:#8e002a; --theme-d-900:#570016; --theme-d-950:#2e0007; --theme-e-050:#faf6e6; --theme-e-100:#f8eccc; --theme-e-200:#f5d89c; --theme-e-300:#f4c161; --theme-e-400:#f2a600; --theme-e-500:#dc8f00; --theme-e-600:#bc7300; --theme-e-700:#985600; --theme-e-800:#713a00; --theme-e-900:#471e00; --theme-e-950:#260a00; --theme-f-050:#eff9f0; --theme-f-100:#dff3e1; --theme-f-200:#c0e8c4; --theme-f-300:#9ddca7; --theme-f-400:#77cf88; --theme-f-500:#49bd69; --theme-f-600:#00a149; --theme-f-700:#007e3a; --theme-f-800:#005a29; --theme-f-900:#003617; --theme-f-950:#001a08; --theme-g-050:#ecf9f9; --theme-g-100:#daf2f4; --theme-g-200:#b6e6eb; --theme-g-300:#8ed8e3; --theme-g-400:#5ac9dc; --theme-g-500:#0ab5d0; --theme-g-600:#0096b0; --theme-g-700:#00758d; --theme-g-800:#005367; --theme-g-900:#00313f; --theme-g-950:#001720; /* theme h — the neutrals: one ramp from white to black, every step tinted with the same cool hue, between the brand's hues and the page's, and most colorful in the middle of the ramp, so every ground, surface, ink and shadow belongs to the brand */ --theme-h-000:#ffffff; --theme-h-050:#f1f6fc; --theme-h-100:#e6eef6; --theme-h-200:#d2dde9; --theme-h-300:#beccdb; --theme-h-400:#aab9ca; --theme-h-500:#94a4b5; --theme-h-600:#798898; --theme-h-700:#5e6a78; --theme-h-800:#424b55; --theme-h-900:#262c32; --theme-h-950:#101418; --theme-h-1000:#000000; } /* ───────────────────────────────────────────── THE THEME PALETTE ON A WIDE-GAMUT SCREEN A screen that shows the wider Display P3 range takes a more colorful version of every theme color that has a pop. The pop runs from 0 to 1. At 0 the color is its hex value. At 1 its chroma rises in proportion to the extra room P3 gives at the same lightness and hue, so a color at the edge of sRGB reaches the edge of P3. The lightness and the hue stay as the hex value has them, so a weight keeps its meaning on every screen. The theme editor in tools/theme-editor writes the block below whole, from each color's hex value and its pop, and the comment beside each color holds its pop. The editor refuses to load this file while the block differs from what the hex values and the pops give, so the block is never edited by hand, and a color that has a pop changes its hex value in the editor. ───────────────────────────────────────────── */ @media (color-gamut:p3){ :root{ --theme-b-400:oklch(.7526 .1372 264.2); /* pop .99 */ } } /* ───────────────────────────────────────────── THE COLORS BY FUNCTION ───────────────────────────────────────────── */ :root{ /* The brand gradient's stops: its two colors and its third stop, exactly as the theme holds them, which is how both pages show them. The stylesheet's gradient section draws the gradient from these stops. */ --ci-gradient-stop-1:var(--theme-a-600); --ci-gradient-stop-2:var(--theme-a-500); --ci-gradient-stop-3:var(--theme-b-400); /* The stops as the light page shows them: each is mixed in OKLab with --ci-gradient-darken of its own family's 600, which would darken it while keeping its hue. The darkening stands at 0%, so the light page shows the stops exactly as the theme holds them. The light page's block points the stops at these. */ --ci-gradient-darken:0%; --ci-gradient-deep-1:color-mix(in oklab,var(--theme-a-600),var(--theme-a-600) var(--ci-gradient-darken)); --ci-gradient-deep-2:color-mix(in oklab,var(--theme-a-500),var(--theme-a-600) var(--ci-gradient-darken)); --ci-gradient-deep-3:color-mix(in oklab,var(--theme-b-400),var(--theme-b-600) var(--ci-gradient-darken)); /* The stops of the gradient every drawn icon and large title text is stroked with, the same on both pages. The deep stops paint the icons on the white sheets inside a drawing and so stay dark whatever the reader has set. */ --ci-1:var(--ci-gradient-deep-2); --ci-2:var(--theme-b-600); --ci-3:color-mix(in oklch,var(--theme-e-400),var(--theme-e-700)); --ci-d1:var(--theme-h-950); --ci-d2:var(--theme-h-900); --ci-d3:var(--theme-h-950); /* the primary CI color, the almost black the PineSpark logo is drawn in, which the light page's ink and its solid control take */ --brand-ink:var(--theme-a-950); /* Text on the CI gradient, on every banner, hero and tile it grounds, is --ink-on-gradient, which the theme blocks set: the primary CI color on the light page and white on the dark page. A banner's quieter words, its accent and its outlines take the same ink, and a solid button on a banner is the ink with --band-button-ink as its text, which the theme blocks set to the other of the two. */ --band-ink:var(--ink-on-gradient); --band-mute:var(--ink-on-gradient); --band-faint:var(--ink-on-gradient); --band-acc:var(--ink-on-gradient); --band-line:color-mix(in srgb,var(--ink-on-gradient) 20%,transparent); --band-wash:color-mix(in srgb,var(--theme-h-000) 18%,transparent); /* the white glow a banner carries in its top right corner */ --glow:color-mix(in srgb,var(--theme-h-000) 12%,transparent); /* The turning glow behind an input a page puts forward, such as the box to describe an Agent in and the start page's search box, and around the PineSpark mark of the How it works hero, runs around the brand's colors: the gradient's stops and the brand's violet. The theme blocks set the veil a quiet hero lays over its ground. */ --input-glow-1:var(--ci-gradient-stop-1); --input-glow-2:var(--ci-gradient-stop-3); --input-glow-3:var(--theme-c-400); --input-glow-4:var(--ci-gradient-stop-2); /* text and marks on a deep colored ground, such as a hero's headline, an industry's mark or a role's avatar */ --ink-on-color:var(--theme-h-000); /* a message that reports a failure */ --ink-error:var(--theme-d-600); /* the faint ink of a caption or a count, the same on both pages */ --faint:var(--theme-h-600); /* The hero's coral is its source made lighter by --hero-lift and softer by --hero-keep, the share of the source's chroma it keeps, with its hue left as it is. The theme blocks set the lift. */ --hero-d-source:var(--theme-d-600); --hero-keep:.66; --hero-d:oklch(from var(--hero-d-source) calc(l + var(--hero-lift)) calc(c * var(--hero-keep)) h); /* The faint wash of the ink a segment of a panel lays over the panel's ground, which darkens it a little in the light theme and lightens it a little in the dark theme. */ --panel-wash:color-mix(in srgb,var(--ink) 4%,transparent); /* The white frame a tool's picture, a Channel's icon and the name in a Channel badge stand in, so each reads on any ground in either theme. */ --paper-frame:color-mix(in srgb,var(--theme-h-000) 96%,transparent); /* the ink used on the white sheets inside a drawing, which is a light surface whatever the reader has set, and the shadow a white sheet or frame casts */ --paper-ink:var(--theme-h-950); --paper-dim:color-mix(in srgb,var(--theme-h-950) 62%,transparent); --paper-line:color-mix(in srgb,var(--theme-h-950) 10%,transparent); --paper-shadow:var(--theme-h-950); /* The ink for a deep ground. The theme blocks set the band names for the site's own banners, and the ground made from an icon's colors, which is deep in the light and the dark theme, points the band names at this set instead. Text on a deep ground is a solid light tint, never a translucent white. A translucent white mixes with the ground underneath and comes out gray. A wash fills a small part that sits on the ground, such as a label. The button ink is the text on a banner's solid button, whose own color is the banner's ink. */ --deep-ink:var(--theme-h-050); --deep-mute:var(--theme-h-200); --deep-faint:var(--theme-h-500); --deep-acc:var(--theme-h-000); --deep-line:color-mix(in srgb,var(--theme-h-000) 16%,transparent); --deep-wash:color-mix(in srgb,var(--theme-h-000) 10%,transparent); --deep-button-ink:var(--paper-ink); /* The opaque part of a mask. A mask reads only how opaque a color is. */ --mask-shown:var(--theme-h-1000); /* the dimming laid over the page behind a sheet that asks for attention */ --scrim:color-mix(in srgb,var(--theme-h-1000) 50%,transparent); /* The website framework writes the cookie banner into every page with a style block of its own, and that block names these properties. Where a page leaves them undefined the framework falls back to fixed colors, and the banner then stays the same in the light and the dark theme however the rest of the page is painted. A custom property is resolved where it is used, so each one reads whichever value the theme in force has given the name on the right. */ --color-text:var(--ink); --color-bg:var(--bg); --color-surface:var(--surf-hi); --color-primary:var(--acc); --color-accent:var(--acc); /* An industry's mark and a role's avatar each take a color of the record's own that belongs to the brand, each kind by a harmony of its own, so an industry and a role never share a color. A record stands at the place on its kind's arc of hues that the element writes into --mark-place, from 0 at the arc's start to 1 at its end. Every hue on an arc is counted from the brand's own hue, which is the hue of the sources below. An industry takes an analogous harmony, because hues that stand beside each other on the color wheel go together. Its arc starts --industry-arc-start degrees from the brand's hue, on the cool side at cyan, and runs --industry-arc degrees on through teal and the brand's blue to a soft violet. A mark runs from the lightness of its light source to that of its deep source, with --industry-keep of their chroma, because sRGB shows less chroma toward cyan than the brand's own. Its deep corner turns back toward the brand's hue by the share --industry-lean names, so every mark leans toward the brand. A role takes a split-complementary harmony: the warm hues across the color wheel from the brand's blue, from a raspberry red through the theme's coral and amber to an olive gold, so a role reads as a person beside the cool industries. Its arc starts --role-arc-start degrees from the brand's hue and runs --role-arc degrees on, at the lightness of its source and --role-keep of its chroma. Each source is a weight of the brand's family, so every record matches the theme in depth, and white text reads on it. */ --industry-arc-start:-60; --industry-arc:100; --industry-keep:.8; --industry-lean:.4; --industry-light-source:var(--theme-a-600); --industry-deep-source:var(--theme-a-800); --role-arc-start:110; --role-arc:80; --role-keep:1.1; --role-source:var(--theme-a-700); /* The ground of the find-agents hero of a single industry or role, in the record's own hue at its place on its kind's arc, with its kind's share of the chroma: a gradient deepest at its ends and lighter at its band, the way a Channel's ground is drawn, and the brand's light blue glowing from a corner. The band takes the lightness and the chroma of its light source, halfway between the brand family's 700 and 800, one end those of the deep source and the other end those of the deeper one. The ink of the line under the headline is a pale tint of the record's hue. These are chosen so that white text and the ink reach a contrast of 4.5 on every part of the ground, glow included, all along both kinds' arcs. */ --record-ground-light-source:color-mix(in oklch,var(--theme-a-700),var(--theme-a-800)); --record-ground-deep-source:var(--theme-a-800); --record-ground-deeper-source:color-mix(in oklch,var(--theme-a-800),var(--theme-a-900)); --record-ground-ink-source:var(--theme-a-700); --record-ground-glow:color-mix(in srgb,var(--theme-a-400) 15%,transparent); /* THE SECTION TEASERS The drawing each section of the chore data carries names these colors and no others, so this block is the whole palette of the teasers, and a value changed here changes every teaser. Every color is made from the site's own hero colors, the gradient's among them, so a teaser sits in the site's colors rather than beside them. The hero colors differ between the light and the dark theme, and every name below follows them. A teaser draws no ground of its own, so it is transparent between its shapes. The element that shows it paints the ground underneath, as the stylesheet describes at .dirtile. */ /* The sheet of paper, and the marks that go on it: a white tinted with the gradient's second color, and lines and bars in deeper shades of it, so the paper belongs to the ground it lies on. */ --sheet:oklch(from var(--ci-gradient-stop-2) .96 calc(c * .18) h); --sheet-back:oklch(from var(--ci-gradient-stop-2) .9 calc(c * .28) h); --sheet-rule:oklch(from var(--ci-gradient-stop-2) .88 calc(c * .3) h); --sheet-body:oklch(from var(--ci-gradient-stop-2) .82 calc(c * .4) h); --sheet-title:oklch(from var(--ci-gradient-stop-2) .64 calc(c * .5) h); --sheet-head:oklch(from var(--ci-gradient-stop-2) .42 calc(c * .6) h); /* The dark screen, and the marks that go inside it: a deep shade of the gradient's second color, with its bar, its lines and its text in lighter shades. */ --screen:oklch(from var(--ci-gradient-stop-2) .36 calc(c * .7) h); --screen-bar:oklch(from var(--ci-gradient-stop-2) .46 calc(c * .7) h); --screen-dim:oklch(from var(--ci-gradient-stop-2) .62 calc(c * .6) h); --screen-body:oklch(from var(--ci-gradient-stop-2) .76 calc(c * .45) h); --screen-text:oklch(from var(--ci-gradient-stop-2) .92 calc(c * .25) h); /* An object floating on the ground, which is the only translucent thing. It is white glass, the way the panels on a banner are, so the ground shows through it. */ --float-fill:color-mix(in srgb,var(--theme-h-000) 17%,transparent); --float-edge:color-mix(in srgb,var(--theme-h-000) 32%,transparent); --float-mark:color-mix(in srgb,var(--theme-h-000) 55%,transparent); --float-body:color-mix(in srgb,var(--theme-h-000) 38%,transparent); /* the white lines drawn on a floating object, which the drawing makes translucent itself */ --float-line:var(--theme-h-000); /* The marks that carry a meaning, each in shades of a hero color: the gradient's first color for what an Agent did, its second for a person, amber for a thing that waits or needs a look, and coral for a thing that failed or is held. The weight names the shade, from a pale tint of the hero color at 100, through the hero color itself at 500, to its deepest shade at 900. */ --mark-agent-100:color-mix(in oklch, var(--ci-gradient-stop-1) 28%, var(--theme-h-000)); --mark-agent-300:color-mix(in oklch, var(--ci-gradient-stop-1) 70%, var(--theme-h-000)); --mark-agent-500:var(--ci-gradient-stop-1); --mark-agent-700:oklch(from var(--ci-gradient-stop-1) calc(l - .2) c h); --mark-agent-900:oklch(from var(--ci-gradient-stop-1) calc(l - .32) c h); --mark-person-100:color-mix(in oklch, var(--ci-gradient-stop-2) 28%, var(--theme-h-000)); --mark-person-300:color-mix(in oklch, var(--ci-gradient-stop-2) 70%, var(--theme-h-000)); --mark-person-500:var(--ci-gradient-stop-2); --mark-person-700:oklch(from var(--ci-gradient-stop-2) calc(l - .2) c h); --mark-pending-100:color-mix(in oklch, var(--hero-c) 28%, var(--theme-h-000)); --mark-pending-300:color-mix(in oklch, var(--hero-c) 70%, var(--theme-h-000)); --mark-pending-500:var(--hero-c); --mark-pending-700:oklch(from var(--hero-c) calc(l - .2) c h); --mark-failed-100:color-mix(in oklch, var(--hero-d) 28%, var(--theme-h-000)); --mark-failed-300:color-mix(in oklch, var(--hero-d) 70%, var(--theme-h-000)); --mark-failed-500:var(--hero-d); --mark-failed-700:oklch(from var(--hero-d) calc(l - .2) c h); --mark-failed-900:oklch(from var(--hero-d) calc(l - .32) c h); /* THE NAMES THE EXPORTED DRAWINGS USE The drawings and the Channel icons the chore data carries name their colors by function, and each name points at its color in the theme palette: the accent for the thing an Agent did, the grays of the drawings, a thing that failed or is being chased, a thing that belongs to a person, and a thing that is pending or needs a look. */ --drawing-agent-100:var(--theme-g-050); --drawing-agent-300:var(--theme-g-200); --drawing-agent-500:var(--theme-g-500); --drawing-agent-700:var(--theme-g-700); --drawing-agent-900:var(--theme-g-800); --drawing-neutral-200:var(--theme-h-200); --drawing-neutral-300:var(--theme-h-400); --drawing-neutral-500:var(--theme-h-600); --drawing-failed-100:var(--theme-d-100); --drawing-failed-300:var(--theme-d-400); --drawing-failed-500:var(--theme-d-600); --drawing-failed-700:var(--theme-d-700); --drawing-failed-900:var(--theme-d-800); --drawing-person-100:var(--theme-b-100); --drawing-person-300:var(--theme-b-400); --drawing-person-500:var(--theme-b-600); --drawing-person-700:var(--theme-b-700); --drawing-pending-100:var(--theme-e-050); --drawing-pending-300:var(--theme-e-200); --drawing-pending-500:var(--theme-e-400); --drawing-pending-700:var(--theme-e-700); } /* The colors by function that differ between the light and the dark page. The page's own ground, ink and surfaces differ between light and dark. The accent and the blooms behind the page differ too: the light page takes the deep accent and pale blooms, and the dark page takes the pale accent and deep blooms, so the accent reads clearly on each. The hero colors are the gradient's first two stops, amber and coral, and every one of them glows in the particles. The amber is its deeper weight on the light page and its paler one on the dark page. The coral is lifted by --hero-lift, further on the dark page than on the light one. Text on the CI gradient is the primary CI color on the light page and white on the dark page, and a solid button on a banner takes the other of the two as its text. */ :root[data-theme="light"]{ --bg:var(--theme-h-100); --acc:var(--theme-b-800); --acc-soft:color-mix(in srgb,var(--theme-b-800) 12%,transparent); --benefit-ink:var(--theme-f-800); --benefit-icon-ground:var(--theme-f-200); --benefit-line:color-mix(in srgb,var(--theme-f-600) 32%,var(--line)); --hero-c:var(--theme-e-500); --hero-lift:.117; --hero-ink:var(--ink); /* text on the CI gradient, and the text of a solid button on a banner */ --ink-on-gradient:var(--brand-ink); --band-button-ink:var(--theme-h-000); /* the faint light glow behind text on the CI gradient, a tight one and a soft wide one, so the dark text reads more easily */ --ink-on-gradient-shade-near:color-mix(in srgb,var(--theme-h-000) 20%,transparent); --ink-on-gradient-shade-far:color-mix(in srgb,var(--theme-h-000) 14%,transparent); /* the light ground of a label drawn as a pill on the CI gradient, under its dark text */ --label-on-gradient:color-mix(in srgb,var(--theme-h-000) 60%,transparent); /* a label drawn as a pill on the bright surface of a card, such as a search suggestion's: a light tint of the brand ink under text in the brand ink */ --label-on-surface:color-mix(in srgb,var(--brand-ink) 10%,transparent); --label-ink-on-surface:var(--brand-ink); /* The glow around the gradient's words in a hero, a tight halo and a wide one around it. On the light page both are white, so the words stand in a light aura on the pale ground. */ --hero-glow-near:var(--theme-h-000); --hero-glow-far:var(--theme-h-000); /* The veil a quiet hero lays over the CI gradient. On the light page it is a pale white, so the hero is quieter and its dark text still reads. An example under the box a hero reveals is then a pill of a light tint of the brand ink, under text in the brand ink. */ --hero-veil:color-mix(in srgb,var(--theme-h-000) 74%,transparent); --reveal-example-ground:color-mix(in srgb,var(--brand-ink) 8%,transparent); --reveal-example-ink:var(--brand-ink); --wash-a:color-mix(in srgb,var(--theme-c-400) 34%,transparent); --wash-b:color-mix(in srgb,var(--theme-b-200) 34%,transparent); --wash-c:color-mix(in srgb,var(--theme-h-950) 10%,transparent); /* the brand gradient's stops as the light page shows them */ --ci-gradient-stop-1:var(--ci-gradient-deep-1); --ci-gradient-stop-2:var(--ci-gradient-deep-2); --ci-gradient-stop-3:var(--ci-gradient-deep-3); --surf:color-mix(in srgb,var(--theme-h-000) 72%,transparent); --surf-hi:color-mix(in srgb,var(--theme-h-000) 90%,transparent); --surf-sink:color-mix(in srgb,var(--theme-h-000) 42%,transparent); /* the surface a browser that cannot blur what lies behind a surface takes */ --surf-solid:color-mix(in srgb,var(--theme-h-000) 94%,transparent); --input-ground:var(--theme-h-000); /* Every rule on the site is the page's own ink at low opacity: black here and white in the dark block, never a gray of its own. A translucent line takes up whatever it sits on, so it settles into the surface under it instead of laying another color across it. */ --line:color-mix(in srgb,var(--theme-h-1000) 9%,transparent); --line-hi:color-mix(in srgb,var(--theme-h-1000) 20%,transparent); --edge:inset 0 1px 0 color-mix(in srgb,var(--theme-h-000) 85%,transparent); --drop:0 1px 2px color-mix(in srgb,var(--theme-h-950) 4%,transparent), 0 14px 30px -22px color-mix(in srgb,var(--theme-h-950) 45%,transparent); --drop-lift:0 2px 4px color-mix(in srgb,var(--theme-h-950) 5%,transparent), 0 20px 40px -24px color-mix(in srgb,var(--theme-h-950) 55%,transparent); /* the soft shadow around a Channel badge, which lifts it off the light page */ --badge-glow:0 1px 2px color-mix(in srgb,var(--theme-h-950) 14%,transparent), 0 3px 10px -2px color-mix(in srgb,var(--theme-h-950) 22%,transparent); --ink:var(--brand-ink); --mute:var(--theme-h-800); --solid:var(--brand-ink); --solid-ink:var(--theme-h-000); /* the grounds of the two segments of the panel below an Agent's hero: the drawing lies on the wash, so its opaque white boxes stand out, and the description on the panel's own light ground */ --drawing-ground:var(--panel-wash); --drawing-foot-ground:transparent; --drawing-box-ground:var(--theme-h-000); } :root[data-theme="dark"]{ --bg:var(--theme-h-950); --acc:var(--theme-b-200); --acc-soft:color-mix(in srgb,var(--theme-b-200) 14%,transparent); --benefit-ink:var(--theme-f-300); --benefit-icon-ground:color-mix(in srgb,var(--theme-f-700) 45%,var(--surf-solid)); --benefit-line:color-mix(in srgb,var(--theme-f-400) 34%,var(--line)); --hero-c:var(--theme-e-400); --hero-lift:.206; --hero-ink:var(--theme-h-000); /* text on the CI gradient, and the text of a solid button on a banner */ --ink-on-gradient:var(--theme-h-000); --band-button-ink:var(--brand-ink); /* the faint dark shadow behind text on the CI gradient, a tight one and a soft wide one, so the white text reads more easily */ --ink-on-gradient-shade-near:color-mix(in srgb,var(--brand-ink) 20%,transparent); --ink-on-gradient-shade-far:color-mix(in srgb,var(--brand-ink) 14%,transparent); /* the dark ground of a label drawn as a pill on the CI gradient, under its white text */ --label-on-gradient:color-mix(in srgb,var(--brand-ink) 45%,transparent); /* a label drawn as a pill on the gray surface of a card, such as a search suggestion's: the same pill as on the CI gradient */ --label-on-surface:var(--label-on-gradient); --label-ink-on-surface:var(--ink-on-gradient); /* The glow around the gradient's words in a hero, a tight halo and a wide one around it. On the dark page the halo takes the gradient's third stop and the wide glow its second, so the words shine against the dark ground. */ --hero-glow-near:color-mix(in srgb,var(--ci-gradient-stop-3) 48%,transparent); --hero-glow-far:color-mix(in srgb,var(--ci-gradient-stop-2) 48%,transparent); /* The veil a quiet hero lays over the CI gradient. On the dark page it is the deep brand ink, so the hero is darker and its white text still reads. An example under the box a hero reveals is then a pill of a faint white, under white text. */ --hero-veil:color-mix(in srgb,var(--brand-ink) 86%,transparent); --reveal-example-ground:color-mix(in srgb,var(--theme-h-000) 10%,transparent); --reveal-example-ink:var(--theme-h-000); --wash-a:color-mix(in srgb,var(--theme-c-700) 30%,transparent); --wash-b:color-mix(in srgb,var(--theme-b-800) 26%,transparent); --wash-c:color-mix(in srgb,var(--theme-h-000) 5%,transparent); /* A surface, and a raised surface a third of the way from the surface's step toward the next lighter one, so raising a panel lightens it a little, the way a dark theme shows height. */ --surf:color-mix(in srgb,var(--theme-h-900) 76%,transparent); --surf-hi:color-mix(in srgb,color-mix(in oklch,var(--theme-h-900) 67%,var(--theme-h-800)) 84%,transparent); --surf-sink:color-mix(in srgb,var(--theme-h-000) 5.5%,transparent); --surf-solid:color-mix(in srgb,var(--theme-h-900) 97%,transparent); --input-ground:var(--theme-h-900); --line:color-mix(in srgb,var(--theme-h-000) 10%,transparent); --line-hi:color-mix(in srgb,var(--theme-h-000) 20%,transparent); --edge:inset 0 1px 0 color-mix(in srgb,var(--theme-h-000) 9%,transparent); --drop:0 1px 2px color-mix(in srgb,var(--theme-h-1000) 35%,transparent), 0 16px 34px -24px color-mix(in srgb,var(--theme-h-1000) 95%,transparent); --drop-lift:0 2px 5px color-mix(in srgb,var(--theme-h-1000) 40%,transparent), 0 22px 46px -24px var(--theme-h-1000); /* the soft white glow around a Channel badge, which lifts it off the dark page */ --badge-glow:0 0 2px color-mix(in srgb,var(--theme-h-000) 16%,transparent), 0 0 12px color-mix(in srgb,var(--theme-h-000) 14%,transparent); --ink:var(--theme-h-200); --mute:var(--theme-h-400); --solid:var(--theme-h-050); --solid-ink:var(--theme-h-950); /* the grounds of the two segments of the panel below an Agent's hero: the drawing on the panel's own ground, and the description on the wash, and the drawing's boxes on the sunk ground */ --drawing-ground:transparent; --drawing-foot-ground:var(--panel-wash); --drawing-box-ground:var(--surf-sink); } /* A screen that shows the wider Display P3 range takes a more colorful source for the hero's coral. It keeps the lightness and the hue of its palette color, and takes a chroma between that color's own and nearly the most a P3 screen shows at that lightness and hue. The coral is then lightened and softened by the same --hero-lift and --hero-keep as on any other screen. A screen that shows only sRGB takes the palette's own color as the source. The gradient's stops take the wide-gamut versions of their theme colors from the theme palette's own block for a wide-gamut screen. */ @media (color-gamut:p3){ :root[data-theme="light"]{ --hero-d-source:oklch(from var(--theme-d-600) l .242 h); } :root[data-theme="dark"]{ --hero-d-source:oklch(from var(--theme-d-600) l .254 h); } }