/* Sky Eye Glasses — brand styles from realized Stitch tokens.
   VERIFICATION MARKER: SKYB2B::CSS::v1.0.0 */

:root {
  --sky-navy: #13395C;
  --sky-navy-900: #002340;
  --sky-teal: #0E7C86;
  --sky-teal-link: #0B5C63;
  --sky-orange: #C2410C;
  --sky-bg: #F5F8FA;
  --sky-card: #FFFFFF;
  --sky-border: #D9E2EC;
  --sky-ink: #1A1C1E;
  --sky-ink-variant: #43474E;
  --sky-radius: 10px;
  --sky-pill: 9999px;
  --sky-shadow: 0 4px 12px rgba(15,27,42,.08);
  --sky-font-head: "Manrope", system-ui, sans-serif;
  --sky-font-body: "Inter", system-ui, sans-serif;
}

body { font-family: var(--sky-font-body); color: var(--sky-ink); }
h1,h2,h3,h4 { font-family: var(--sky-font-head); color: var(--sky-navy); letter-spacing: -0.01em; }

/* Buttons */
.sky-btn-primary,
a.button.sky-btn-primary,
button.sky-btn-primary {
  background: var(--sky-orange); color: #fff; border: 0;
  border-radius: var(--sky-radius); padding: 14px 22px; font-weight: 600;
  font-family: var(--sky-font-body); cursor: pointer; display: inline-block;
}
.sky-btn-primary:hover { background: #a8380a; color:#fff; }
.sky-btn-secondary,
a.button.sky-btn-secondary {
  background: var(--sky-teal); color: #fff; border-radius: var(--sky-radius);
  padding: 12px 20px; font-weight: 600; display:inline-block;
}
.sky-btn-secondary:hover { background: var(--sky-teal-link); color:#fff; }

/* Visible focus everywhere (WCAG 2.2) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sky-orange); outline-offset: 2px;
}

/* Price gating on catalog + product */
.sky-gate { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.sky-gate__login { color: var(--sky-teal-link); font-weight:600; text-decoration:underline; }
.sky-gate__apply.button {
  background: var(--sky-teal); color:#fff; border-radius: var(--sky-radius);
  padding:8px 14px; font-weight:600; font-size:14px;
}
.sky-gate__lock { color: var(--sky-teal); }

/* Forms */
.sky-form { background: var(--sky-card); border:1px solid var(--sky-border);
  border-radius: var(--sky-radius); padding: 28px; max-width: 720px; }
.sky-form__row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.sky-field { display:flex; flex-direction:column; gap:6px; margin:0 0 18px; }
.sky-field label { font-size:14px; font-weight:600; color: var(--sky-ink-variant); }
.sky-field input, .sky-field select, .sky-field textarea {
  border:1px solid var(--sky-border); border-radius: var(--sky-radius);
  padding:12px 14px; font-size:16px; background:#fff; width:100%;
}
.sky-field input:focus, .sky-field select:focus, .sky-field textarea:focus {
  border-color: var(--sky-teal); box-shadow: 0 0 0 3px rgba(14,124,134,.15); outline:none;
}
.sky-help { font-size:13px; color: var(--sky-ink-variant); }

/* Notices */
.sky-notice { border-radius: var(--sky-radius); padding:14px 16px; margin:0 0 16px; }
.sky-notice--ok { background:#e6f4ea; border:1px solid #2E7D32; color:#1b5e20; }
.sky-notice--error { background:#fdecea; border:1px solid #B91C1C; color:#8a1111; }

/* Account dashboard */
.sky-dash-hero { background: var(--sky-navy); color:#fff; border-radius: var(--sky-radius);
  padding: 32px; margin-bottom: 24px; }
.sky-dash-hero h2 { color:#fff; margin-top:0; }
.sky-dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:32px; }
.sky-balance-card, .sky-profile-card {
  background: var(--sky-card); border:1px solid var(--sky-border);
  border-radius: var(--sky-radius); padding:24px; box-shadow: var(--sky-shadow);
}
.sky-label-caps { font-size:12px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color: var(--sky-teal); }
.sky-balance { font-family: var(--sky-font-head); font-size:40px; font-weight:700;
  color: var(--sky-navy); margin:6px 0; }

/* Tables */
.sky-table { width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--sky-border); border-radius: var(--sky-radius); overflow:hidden; }
.sky-table thead th { background: var(--sky-navy); color:#fff; font-family: var(--sky-font-head);
  font-weight:600; text-align:left; padding:14px 16px; font-size:14px; }
.sky-table td { padding:14px 16px; border-top:1px solid var(--sky-border); font-size:15px; }
.sky-table tbody tr:nth-child(even) { background: var(--sky-bg); }
.sky-pos { color:#2E7D32; font-weight:600; }
.sky-neg { color:#B91C1C; font-weight:600; }
.sky-pill { display:inline-block; background: rgba(14,124,134,.12); color: var(--sky-teal-link);
  border-radius: var(--sky-pill); padding:4px 12px; font-size:12px; font-weight:600; text-transform:uppercase; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* Mobile */
@media (max-width: 768px) {
  .sky-form__row, .sky-dash-grid { grid-template-columns: 1fr; }
  .sky-balance { font-size:32px; }
}