/*
 * FleetNect Wakanda theme.
 *
 * The look first built on the Home and Compliance dashboards (hexagon icons,
 * tribal corner art, tinted gradients, violet kicker pills) as one stylesheet,
 * so every module shares it. Blade pages load it with <x-wakanda-theme />;
 * the Operations and GPS React apps import it in operations/src/main.tsx, so
 * rebuild that app after changing this file.
 *
 * Part 1 restyles the Tailwind markup the pages already use, so a page gets
 * the theme without any change to its own markup:
 *   - the top bar           -> violet tint with a zigzag lower edge
 *   - a page title row      -> hero band with chevron sides and a triangle lattice
 *                              (tint and lattice only when the row runs edge to edge)
 *   - a stat tile           -> tinted gradient, coloured left edge, corner art
 *   - a small content card  -> violet left edge and corner art
 *   - an icon chip          -> solid hexagon with a white icon
 * Containers that hold a table, a form or a grid of other cards stay plain,
 * and so does anything that paints its own background with an inline style.
 * To opt one element out, give it the class wk-plain.
 *
 * Part 2 is the wk-* classes for markup written for the theme.
 *
 * The file uses CSS nesting and :has(). A browser without them shows the
 * pages unthemed but fully working.
 */

:root {
  --wk-violet: #7C3AED;
  --wk-violet-text: #6D28D9;
  --wk-violet-tint: #F5F3FF;
  --wk-corner-violet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%237C3AED' stroke-width='1.4' stroke-linejoin='round' opacity='0.45'%3E%3Cpolygon points='100,8 100,100 8,100'/%3E%3Cpolygon points='100,36 100,100 36,100'/%3E%3Cpolygon points='100,64 100,100 64,100'/%3E%3Cpolyline points='30,100 58,72 86,100'/%3E%3Cpolyline points='58,100 79,79 100,100'/%3E%3Cpolyline points='72,44 100,72'/%3E%3Cpolygon points='100,80 100,100 80,100' fill='%237C3AED' fill-opacity='0.25' stroke='none'/%3E%3Cpolygon points='54,100 66,88 78,100' fill='%237C3AED' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E");
  --wk-blue: #2563EB;
  --wk-blue-text: #1E40AF;
  --wk-blue-tint: #EFF6FF;
  --wk-corner-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%232563EB' stroke-width='1.4' stroke-linejoin='round' opacity='0.45'%3E%3Cpolygon points='100,8 100,100 8,100'/%3E%3Cpolygon points='100,36 100,100 36,100'/%3E%3Cpolygon points='100,64 100,100 64,100'/%3E%3Cpolyline points='30,100 58,72 86,100'/%3E%3Cpolyline points='58,100 79,79 100,100'/%3E%3Cpolyline points='72,44 100,72'/%3E%3Cpolygon points='100,80 100,100 80,100' fill='%232563EB' fill-opacity='0.25' stroke='none'/%3E%3Cpolygon points='54,100 66,88 78,100' fill='%232563EB' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E");
  --wk-teal: #0E7490;
  --wk-teal-text: #0E7490;
  --wk-teal-tint: #ECFEFF;
  --wk-corner-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%230E7490' stroke-width='1.4' stroke-linejoin='round' opacity='0.45'%3E%3Cpolygon points='100,8 100,100 8,100'/%3E%3Cpolygon points='100,36 100,100 36,100'/%3E%3Cpolygon points='100,64 100,100 64,100'/%3E%3Cpolyline points='30,100 58,72 86,100'/%3E%3Cpolyline points='58,100 79,79 100,100'/%3E%3Cpolyline points='72,44 100,72'/%3E%3Cpolygon points='100,80 100,100 80,100' fill='%230E7490' fill-opacity='0.25' stroke='none'/%3E%3Cpolygon points='54,100 66,88 78,100' fill='%230E7490' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E");
  --wk-green: #16A34A;
  --wk-green-text: #15803D;
  --wk-green-tint: #F0FDF4;
  --wk-corner-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%2316A34A' stroke-width='1.4' stroke-linejoin='round' opacity='0.45'%3E%3Cpolygon points='100,8 100,100 8,100'/%3E%3Cpolygon points='100,36 100,100 36,100'/%3E%3Cpolygon points='100,64 100,100 64,100'/%3E%3Cpolyline points='30,100 58,72 86,100'/%3E%3Cpolyline points='58,100 79,79 100,100'/%3E%3Cpolyline points='72,44 100,72'/%3E%3Cpolygon points='100,80 100,100 80,100' fill='%2316A34A' fill-opacity='0.25' stroke='none'/%3E%3Cpolygon points='54,100 66,88 78,100' fill='%2316A34A' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E");
  --wk-amber: #F59E0B;
  --wk-amber-text: #92400E;
  --wk-amber-tint: #FFFBEB;
  --wk-corner-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23F59E0B' stroke-width='1.4' stroke-linejoin='round' opacity='0.45'%3E%3Cpolygon points='100,8 100,100 8,100'/%3E%3Cpolygon points='100,36 100,100 36,100'/%3E%3Cpolygon points='100,64 100,100 64,100'/%3E%3Cpolyline points='30,100 58,72 86,100'/%3E%3Cpolyline points='58,100 79,79 100,100'/%3E%3Cpolyline points='72,44 100,72'/%3E%3Cpolygon points='100,80 100,100 80,100' fill='%23F59E0B' fill-opacity='0.25' stroke='none'/%3E%3Cpolygon points='54,100 66,88 78,100' fill='%23F59E0B' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E");
  --wk-red: #DC2626;
  --wk-red-text: #B91C1C;
  --wk-red-tint: #FEF2F2;
  --wk-corner-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23DC2626' stroke-width='1.4' stroke-linejoin='round' opacity='0.45'%3E%3Cpolygon points='100,8 100,100 8,100'/%3E%3Cpolygon points='100,36 100,100 36,100'/%3E%3Cpolygon points='100,64 100,100 64,100'/%3E%3Cpolyline points='30,100 58,72 86,100'/%3E%3Cpolyline points='58,100 79,79 100,100'/%3E%3Cpolyline points='72,44 100,72'/%3E%3Cpolygon points='100,80 100,100 80,100' fill='%23DC2626' fill-opacity='0.25' stroke='none'/%3E%3Cpolygon points='54,100 66,88 78,100' fill='%23DC2626' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E");
  --wk-slate: #64748B;
  --wk-slate-text: #334155;
  --wk-slate-tint: #F8FAFC;
  --wk-corner-slate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%2364748B' stroke-width='1.4' stroke-linejoin='round' opacity='0.45'%3E%3Cpolygon points='100,8 100,100 8,100'/%3E%3Cpolygon points='100,36 100,100 36,100'/%3E%3Cpolygon points='100,64 100,100 64,100'/%3E%3Cpolyline points='30,100 58,72 86,100'/%3E%3Cpolyline points='58,100 79,79 100,100'/%3E%3Cpolyline points='72,44 100,72'/%3E%3Cpolygon points='100,80 100,100 80,100' fill='%2364748B' fill-opacity='0.25' stroke='none'/%3E%3Cpolygon points='54,100 66,88 78,100' fill='%2364748B' fill-opacity='0.2' stroke='none'/%3E%3C/svg%3E");
  --wk-hex-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 89,27.5 89,72.5 50,95 11,72.5 11,27.5' fill='%23000' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wk-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='200' viewBox='0 0 24 200' fill='none' stroke='%237C3AED' stroke-width='1.2' opacity='0.18'%3E%3Cpolygon points='4,6 20,20 4,34'/%3E%3Cpolygon points='20,40 4,54 20,68'/%3E%3Cpolygon points='4,74 20,88 4,102'/%3E%3Cpolygon points='20,108 4,122 20,136'/%3E%3Cpolygon points='4,142 20,156 4,170'/%3E%3Cpolygon points='20,176 4,190 20,200'/%3E%3C/svg%3E");
  --wk-chevrons-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='200' viewBox='0 0 24 200' fill='none' stroke='%237C3AED' stroke-width='1.2' opacity='0.18'%3E%3Cpolygon points='20,6 4,20 20,34'/%3E%3Cpolygon points='4,40 20,54 4,68'/%3E%3Cpolygon points='20,74 4,88 20,102'/%3E%3Cpolygon points='4,108 20,122 4,136'/%3E%3Cpolygon points='20,142 4,156 20,170'/%3E%3Cpolygon points='4,176 20,190 4,200'/%3E%3C/svg%3E");
  --wk-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='80' viewBox='0 0 176 80' fill='none' stroke='%237C3AED' stroke-width='1.3' opacity='0.14'%3E%3Cpolygon points='0,4 44,4 22,40'/%3E%3Cpolygon points='44,4 88,4 66,40'/%3E%3Cpolygon points='88,4 132,4 110,40'/%3E%3Cpolygon points='132,4 176,4 154,40'/%3E%3Cpolygon points='22,40 66,40 44,76'/%3E%3Cpolygon points='66,40 110,40 88,76'/%3E%3Cpolygon points='110,40 154,40 132,76'/%3E%3C/svg%3E");
  --wk-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7' fill='none' stroke='%237C3AED' stroke-width='1.2' stroke-linejoin='round' opacity='0.4'%3E%3Cpolyline points='0,6.4 6,1 12,6.4 18,1 24,6.4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Part 1: existing Tailwind markup
   ========================================================================== */

/* ---- Top bar and sidebar: the shell every page shares ---- */

:is(
  /* a header inside a card or a dialog is that card's heading, not the page's top bar */
  header.border-b:is(.bg-white, .bg-white\/90, .bg-white\/95):not(:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, [role="dialog"], dialog) header),
  :is(div, nav).sticky.top-0.border-b:is(.bg-white, .bg-white\/95),
  .fs-topbar
):not(.wk-plain) {
  background-image: var(--wk-zigzag), linear-gradient(120deg, var(--wk-violet-tint) 0%, #FFFFFF 60%);
  background-repeat: repeat-x, no-repeat;
  background-position: left bottom, 0 0;
  background-size: 24px 7px, 100% 100%;
  border-bottom-color: #DDD6FE;
}

aside.bg-white.border-r:not(.wk-plain) {
  border-right-color: #DDD6FE;
}

/* ---- Page title row -> hero band (shared with <x-wk-hero>) ---- */

/* Left out: a title row that is, or sits inside, a coloured banner with white
   text, where the white band would cover the banner and hide the text. */
:is(
  .wk-hero,
  div:is(.flex, .sm\:flex, .md\:flex, .lg\:flex):is(.justify-between, .sm\:justify-between, .md\:justify-between, .lg\:justify-between):has(
    > div > :is(h1, h2):is(.text-2xl, .text-3xl, .sm\:text-3xl),
    > :is(h1, h2):is(.text-2xl, .text-3xl, .sm\:text-3xl)
  ):not(.border-b, .bg-white, .bg-white *, header *, .wk-hero *, .wk-plain,
        [class*="bg-gradient-to-"], [class*="bg-gradient-to-"] *, .text-white, .text-white *)
) {
  padding: 1.25rem;
  border: 1px solid #E2E8F0;
  border-radius: 1.5rem;
  background-color: #FFFFFF;
  background-image: linear-gradient(120deg, var(--wk-violet-tint) 0%, #FFFFFF 65%);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  @media (min-width: 640px) {
    padding: 1.5rem 2.5rem;
    background-image: var(--wk-chevrons-left), var(--wk-chevrons-right), linear-gradient(120deg, var(--wk-violet-tint) 0%, #FFFFFF 65%);
    background-repeat: repeat-y, repeat-y, no-repeat;
    background-position: left top, right top, 0 0;
    background-size: 24px 200px, 24px 200px, 100% 100%;
  }

  @media (min-width: 768px) {
    background-image: var(--wk-lattice), var(--wk-chevrons-left), var(--wk-chevrons-right), linear-gradient(120deg, var(--wk-violet-tint) 0%, #FFFFFF 65%);
    background-repeat: no-repeat, repeat-y, repeat-y, no-repeat;
    background-position: right 2.5rem bottom, left top, right top, 0 0;
    background-size: 176px 80px, 24px 200px, 24px 200px, 100% 100%;
  }
}

/* The same title row drawn edge to edge with a rule under it: tinted, but its shape is left alone */
div.border-b:is(.flex, .sm\:flex, .md\:flex, .lg\:flex):is(.justify-between, .sm\:justify-between, .md\:justify-between, .lg\:justify-between):has(
  > div > :is(h1, h2):is(.text-xl, .text-2xl, .text-3xl),
  > :is(h1, h2):is(.text-xl, .text-2xl, .text-3xl)
):not(.sticky, .bg-white *, header *, .wk-hero *, .wk-plain,
      [class*="bg-gradient-to-"], [class*="bg-gradient-to-"] *, .text-white, .text-white *) {
  background-image: linear-gradient(120deg, var(--wk-violet-tint) 0%, #FFFFFF 65%);

  @media (min-width: 768px) {
    background-image: var(--wk-lattice), linear-gradient(120deg, var(--wk-violet-tint) 0%, #FFFFFF 65%);
    background-repeat: no-repeat;
    background-position: right 14rem bottom, 0 0;
    background-size: 176px 80px, 100% 100%;
  }
}

/* Page and section titles */
:is(h1, h2):is(.text-2xl, .text-3xl, .sm\:text-3xl),
h2.text-xl:is(.font-bold, .font-semibold, .font-extrabold) {
  font-weight: 900;
  letter-spacing: -0.025em;
}

/* ---- Cards ---- */

/*
 * A card is a white, bordered, rounded, shadowed box. Left out: buttons,
 * list rows that are only cards on small screens, and anything with its own
 * inline background.
 */
:is(div, section, article, a, li, button):is(.rounded-xl, .rounded-2xl, .rounded-3xl).bg-white.border:is(.shadow-sm, .shadow-xs, .shadow-2xs, .shadow):not(
  .inline-flex, .md\:rounded-none, .lg\:rounded-none, .md\:shadow-none, .lg\:shadow-none, [style*="background"], .wk-plain
) {
  /* Small content card -> violet left edge and corner art. A link counts only when padded like a card. */
  &:not(button, a:not(.p-4, .p-5, .p-6)):not(:has(table, form, input, select, textarea, canvas, iframe, nav, .grid)) {
    background-image: var(--wk-corner-violet), linear-gradient(120deg, var(--wk-violet-tint) 0%, #FFFFFF 60%);
    background-repeat: no-repeat;
    background-position: right bottom, 0 0;
    background-size: auto min(44px, 100%), 100% 100%;
    border-left: 3px solid var(--wk-violet);
  }

  /* Stat tile (a card built around one big number) -> tinted gradient, coloured edge, corner art */
  &:has(:is(.text-2xl, .text-3xl, .text-4xl):is(.font-semibold, .font-bold, .font-extrabold, .font-black)):not(
    :has(table, form, input, select, textarea, canvas, iframe, nav, h1, h2, ul, ol)
  ) {
    --wk-c: var(--wk-violet);
    --wk-t: var(--wk-violet-tint);
    --wk-art: var(--wk-corner-violet);
    background-image: var(--wk-art), linear-gradient(120deg, var(--wk-t) 0%, #FFFFFF 75%);
    background-repeat: no-repeat;
    background-position: right bottom, 0 0;
    background-size: auto min(80px, 100%), 100% 100%;
    border-left: 3px solid var(--wk-c);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    &:is(a, button):hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    /* The tile takes its colour from the coloured chip or badge inside it; red wins. */
    &:has([class^="bg-blue-"], [class*=" bg-blue-"], [class^="bg-sky-"], [class*=" bg-sky-"]) { --wk-c: var(--wk-blue); --wk-t: var(--wk-blue-tint); --wk-art: var(--wk-corner-blue); }
    &:has([class^="bg-cyan-"], [class*=" bg-cyan-"], [class^="bg-teal-"], [class*=" bg-teal-"]) { --wk-c: var(--wk-teal); --wk-t: var(--wk-teal-tint); --wk-art: var(--wk-corner-teal); }
    &:has([class^="bg-green-"], [class*=" bg-green-"], [class^="bg-emerald-"], [class*=" bg-emerald-"], [class^="bg-lime-"], [class*=" bg-lime-"]) { --wk-c: var(--wk-green); --wk-t: var(--wk-green-tint); --wk-art: var(--wk-corner-green); }
    &:has([class^="bg-amber-"], [class*=" bg-amber-"], [class^="bg-yellow-"], [class*=" bg-yellow-"], [class^="bg-orange-"], [class*=" bg-orange-"]) { --wk-c: var(--wk-amber); --wk-t: var(--wk-amber-tint); --wk-art: var(--wk-corner-amber); }
    &:has([class^="bg-red-"], [class*=" bg-red-"], [class^="bg-rose-"], [class*=" bg-rose-"], [class^="bg-pink-"], [class*=" bg-pink-"]) { --wk-c: var(--wk-red); --wk-t: var(--wk-red-tint); --wk-art: var(--wk-corner-red); }
  }
}

/* ---- Icon chip -> solid hexagon with a white icon ---- */

/* A chip is a fixed-size, centred, coloured box whose only content is one icon. */
:is(div, span):is(.flex, .inline-flex).items-center.justify-center:is(.h-8.w-8, .h-9.w-9, .h-10.w-10, .h-11.w-11, .h-12.w-12, .h-14.w-14, .h-16.w-16):is(
  [class^="bg-"], [class*=" bg-"]
):not(.bg-white, .bg-transparent, .wk-plain):has(> svg, > i[data-lucide]) {
  --wk-hex: var(--wk-violet);
  background: var(--wk-hex) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-mask: var(--wk-hex-mask) center / 100% 100% no-repeat;
  mask: var(--wk-hex-mask) center / 100% 100% no-repeat;

  & > :is(svg, i) {
    color: #FFFFFF !important;
  }

  &:is([class^="bg-blue-"], [class*=" bg-blue-"], [class^="bg-sky-"], [class*=" bg-sky-"]) { --wk-hex: var(--wk-blue); }
  &:is([class^="bg-cyan-"], [class*=" bg-cyan-"], [class^="bg-teal-"], [class*=" bg-teal-"]) { --wk-hex: var(--wk-teal); }
  &:is([class^="bg-green-"], [class*=" bg-green-"], [class^="bg-emerald-"], [class*=" bg-emerald-"], [class^="bg-lime-"], [class*=" bg-lime-"]) { --wk-hex: var(--wk-green); }
  &:is([class^="bg-amber-"], [class*=" bg-amber-"], [class^="bg-yellow-"], [class*=" bg-yellow-"], [class^="bg-orange-"], [class*=" bg-orange-"]) { --wk-hex: var(--wk-amber); }
  &:is([class^="bg-red-"], [class*=" bg-red-"], [class^="bg-rose-"], [class*=" bg-rose-"], [class^="bg-pink-"], [class*=" bg-pink-"]) { --wk-hex: var(--wk-red); }
  &:is([class^="bg-slate-"], [class*=" bg-slate-"], [class^="bg-gray-"], [class*=" bg-gray-"], [class^="bg-zinc-"], [class*=" bg-zinc-"], [class^="bg-neutral-"], [class*=" bg-neutral-"], [class^="bg-stone-"], [class*=" bg-stone-"]) { --wk-hex: var(--wk-slate); }

  /* A see-through white chip sits on a coloured banner: keep it see-through */
  &:is([class^="bg-white/"], [class*=" bg-white/"]) { --wk-hex: rgb(255 255 255 / 0.22); }
}

/* ---- Drive-style pages (FileSync, Subcontractors): fs-* classes with inline colours ---- */

.fs-stat-chip:not(.wk-plain) {
  --wk-c: var(--wk-violet);
  --wk-t: var(--wk-violet-tint);
  --wk-art: var(--wk-corner-violet);
  background-image: var(--wk-art), linear-gradient(120deg, var(--wk-t) 0%, #FFFFFF 75%);
  background-repeat: no-repeat;
  background-position: right bottom, 0 0;
  background-size: auto min(64px, 100%), 100% 100%;
  border-left: 3px solid var(--wk-c);

  /* The tile and its icon take their colour from the icon's inline colour */
  &:has(> div:first-child:is([style*="color:#1a73e8"], [style*="color:#0284c7"])) { --wk-c: var(--wk-blue); --wk-t: var(--wk-blue-tint); --wk-art: var(--wk-corner-blue); }
  &:has(> div:first-child:is([style*="color:#059669"], [style*="color:#137333"])) { --wk-c: var(--wk-green); --wk-t: var(--wk-green-tint); --wk-art: var(--wk-corner-green); }
  &:has(> div:first-child:is([style*="color:#92400e"], [style*="color:#d97706"])) { --wk-c: var(--wk-amber); --wk-t: var(--wk-amber-tint); --wk-art: var(--wk-corner-amber); }
  &:has(> div:first-child[style*="color:#dc2626"]) { --wk-c: var(--wk-red); --wk-t: var(--wk-red-tint); --wk-art: var(--wk-corner-red); }
}

.fs-stat-chip > div:first-child {
  background: var(--wk-c, var(--wk-violet)) !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  -webkit-mask: var(--wk-hex-mask) center / 100% 100% no-repeat;
  mask: var(--wk-hex-mask) center / 100% 100% no-repeat;
}

/* ==========================================================================
   Part 2: classes for markup written for the theme
   ========================================================================== */

/* Hero band text: <x-wk-hero> (the band itself is styled with the title rows above) */
.wk-hero-title {
  margin: 0.75rem 0 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #0F172A;

  @media (min-width: 640px) {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.wk-hero-text {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #64748B;
}

/* Kicker pill: the small uppercase label above a title */
.wk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border: 1px solid #DDD6FE;
  border-radius: 9999px;
  background: var(--wk-violet-tint);
  color: var(--wk-violet-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1rem;
  text-transform: uppercase;
}

/* Card and hexagon icon. Add wk-blue, wk-teal, wk-green, wk-amber, wk-red or wk-slate to change the colour. */
.wk-card {
  --wk-c: var(--wk-violet);
  --wk-t: var(--wk-violet-tint);
  --wk-art: var(--wk-corner-violet);
  border: 1px solid #E2E8F0;
  border-left: 3px solid var(--wk-c);
  border-radius: 1rem;
  background-color: #FFFFFF;
  background-image: var(--wk-art), linear-gradient(120deg, var(--wk-t) 0%, #FFFFFF 75%);
  background-repeat: no-repeat;
  background-position: right bottom, 0 0;
  background-size: auto min(80px, 100%), 100% 100%;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.wk-hex {
  --wk-hex: var(--wk-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: var(--wk-hex);
  color: #FFFFFF;
  -webkit-mask: var(--wk-hex-mask) center / 100% 100% no-repeat;
  mask: var(--wk-hex-mask) center / 100% 100% no-repeat;
}

.wk-card.wk-blue { --wk-c: var(--wk-blue); --wk-t: var(--wk-blue-tint); --wk-art: var(--wk-corner-blue); }
.wk-card.wk-teal { --wk-c: var(--wk-teal); --wk-t: var(--wk-teal-tint); --wk-art: var(--wk-corner-teal); }
.wk-card.wk-green { --wk-c: var(--wk-green); --wk-t: var(--wk-green-tint); --wk-art: var(--wk-corner-green); }
.wk-card.wk-amber { --wk-c: var(--wk-amber); --wk-t: var(--wk-amber-tint); --wk-art: var(--wk-corner-amber); }
.wk-card.wk-red { --wk-c: var(--wk-red); --wk-t: var(--wk-red-tint); --wk-art: var(--wk-corner-red); }
.wk-card.wk-slate { --wk-c: var(--wk-slate); --wk-t: var(--wk-slate-tint); --wk-art: var(--wk-corner-slate); }

.wk-hex.wk-blue { --wk-hex: var(--wk-blue); }
.wk-hex.wk-teal { --wk-hex: var(--wk-teal); }
.wk-hex.wk-green { --wk-hex: var(--wk-green); }
.wk-hex.wk-amber { --wk-hex: var(--wk-amber); }
.wk-hex.wk-red { --wk-hex: var(--wk-red); }
.wk-hex.wk-slate { --wk-hex: var(--wk-slate); }