/* Cloud Agentics design tokens. Generated from tokens.json; edit that file, not this one by hand. */
:root {
  /* dark surface is the default */
  --ca-bg: #05070D;
  --ca-surface: #0B1019;
  --ca-panel: #0E131E;
  --ca-ink: #E8EEF8;
  --ca-soft: #B3BDD0;
  --ca-muted: #8C97AD;
  --ca-line: rgba(255,255,255,0.09);
  --ca-cyan: #2EF2FF;
  --ca-magenta: #FF3DCB;
  --ca-violet: #9A5CFF;
  --ca-red: #FF3B5C;
  --ca-orange: #FF8A1F;
  --ca-teal: #2EF2B0;
  --ca-blue: #4C7DFF;
  --ca-green: #7FD13B;
  --ca-accent: var(--ca-cyan);
  --ca-display: "Chakra Petch", "Manrope", system-ui, sans-serif;
  --ca-text: "Manrope", system-ui, sans-serif;
  --ca-chamfer: 18px;
  --ca-ease-enter: cubic-bezier(.2,.7,.2,1);
}
/* light surface: documents, email, print */
.ca-light, [data-surface="light"] {
  --ca-bg: #FFFFFF;
  --ca-surface: #F4F6FA;
  --ca-panel: #EEF1F6;
  --ca-ink: #141C2B;
  --ca-soft: #3A4558;
  --ca-muted: #5B6677;
  --ca-line: #D9DEE7;
  --ca-cyan: #00818A;
  --ca-magenta: #DB00A0;
  --ca-violet: #8D48FF;
  --ca-red: #EB0028;
  --ca-orange: #BB5900;
  --ca-teal: #08845A;
  --ca-blue: #2D67FF;
  --ca-green: #4C821F;
}
/* one accent per surface: set the layer that the section describes */
[data-layer="landing-zone"] { --ca-accent: var(--ca-magenta); }
[data-layer="network"] { --ca-accent: var(--ca-violet); }
[data-layer="security"] { --ca-accent: var(--ca-red); }
[data-layer="workloads"] { --ca-accent: var(--ca-orange); }
/* the chamfered panel: one cut corner, top right */
.ca-panel { background: var(--ca-panel); border: 1px solid var(--ca-line); border-left: 2px solid var(--ca-accent);
  clip-path: polygon(0 0, calc(100% - var(--ca-chamfer)) 0, 100% var(--ca-chamfer), 100% 100%, 0 100%); }