/* ============================================================
   CULMEN — ACCENTS
   Loaded after culmen-tune.css. One accent per category:
     sky    software   teal   downloads
     amber  services   green  support
   Set --acc on a container; children inherit it.

   ⚠️ NONE of the four is the brand cyan #67E8F9. Cyan means brand
   and structure only. Software used to be violet #A78BFA and
   downloads used to be the brand cyan itself — both moved on
   2026-08-16 so that no category can be mistaken for the brand.
   Sky #7FB4F5 and teal #34D0C3 are the subscriber portal's own
   tints, so all three properties draw from one set.

   ⚠️ Amber and green are ALSO --warn and --good. They are verdict
   hues on the panel and portal. Reusing them here as category
   decoration is a known compromise, tolerable only because this
   storefront shows no statuses. Do not copy the pattern back.

   Fallback is the brand cyan, so nothing breaks if a category is
   renamed. Delete this file's <link> in layout/theme.liquid to
   revert to a single brand colour.
   ============================================================ */

/* ---------- 0. primary action — supersedes .btn--fill in culmen-tune.css
   Deliberately colourless. The four accents below are spoken for by
   categories, so a primary CTA in any of them would read as a category
   rather than an action.

   Not pure white — a soft cool grey. On a #15151D background, white at
   full strength glares and pulls the eye harder than the headline. This
   sits about 15% down from white, which still clears contrast easily
   while letting the type stay the loudest thing on the page. Hover
   brightens rather than darkens, so the button gains presence on
   interaction instead of at rest.

   NOTE: culmen-button.css loads after this and supersedes these two
   rules again with a slightly brighter pair. Both are kept so that
   removing either <link> still leaves a colourless button.
   ---------- */
