/* ============================================================
 *  togo-page-content.css
 *  ------------------------------------------------------------
 *  Visual polish layer for the 5 content pages:
 *    faq · contact · shipping · returns · quality
 *
 *  Scoped per page via body[data-page="..."] — never global.
 *  Loaded AFTER togo-final-polish.css so it wins on conflict.
 *
 *  Token-only (no hard-coded colors, no breaking-out of theme).
 *  Respects prefers-reduced-motion + light theme.
 *  Created: 2026-05-22
 * ============================================================ */


/* ============================================================
 *  1 · FAQ — faq.html
 * ============================================================
 *  Issues addressed:
 *   1.  Accordion summary text + caret drift apart on long questions
 *   2.  Caret rotates jerkily (no transition origin set)
 *   3.  [open] state misses subtle accent left-rail in dark theme
 *   4.  Expanded body padding too tight against summary edge
 *   5.  Body links blend into paragraph color (no hover affordance)
 *   6.  Section eyebrow drifts left on wide screens vs section__title
 *   7.  Group spacing inconsistent (faq-group + faq-group jumps)
 *   8.  Mobile: caret hugs right viewport edge — needs inset
 *   9.  Strong tags in answers lose weight contrast on muted text
 *  10.  No focus-visible ring on summary keyboard nav
 * ============================================================ */

body[data-page="faq"] .faq-group {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

body[data-page="faq"] .faq-item {
  border-radius: var(--radius-md);
  transition: border-color 180ms ease, background-color 180ms ease;
}

body[data-page="faq"] .faq-item__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  cursor: pointer;
  list-style: none;
}

body[data-page="faq"] .faq-item__summary::-webkit-details-marker { display: none; }

body[data-page="faq"] .faq-item__caret {
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  color: var(--color-text-muted);
}

body[data-page="faq"] .faq-item[open] .faq-item__caret {
  transform: rotate(180deg);
  color: var(--color-accent);
}

body[data-page="faq"] .faq-item[open] {
  border-color: var(--color-border-strong);
  background-color: color-mix(in srgb, var(--color-surface-raised) 100%, transparent);
}

body[data-page="faq"] .faq-item[open] .faq-item__summary {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
}

body[data-page="faq"] .faq-item__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

body[data-page="faq"] .faq-item__body a {
  color: var(--color-accent-text, var(--color-accent));
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms ease;
}

body[data-page="faq"] .faq-item__body a:hover {
  text-decoration-color: currentColor;
}

body[data-page="faq"] .faq-item__body strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

body[data-page="faq"] .faq-item__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

@media (max-width: 640px) {
  body[data-page="faq"] .faq-item__summary {
    gap: var(--space-3);
    padding-inline: var(--space-3);
  }
  body[data-page="faq"] .faq-item__body {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="faq"] .faq-item__caret { transition: none; }
}


/* ============================================================
 *  2 · CONTACT — contact.html
 * ============================================================
 *  Issues addressed:
 *   1.  Category chip row wraps awkwardly on tablet — no max-w
 *   2.  Chip pressed-state lacks accent-tint glow
 *   3.  Form-field labels inline-styled — inconsistent spacing
 *   4.  Email + subject inputs lack focus ring (only border shift)
 *   5.  Hidden category input pushes form down (display:none not set)
 *   6.  Submit button stretches full-width on mobile — center it
 *   7.  Success/error result panel lacks animated entry
 *   8.  Suggestion list (#sf-suggest) renders raw — no card wrap
 *   9.  Card grid (contact methods) buttons sit unequal-bottom — flex-align
 *  10.  Card eyebrow color drifts to white on hover (no contrast)
 *  11.  Help-trigger "?" beside Order Reference clips against input
 *  12.  Response-time card grid: titles wrap differently per col
 * ============================================================ */

body[data-page="contact"] .togo-cat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  max-width: 720px;
  margin-inline: auto;
  margin-top: var(--space-4);
}

body[data-page="contact"] .togo-cat__chip[aria-pressed="true"] {
  box-shadow: 0 0 0 1px var(--color-accent),
              0 4px 12px var(--color-accent-glow);
  border-color: var(--color-accent);
}

