/* SILINK component styles — extracted verbatim from the design-system components.
   Static build of the homepage; no React/Babel at runtime. */

/* ── Button ── */
.sl-btn {
    --_bg: var(--accent);
    --_bg-hover: var(--accent-hover);
    --_bg-press: var(--accent-pressed);
    --_fg: var(--accent-contrast);
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans); font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--dur-base) var(--ease-standard),
                border-color var(--dur-base) var(--ease-standard),
                color var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard);
  }
  .sl-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

  /* sizes */
  .sl-btn--sm { font-size: var(--text-sm); padding: 0.5rem 1.1rem; }
  .sl-btn--md { font-size: var(--text-base); padding: 0.7rem 1.6rem; }
  .sl-btn--lg { font-size: var(--text-md); padding: 0.85rem 2rem; }

  /* variants */
  .sl-btn--primary { background: var(--_bg); color: var(--_fg); border-color: var(--_bg); }
  .sl-btn--primary:hover { background: var(--_bg-hover); border-color: var(--_bg-hover); }
  .sl-btn--primary:active { background: var(--_bg-press); border-color: var(--_bg-press); }

  .sl-btn--outline { background: transparent; color: var(--text-strong); border-color: var(--border-strong); }
  .sl-btn--outline:hover { color: var(--accent-strong); border-color: var(--accent); }
  .sl-btn--outline:active { color: var(--accent-pressed); border-color: var(--accent-pressed); }

  .sl-btn--ghost { background: transparent; color: var(--accent-strong); border-color: transparent; }
  .sl-btn--ghost:hover { background: var(--accent-tint); }

  /* on dark surfaces */
  .sl-btn--outline.sl-btn--on-dark { color: var(--text-on-dark); border-color: rgba(255,255,255,0.4); }
  .sl-btn--outline.sl-btn--on-dark:hover { color: var(--accent); border-color: var(--accent); }

  .sl-btn[disabled], .sl-btn[aria-disabled="true"] {
    opacity: 0.45; cursor: not-allowed; pointer-events: none;
  }
  .sl-btn--block { width: 100%; }

/* ── Input ── */
.sl-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
  .sl-field__label {
    font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .sl-field__label .sl-req { color: var(--accent-strong); margin-left: 2px; }
  .sl-input {
    width: 100%; box-sizing: border-box;
    font-family: var(--font-sans); font-size: var(--text-base);
    color: var(--text-strong); background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem; outline: none;
    transition: border-color var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard);
  }
  .sl-input::placeholder { color: var(--text-muted); }
  .sl-input:hover { border-color: var(--silink-steel); }
  .sl-input:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
  .sl-input[disabled] { opacity: 0.55; cursor: not-allowed; background: var(--surface-muted); }
  /* dark surface variant (hero/contact forms) */
  .sl-field--on-dark .sl-field__label { color: var(--text-label-dark); }
  .sl-input--on-dark {
    background: var(--field-dark-bg); border-color: var(--field-dark-border);
    color: var(--text-on-dark);
  }
  .sl-input--on-dark::placeholder { color: var(--field-dark-placeholder); }
  .sl-input--on-dark:hover { border-color: rgba(255,255,255,0.3); }
  .sl-input--on-dark:focus { border-color: var(--accent); box-shadow: none; }
  .sl-field__hint { font-size: var(--text-sm); color: var(--text-muted); }
  .sl-field--error .sl-input { border-color: var(--silink-danger); }
  .sl-field--error .sl-field__hint { color: var(--silink-danger); }

/* ── Textarea ── */
.sl-ta-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
  .sl-ta-field__label {
    font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .sl-ta-field--on-dark .sl-ta-field__label { color: var(--text-label-dark); }
  .sl-textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px;
    font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal);
    color: var(--text-strong); background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem; outline: none;
    transition: border-color var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard);
  }
  .sl-textarea::placeholder { color: var(--text-muted); }
  .sl-textarea:hover { border-color: var(--silink-steel); }
  .sl-textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
  .sl-textarea--on-dark {
    background: var(--field-dark-bg); border-color: var(--field-dark-border); color: var(--text-on-dark);
  }
  .sl-textarea--on-dark::placeholder { color: var(--field-dark-placeholder); }
  .sl-textarea--on-dark:focus { border-color: var(--accent); box-shadow: none; }

/* ── Card ── */
.sl-card {
    background: var(--surface-card); border-radius: var(--radius-lg);
    padding: var(--space-6); box-shadow: var(--shadow-card);
    font-family: var(--font-sans); box-sizing: border-box;
    transition: transform var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard);
  }
  .sl-card--accent { border-top: var(--border-accent-width) solid var(--accent); }
  .sl-card--bordered { box-shadow: none; border: 1px solid var(--border); }
  .sl-card--interactive { cursor: pointer; }
  .sl-card--interactive:hover { transform: var(--lift); box-shadow: var(--shadow-card-hover); }
  .sl-card__icon { font-size: 2rem; color: var(--accent-strong); margin-bottom: var(--space-4); }
  .sl-card__title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-strong); margin: 0 0 var(--space-2); }
  .sl-card__body { font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-relaxed); margin: 0; }

/* ── StatBox ── */
.sl-stat {
    background: var(--surface-muted); border-left: var(--border-accent-width) solid var(--accent);
    border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
    font-family: var(--font-sans); box-sizing: border-box;
  }
  .sl-stat--plain { background: transparent; }
  .sl-stat__num {
    font-size: var(--text-2xl); font-weight: 800; color: var(--accent-strong);
    line-height: 1; letter-spacing: var(--tracking-display);
  }
  .sl-stat__label { font-size: var(--text-sm); color: var(--text-body); margin-top: var(--space-2); }
  .sl-stat--on-dark { background: rgba(255,255,255,0.04); }
  .sl-stat--on-dark .sl-stat__label { color: var(--text-on-dark-muted); }

/* ── SectionLabel ── */
.sl-seclabel {
    display: block; font-family: var(--font-sans);
    font-size: var(--role-label-size); font-weight: var(--role-label-weight);
    letter-spacing: var(--role-label-spacing); text-transform: uppercase;
    color: var(--accent-strong); margin: 0;
  }
  .sl-seclabel--muted { color: var(--text-muted); }
  .sl-sechead { font-family: var(--font-sans); }
  .sl-sechead__title {
    font-size: var(--text-2xl); font-weight: var(--weight-bold);
    color: var(--text-strong); letter-spacing: var(--tracking-display);
    margin: var(--space-2) 0 0;
  }
  .sl-sechead--on-dark .sl-sechead__title { color: var(--text-on-dark); }