.btn--fill{
  background:#D5D8E3;
  border-color:transparent;
  color:#14141C;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 12px 30px -18px rgba(0,0,0,.8);
}
.btn--fill:hover{
  background:#E7E9F1;
  color:#0E0E15;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,
             0 0 0 1px rgba(103,232,249,.42),
             0 0 26px -12px rgba(103,232,249,.36),
             0 14px 32px -20px rgba(0,0,0,.85);
}
.btn--fill:active{background:#C4C8D5}

/* the shine sweep in culmen-polish.css is white — invisible on a light
   button, so darken it to keep the hover motion readable */
.btn--fill::after{
  background:linear-gradient(105deg,transparent 38%,rgba(18,18,26,.12) 50%,transparent 62%);
}

/* cart badge matches the primary action */
.cart-link .cart-count,
.hdr .cart-count{
  background:#D5D8E3;
  color:#14141C;
  border-color:transparent;
  font-weight:600;
}
.cart-link:hover .cart-count{background:#E7E9F1}

/* ---------- 1. product cards, wherever they appear ---------- */
.pcard--software-licence,
.pcard--software-module {--acc:#7FB4F5;--acc-dim:rgba(127,180,245,.10);--acc-line:rgba(127,180,245,.45)}
.pcard--digital-download {--acc:#34D0C3;--acc-dim:rgba(52,208,195,.09);--acc-line:rgba(52,208,195,.42)}
.pcard--remote-service   {--acc:#E0A458;--acc-dim:rgba(224,164,88,.09); --acc-line:rgba(224,164,88,.45)}
.pcard--support-plan     {--acc:#5CD6A0;--acc-dim:rgba(92,214,160,.09); --acc-line:rgba(92,214,160,.45)}

.pcard{background:linear-gradient(150deg,var(--acc-dim,transparent),transparent 55%),var(--surface)}
.pcard:hover{border-color:var(--acc-line,rgba(103,232,249,.5));
  box-shadow:0 22px 50px -26px rgba(0,0,0,.6),0 0 34px -18px var(--acc,var(--violet))}
.pcard__type{display:inline-block;padding:4px 10px;border-radius:20px;
  background:var(--acc-dim,var(--violet-dim));border:1px solid var(--acc-line,var(--line-2));
  color:var(--acc,var(--violet-hi))}
.pcard__go{color:var(--acc,var(--violet-hi))}
.price__unit{color:var(--faint)}

/* ---------- 2. metric strip: each figure its own colour ---------- */
.stat__n{background:none;-webkit-background-clip:border-box;background-clip:border-box}
.strip__in .stat{position:relative;padding-left:18px}
.strip__in .stat::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;
  border-radius:2px;opacity:.4}
.strip__in .stat:nth-child(1) .stat__n{color:#7FB4F5}
.strip__in .stat:nth-child(2) .stat__n{color:#34D0C3}
.strip__in .stat:nth-child(3) .stat__n{color:#E0A458}
.strip__in .stat:nth-child(4) .stat__n{color:#5CD6A0}
.strip__in .stat:nth-child(1)::before{background:#7FB4F5}
.strip__in .stat:nth-child(2)::before{background:#34D0C3}
.strip__in .stat:nth-child(3)::before{background:#E0A458}
.strip__in .stat:nth-child(4)::before{background:#5CD6A0}
@media(max-width:700px){.strip__in .stat{padding-left:14px}}

/* ---------- 3. capability cards: six modules, four accents ---------- */
.grid-cards .card:nth-child(4n+1){--acc:#7FB4F5;--acc-dim:rgba(127,180,245,.10);--acc-line:rgba(127,180,245,.42)}
.grid-cards .card:nth-child(4n+2){--acc:#34D0C3;--acc-dim:rgba(52,208,195,.09);--acc-line:rgba(52,208,195,.40)}
.grid-cards .card:nth-child(4n+3){--acc:#E0A458;--acc-dim:rgba(224,164,88,.09); --acc-line:rgba(224,164,88,.42)}
.grid-cards .card:nth-child(4n+4){--acc:#5CD6A0;--acc-dim:rgba(92,214,160,.09); --acc-line:rgba(92,214,160,.42)}
.grid-cards .card{background:linear-gradient(150deg,var(--acc-dim,transparent),transparent 58%),var(--surface)}
.grid-cards .card:hover{border-color:var(--acc-line,rgba(103,232,249,.45));
  box-shadow:0 22px 50px -26px rgba(0,0,0,.6),0 0 34px -18px var(--acc,var(--violet))}
.card__tag{color:var(--acc,var(--violet-hi))}
.grid-cards .card h3{position:relative;padding-left:15px}
.grid-cards .card h3::before{content:'';position:absolute;left:0;top:.45em;width:6px;height:6px;
  border-radius:2px;background:var(--acc,var(--violet));box-shadow:0 0 12px -1px var(--acc,var(--violet))}

/* ---------- 4. deployment panes ---------- */
.two-col .pane:nth-child(1){--acc:#7FB4F5;--acc-dim:rgba(127,180,245,.11);--acc-line:rgba(127,180,245,.45)}
.two-col .pane:nth-child(2){--acc:#34D0C3;--acc-dim:rgba(52,208,195,.10);--acc-line:rgba(52,208,195,.42)}
.two-col .pane{background:linear-gradient(150deg,var(--acc-dim,transparent),transparent 60%),var(--surface);
  border-color:var(--acc-line,var(--line))}
.pane__tag{color:var(--acc,var(--violet-hi))}
.ticks li svg{color:var(--acc,var(--violet-hi))}
.pane--lead{box-shadow:0 24px 56px -30px rgba(0,0,0,.7),0 0 40px -22px var(--acc,var(--violet))}

/* ---------- 5. principles: four items, four accents ---------- */
.princ__item:nth-child(1){--acc:#7FB4F5}
.princ__item:nth-child(2){--acc:#34D0C3}
.princ__item:nth-child(3){--acc:#E0A458}
.princ__item:nth-child(4){--acc:#5CD6A0}
.princ__n{color:var(--acc,var(--violet-hi));opacity:1}
.princ__item{border-left:2px solid transparent;padding-left:20px;transition:border-color .25s ease}
.princ__item:hover{border-left-color:var(--acc,var(--violet))}
@media(max-width:700px){.princ__item{padding-left:14px}}