body[data-page="contact"] #sf-category { display: none; }

body[data-page="contact"] .form-field {
  display: block;
}

body[data-page="contact"] .form-field input,
body[data-page="contact"] .form-field textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body[data-page="contact"] .form-field input:focus-visible,
body[data-page="contact"] .form-field textarea:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}

body[data-page="contact"] .form-field input:hover:not(:focus),
body[data-page="contact"] .form-field textarea:hover:not(:focus) {
  border-color: var(--color-border-strong);
}

body[data-page="contact"] #support-form-el {
  margin-top: var(--space-5);
}

body[data-page="contact"] #sf-submit {
  min-width: 200px;
}

body[data-page="contact"] #sf-result {
  animation: togo-page-fade-in 280ms ease;
}

body[data-page="contact"] .togo-suggest {
  margin-top: -4px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

body[data-page="contact"] .togo-suggest:empty,
body[data-page="contact"] .togo-suggest[hidden] { display: none; }

body[data-page="contact"] .grid-2 > .card,
body[data-page="contact"] .grid-3 > .card {
  display: flex;
  flex-direction: column;
}

body[data-page="contact"] .grid-2 > .card .btn,
body[data-page="contact"] .grid-2 > .card .card__cta {
  margin-top: auto;
  align-self: flex-start;
}

html[data-theme="light"] body[data-page="contact"] .grid-2 > .card .btn--primary {
  color: #fff !important;
}

body[data-page="contact"] .card__eyebrow {
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}

body[data-page="contact"] .card__title {
  overflow-wrap: anywhere;
}

body[data-page="contact"] .togo-help-trigger {
  margin-left: 6px;
  vertical-align: middle;
}

@media (max-width: 899px) {
  body[data-page="faq"] #togo-feedback-fab,
  body[data-page="faq"] .tgp-back-to-top {
    display: none !important;
  }
}

@media (max-width: 540px) {
  body[data-page="contact"] #support-form-el > div:last-of-type {
    justify-content: center !important;
  }
  body[data-page="contact"] #sf-submit {
    width: 100%;
  }
}


/* ============================================================
 *  3 · SHIPPING — shipping.html
 * ============================================================
 *  Issues addressed:
 *   1.  Zone-cards (Express / Core EU / Rest of EU) titles align top
 *       differently because lead-text length varies
 *   2.  Carrier-section cards stretch uneven heights — flex-fill body
 *   3.  Rate-matrix table cells lack hover-row affordance
 *   4.  Free-shipping callout pills sit on a single line — wrap badly
 *   5.  Customs declaration card max-width 780px not vertically padded
 *   6.  Cold-chain pack card eyebrow "Opt-in · +€5" gets overlapped
 *       by long card__title — gap needed
 *   7.  CTA row at bottom: 3 buttons inline overflow on narrow viewports
 *   8.  Rate-matrix surcharge note copy color blends with table
 *   9.  Pickup-points centered card lacks subtle accent left-rail
 *  10.  Tracking card body text lacks line-height for readability
 *  11.  Inline-style table headers — center this in CSS
 *  12.  Carbon-neutral "Coming soon" eyebrow needs muted color hint
 * ============================================================ */

body[data-page="shipping"] .grid-3 > .card,
body[data-page="shipping"] .grid-2 > .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

body[data-page="shipping"] .grid-3 > .card .card__body-text,
body[data-page="shipping"] .grid-2 > .card .card__body-text {
  margin-top: auto;
}

body[data-page="shipping"] .card__eyebrow {
  margin-bottom: var(--space-1, 4px);
}

body[data-page="shipping"] table tbody tr {
  transition: background-color 160ms ease;
}

body[data-page="shipping"] table tbody tr:hover {
  background-color: color-mix(in srgb, var(--color-surface-raised) 60%, transparent);
}

