/* ============================================================================
   DropsA — Global Design System (component styles).
   Loaded site-wide. Every rule is driven by the tokens in tokens.css, so a
   single token edit propagates to all components everywhere they are used.
   Targets the design-system `.ds-*` classes (used by the shared Astro
   components + the style guide). Existing page markup does NOT use these
   classes, so the live 475 pages are unaffected until individually adopted.
   ============================================================================ */

/* ---------- Layout primitives ---------- */
.ds-container{max-width:var(--container-width);margin-inline:auto;padding-inline:var(--space-5)}
.ds-section{padding-block:var(--spacing-section)}
.ds-section--alt{background:var(--color-surface-alt)}

/* ---------- Typography ---------- */
.ds-eyebrow{font-size:var(--text-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--color-accent-text)}
.ds-display{font-family:var(--font-sans);font-size:var(--text-display);font-weight:var(--fw-bold);
  line-height:var(--leading-tight);letter-spacing:-1.2px;color:var(--color-ink)}
.ds-h1{font-size:var(--text-h1);font-weight:var(--fw-bold);line-height:var(--leading-tight);letter-spacing:-1px;color:var(--color-ink)}
.ds-h2{font-size:var(--text-h2);font-weight:var(--fw-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--color-ink)}
.ds-h2--ruled::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--color-accent);margin-top:14px}
.ds-h3{font-size:var(--text-h3);font-weight:var(--fw-semibold);color:var(--color-ink)}
.ds-h4{font-size:var(--text-h4);font-weight:var(--fw-semibold);color:var(--color-ink)}
.ds-body{font-size:var(--text-body);line-height:var(--leading-relaxed);color:var(--color-body)}
.ds-small{font-size:var(--text-small);color:var(--color-muted)}

/* ---------- Buttons ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:1rem;line-height:1;
  min-height:48px;padding:0 22px;border-radius:var(--radius-button);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:.16s ease;white-space:nowrap}
.ds-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ds-btn[disabled],.ds-btn.is-disabled{opacity:.5;cursor:not-allowed}
.ds-btn--primary{background:var(--color-accent);color:var(--color-primary-dark);border-color:var(--color-accent);
  box-shadow:0 8px 22px rgba(255,193,7,.26)}
.ds-btn--primary:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark);transform:translateY(-1px)}
.ds-btn--secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.ds-btn--secondary:hover{background:var(--color-primary);color:#fff}
.ds-btn--ghost{background:var(--color-surface-alt);color:var(--color-primary);border-color:transparent}
.ds-btn--ghost:hover{background:var(--steel-100)}
.ds-btn--on-dark{background:#fff;color:var(--color-primary)}
.ds-btn--on-dark:hover{background:#eef3fa}
.ds-btn--sm{min-height:38px;font-size:.9rem;padding:0 16px}
.ds-btn--lg{min-height:54px;font-size:1.08rem;padding:0 30px}

/* ---------- Cards ---------- */
.ds-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ds-card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--steel-300)}
.ds-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}

/* Product card */
.ds-product-card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;text-align:center;padding:var(--space-5);
  gap:var(--space-3);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ds-product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--steel-300)}
.ds-product-card img{max-width:140px;align-self:center}
.ds-product-card h3{margin:0;font-size:1.15rem;font-weight:var(--fw-semibold);color:var(--color-ink)}
.ds-product-card p{margin:0;font-size:.95rem;color:var(--color-muted);flex:1}

/* Industry card (linked image card) */
.ds-industry-card{display:block;text-decoration:none;background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ds-industry-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--steel-300)}
.ds-industry-card__media{aspect-ratio:16/9;background:var(--color-surface-alt);overflow:hidden}
.ds-industry-card__media img{width:100%;height:100%;object-fit:cover}
.ds-industry-card__body{padding:var(--space-5)}
.ds-industry-card__body h3{margin:0 0 6px;font-size:1.15rem;font-weight:var(--fw-semibold);color:var(--color-ink)}
.ds-industry-card__body p{margin:0 0 10px;font-size:.95rem;color:var(--color-muted)}
.ds-industry-card__cta{font-size:.85rem;font-weight:var(--fw-semibold);color:var(--color-accent-text)}

/* ---------- CTA block ---------- */
.ds-cta{background:linear-gradient(135deg,var(--color-primary),var(--navy-700));border-radius:var(--radius-card);
  padding:var(--space-7);display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between;
  color:#fff;box-shadow:var(--shadow-2);border-top:3px solid var(--color-accent)}
.ds-cta h3{margin:0 0 6px;font-size:1.6rem;color:#fff}
.ds-cta p{margin:0;color:#bcd0e8}
.ds-cta--center{justify-content:center;text-align:center;flex-direction:column}

/* ---------- Tables (technical data) ---------- */
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;
  border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden}
.ds-table th{background:var(--color-primary);color:#fff;text-align:left;font-weight:var(--fw-semibold);padding:11px 14px;font-size:.9rem}
.ds-table td{padding:10px 14px;border-top:1px solid var(--steel-100);color:var(--color-body)}
.ds-table tr:nth-child(even) td{background:var(--color-surface-alt)}
.ds-table td:first-child{font-weight:var(--fw-semibold);color:var(--color-ink)}

/* ---------- Breadcrumb ---------- */
.ds-breadcrumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.85rem;
  background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-pill);
  padding:8px 16px;box-shadow:var(--shadow-1);width:max-content;max-width:100%}
.ds-breadcrumb a{color:var(--color-primary);text-decoration:none;font-weight:var(--fw-medium)}
.ds-breadcrumb a:hover{text-decoration:underline}
.ds-breadcrumb .sep{color:var(--steel-300)}
.ds-breadcrumb [aria-current]{color:var(--color-muted)}

/* ---------- Forms ---------- */
.ds-field{margin-bottom:var(--space-4)}
.ds-field label{display:block;font-size:.85rem;font-weight:var(--fw-semibold);color:var(--color-ink);margin-bottom:6px}
.ds-field input,.ds-field select,.ds-field textarea{width:100%;font-family:var(--font-sans);font-size:1rem;
  color:var(--color-ink);background:#fff;border:1.5px solid var(--steel-300);border-radius:var(--radius-md);padding:11px 14px;transition:.15s}
.ds-field input:focus,.ds-field select:focus,.ds-field textarea:focus{outline:none;border-color:var(--navy-600);box-shadow:var(--focus-ring)}
.ds-field .ds-help{font-size:.78rem;color:var(--color-muted);margin-top:5px}

/* ---------- FAQ ---------- */
.ds-faq details{border-bottom:1px solid var(--color-line);padding:14px 0}
.ds-faq summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--color-ink);list-style:none;
  display:flex;justify-content:space-between;gap:12px}
.ds-faq summary::-webkit-details-marker{display:none}
.ds-faq summary::after{content:"+";color:var(--color-accent-dark);font-weight:700}
.ds-faq details[open] summary::after{content:"–"}
.ds-faq details p{margin:10px 0 0;color:var(--color-body);line-height:var(--leading-relaxed)}