/*!
 * ShipKit widget theme — CSS custom properties (Lifted DS, blue brand).
 * License: MIT © 2026 Daniel Wilson Kemp / Lifted Holdings.
 *
 * The widget (shipkit.js) injects its own structural base styles, so linking
 * this file is OPTIONAL. Use it to retheme the widget to match your brand:
 * override any `--sk-*` property on `.sk` (or a parent) and the widget follows.
 * The defaults below map to ShipKit's Lifted "lift blue" brand (#2E6BFF) with a
 * cyan (#19C7F5) 3-D Secure trust accent.
 *
 *   <link rel="stylesheet" href="/css/shipkit.css">
 *   <div id="ship"></div>
 *   <script src="/js/shipkit.js"></script>
 *   <script>ShipKit.init({ mount:'#ship', endpoint:'/api' });</script>
 *
 * To brand it, set your own values, e.g.:
 *   .sk { --sk-primary:#7C3AED; --sk-radius:6px; }
 */

.sk {
  /* Surfaces — Lifted ink spine */
  --sk-bg: #141D31;
  --sk-ground: #0B1020;
  --sk-surface: #202C46;
  --sk-border: rgba(174, 184, 208, 0.16);

  /* Text */
  --sk-text: #AEB8D0;
  --sk-heading: #EFF3F9;
  --sk-muted: #8A97B4; /* WCAG-AA on the dark widget surface */

  /* Brand + intent — lift blue + cyan trust */
  --sk-primary: #2E6BFF;
  --sk-primary-hover: #5AA6FF;
  --sk-on-primary: #ffffff;
  --sk-secure: #19C7F5; /* 3-D Secure / trust */
  --sk-warning: #FFB920;
  --sk-danger: #FF4D6A;

  /* Shape + type */
  --sk-radius: 12px;
  --sk-radius-sm: 8px;
  --sk-gap: 16px;
  --sk-font: 'Inter', ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sk-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Consolas, monospace;
  --sk-shadow: 0 18px 48px -14px rgba(0, 0, 0, 0.6);
}

/* Light theme: set data-theme="light" on the widget (or ShipKit.init({theme:'light'})). */
.sk[data-theme="light"] {
  --sk-bg: #ffffff;
  --sk-ground: #EFF3F9;
  --sk-surface: #EFF3F9;
  --sk-border: rgba(11, 16, 32, 0.14);
  --sk-text: #202C46;
  --sk-heading: #0B1020;
  --sk-muted: #4A5A78;
  --sk-shadow: 0 14px 34px -16px rgba(11, 16, 32, 0.24);
}

/*
 * Keyboard focus ring — scoped to the widget and marked !important so it
 * survives a host page that does the common `input:focus{outline:none}`.
 * Without this the embedded card / OTP / address fields could show no focus
 * at all, breaking keyboard checkout.
 */
.sk :focus-visible {
  outline: 2px solid var(--sk-primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--sk-radius-sm);
}

/* Follow the page when the host prefers light and hasn't forced a theme. */
@media (prefers-color-scheme: light) {
  .sk:not([data-theme]) {
    --sk-bg: #ffffff;
    --sk-ground: #EFF3F9;
    --sk-surface: #EFF3F9;
    --sk-border: rgba(11, 16, 32, 0.14);
    --sk-text: #202C46;
    --sk-heading: #0B1020;
    --sk-muted: #4A5A78;
    --sk-shadow: 0 14px 34px -16px rgba(11, 16, 32, 0.24);
  }
}