@media (max-width: 640px) {
  body[data-page="shipping"] table,
  body[data-page="shipping"] table thead,
  body[data-page="shipping"] table tbody,
  body[data-page="shipping"] table tr,
  body[data-page="shipping"] table th,
  body[data-page="shipping"] table td {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    position: static !important;
  }
  body[data-page="shipping"] table thead { display: none; }
  body[data-page="shipping"] table tbody {
    display: grid;
    gap: 10px;
  }
  body[data-page="shipping"] table tbody tr {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-raised);
    overflow: hidden;
  }
  body[data-page="shipping"] table tbody td {
    display: grid;
    grid-template-columns: minmax(86px, 35%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--color-border);
    font-size: 12.5px;
    overflow-wrap: anywhere;
  }
  body[data-page="shipping"] table tbody td:last-child { border-bottom: 0; }
  body[data-page="shipping"] table tbody td::before {
    color: var(--color-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  body[data-page="shipping"] table:not(.togo-rate-matrix) tbody td:nth-of-type(1)::before { content: "Zone"; }
  body[data-page="shipping"] table:not(.togo-rate-matrix) tbody td:nth-of-type(2)::before { content: "Countries"; }
  body[data-page="shipping"] table:not(.togo-rate-matrix) tbody td:nth-of-type(3)::before { content: "Below"; }
  body[data-page="shipping"] table:not(.togo-rate-matrix) tbody td:nth-of-type(4)::before { content: "Free above"; }
  body[data-page="shipping"] .togo-rate-matrix tbody td:nth-of-type(1)::before { content: "Zone"; }
  body[data-page="shipping"] .togo-rate-matrix tbody td:nth-of-type(2)::before { content: "Countries"; }
  body[data-page="shipping"] .togo-rate-matrix tbody td:nth-of-type(3)::before { content: "Up to 1kg"; }
  body[data-page="shipping"] .togo-rate-matrix tbody td:nth-of-type(4)::before { content: "Up to 5kg"; }
  body[data-page="shipping"] .togo-rate-matrix tbody td:nth-of-type(5)::before { content: "Up to 10kg"; }
  body[data-page="shipping"] .togo-rate-matrix tbody td:nth-of-type(6)::before { content: "Up to 25kg"; }
  body[data-page="shipping"] .togo-rate-matrix tbody td:nth-of-type(7)::before { content: "Free above"; }
}

body[data-page="shipping"] .togo-ship-callout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-5);
}

body[data-page="shipping"] .togo-ship-callout__pill {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body[data-page="shipping"] .togo-ship-callout__pill strong {
  color: var(--color-text);
  margin-left: 4px;
}

body[data-page="shipping"] section .card[style*="margin-inline:auto"] {
  padding: var(--space-5) var(--space-5);
  position: relative;
}

body[data-page="shipping"] section .card[style*="margin-inline:auto"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 2px;
  background-color: var(--color-accent);
  opacity: 0.55;
}

body[data-page="shipping"] section .card[style*="margin-inline:auto"] .card__body-text {
  line-height: var(--leading-normal);
}

body[data-page="shipping"] main section:last-of-type p[style*="text-align:center"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

body[data-page="shipping"] main section:last-of-type p[style*="text-align:center"] .btn {
  margin-left: 0 !important;
}

@media (max-width: 540px) {
  body[data-page="shipping"] main section:last-of-type p[style*="text-align:center"] .btn {
    width: 100%;
  }
}


/* ============================================================
 *  4 · RETURNS — returns.html
 * ============================================================
 *  Issues addressed:
 *   1.  Eligible vs Excluded cards mix green/red borders — pad inconsistent
 *   2.  Eligible eyebrow "Eligible · 1" color hardcoded — tighten alignment
 *   3.  3-step process cards uneven heights (titles wrap differently)
 *   4.  Step number eyebrows lack visual hierarchy — bump weight
 *   5.  Return-form fieldset legend "Reason for return" hugs border
 *   6.  Radio labels: vertical-align of input vs text drifts
 *   7.  File-upload input renders ugly native UI — soften with custom
 *       padding + label-like outline
 *   8.  Submit row "Submit request" button stretches awkwardly on mobile
 *   9.  Result panel (#rr-result) needs animated entry (success/error)
 *  10.  Bottom CTA row 3 buttons (info@ / Help / FAQ) inline-margin overflow
 *  11.  "EU Law" card body text margin-top:var(--space-3) compresses on
 *       narrow screens — needs explicit p+p sibling spacing
 *  12.  Tamper-evident strong-tags lose weight contrast in light theme
 * ============================================================ */

body[data-page="returns"] .grid-2 > .card,
body[data-page="returns"] .grid-3 > .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

body[data-page="returns"] .grid-3 > .card .card__body-text,
body[data-page="returns"] .grid-2 > .card .card__body-text {
  margin-top: auto;
}

body[data-page="returns"] .card__eyebrow {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}

body[data-page="returns"] fieldset legend {
  font-weight: var(--weight-semibold);
}

body[data-page="returns"] fieldset label {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background-color 160ms ease;
}

body[data-page="returns"] fieldset label:hover {
  background-color: color-mix(in srgb, var(--color-surface-raised) 60%, transparent);
}

body[data-page="returns"] fieldset input[type="radio"] {
  accent-color: var(--color-accent);
  width: 18px;
  height: 18px;
  margin-top: 2px !important;
}

body[data-page="returns"] input[type="file"] {
  cursor: pointer;
}

body[data-page="returns"] input[type="file"]::file-selector-button {
  padding: 8px 14px;
  margin-right: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background-color: var(--color-surface-raised);
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

body[data-page="returns"] input[type="file"]::file-selector-button:hover {
  background-color: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-text);
}

body[data-page="returns"] #rr-submit {
  min-width: 200px;
}

body[data-page="returns"] #rr-result:not([hidden]) {
  animation: togo-page-fade-in 280ms ease;
}

body[data-page="returns"] strong {
  font-weight: var(--weight-semibold);
}

body[data-page="returns"] main section:last-of-type p[style*="text-align:center"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

body[data-page="returns"] main section:last-of-type p[style*="text-align:center"] .btn {
  margin-left: 0 !important;
}

@media (max-width: 540px) {
  body[data-page="returns"] #rr-submit { width: 100%; }
  body[data-page="returns"] #return-form > div:last-of-type {
    justify-content: center !important;
  }
  body[data-page="returns"] main section:last-of-type p[style*="text-align:center"] .btn {
    width: 100%;
  }
}


/* ============================================================
 *  5 · QUALITY — quality.html
 * ============================================================
 *  Issues addressed:
 *   1.  Trust-pills in trust-bar are 3 generic spans — give them dots/sep
 *   2.  QC-spec table headers "TEST | METHOD | ACCEPTANCE" lack
 *       sticky-row affordance + cell hover
 *   3.  Four-pillar grid trust-tile titles wrap unevenly — equal-h
 *   4.  Trust-tile inner spacing not aligned with card padding
 *   5.  Methodology library cards (3-grid) have varied lead-text heights —
 *       eyebrow + title not aligned
 *   6.  "Verify yourself" centered CTA buttons overflow on mobile
 *   7.  Bottom HIPAA disclaimer card has no subtle outline-rail
 *   8.  Strong tags inside trust-tile__body lose color contrast
 *   9.  COA section: 2 CTAs side-by-side need wrap-flex centering
 *  10.  Card interactive lift on methodology cards too aggressive
 *  11.  Table value column ≥99.0% lacks numeric tabular alignment
 *  12.  Card eyebrow color drifts on hover — lock muted color
 * ============================================================ */

body[data-page="quality"] table {
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

body[data-page="quality"] table th:first-child,
body[data-page="quality"] table td:first-child {
  width: 24%;
  min-width: 116px;
}

body[data-page="quality"] table th,
body[data-page="quality"] table td {
  overflow-wrap: normal;
  word-break: normal;
}

body[data-page="quality"] table tbody tr {
  transition: background-color 160ms ease;
}

body[data-page="quality"] table tbody tr:hover {
  background-color: color-mix(in srgb, var(--color-surface-raised) 60%, transparent);
}

body[data-page="quality"] .grid-2 > .card,
body[data-page="quality"] .grid-3 > .card {
  display: flex;
  flex-direction: column;
}

body[data-page="quality"] .trust-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}

body[data-page="quality"] .trust-tile__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin: 0;
}

body[data-page="quality"] .trust-tile__body {
  color: var(--color-text-soft);
  line-height: var(--leading-normal);
  margin: 0;
}

body[data-page="quality"] .trust-tile__body strong {
  color: var(--color-text);
}

body[data-page="quality"] .card--interactive:hover {
  transform: translateY(-2px);
}

body[data-page="quality"] .card--interactive .card__eyebrow {
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="quality"] .card--interactive:hover .card__eyebrow {
  color: var(--color-text-muted);
}

body[data-page="quality"] .card[style*="margin-inline:auto"] {
  position: relative;
  padding: var(--space-5);
}

body[data-page="quality"] .card[style*="margin-inline:auto"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 2px;
  background-color: var(--color-accent);
  opacity: 0.55;
}

body[data-page="quality"] section p[style*="text-align:center"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

body[data-page="quality"] section p[style*="text-align:center"] .btn {
  margin-left: 0 !important;
}

@media (max-width: 540px) {
  body[data-page="quality"] table {
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-page="quality"] table thead {
    display: none;
  }

  body[data-page="quality"] table tbody,
  body[data-page="quality"] table tr,
  body[data-page="quality"] table td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  body[data-page="quality"] table tbody {
    display: grid;
    gap: 10px;
  }

  body[data-page="quality"] table tr {
    overflow: hidden;
    border: 1px solid var(--color-border) !important;
    border-radius: 14px;
    background: var(--color-surface);
  }

  body[data-page="quality"] table td {
    position: relative;
    display: block;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 10px 12px 10px 116px !important;
    line-height: 1.35;
  }

  body[data-page="quality"] table td:last-child {
    border-bottom: 0 !important;
  }

  body[data-page="quality"] table td::before {
    position: absolute;
    left: 12px;
    top: 10px;
    width: 88px;
    color: var(--color-text-muted);
    content: "";
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  body[data-page="quality"] table td:nth-child(1)::before { content: "Test"; }
  body[data-page="quality"] table td:nth-child(2)::before { content: "Method"; }
  body[data-page="quality"] table td:nth-child(3)::before { content: "Acceptance"; }

  body[data-page="quality"] table th:first-child,
  body[data-page="quality"] table td:first-child {
    white-space: normal;
  }

  body[data-page="quality"] .grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="quality"] .grid-2 > .card {
    padding: 18px 20px !important;
  }

  body[data-page="quality"] section p[style*="text-align:center"] .btn {
    width: 100%;
  }
}


/* ============================================================
 *  Shared animations + reduced-motion fallback
 * ============================================================ */

@keyframes togo-page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="contact"] #sf-result,
  body[data-page="returns"] #rr-result:not([hidden]) {
    animation: none;
  }
  body[data-page="faq"] .faq-item,
  body[data-page="shipping"] table tbody tr,
  body[data-page="quality"] table tbody tr,
  body[data-page="returns"] fieldset label,
  body[data-page="contact"] .form-field input,
  body[data-page="contact"] .form-field textarea {
    transition: none;
  }
  body[data-page="quality"] .card--interactive:hover {
    transform: none;
  }
}


/* ============================================================
 *  Light-theme tweaks (raises contrast on light surface)
 * ============================================================ */

html[data-theme="light"] body[data-page="faq"] .faq-item__body strong,
html[data-theme="light"] body[data-page="returns"] strong,
html[data-theme="light"] body[data-page="shipping"] .card__body-text strong,
html[data-theme="light"] body[data-page="quality"] .trust-tile__body strong {
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

html[data-theme="light"] body[data-page="shipping"] section .card[style*="margin-inline:auto"]::before,
html[data-theme="light"] body[data-page="quality"] .card[style*="margin-inline:auto"]::before {
  opacity: 0.7;
}

html[data-theme="light"] body[data-page="contact"] .form-field input:focus-visible,
html[data-theme="light"] body[data-page="contact"] .form-field textarea:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}