/*
 * Coinkun design system foundation.
 *
 * Loaded first by the landing, documentation and dashboard layouts. It defines
 * tokens and the few `ck-` primitives the surfaces actually share; surface
 * stylesheets own their layout. See docs/design-system.md for usage.
 *
 * The language is deliberately small: white surfaces, thin neutral lines, navy text,
 * one flat blue for actions and active state, semantic colours only for real states.
 * Surfaces are flat. Shadows only mark something that overlaps the page.
 *
 * Breakpoints (media queries cannot read custom properties):
 *   480px phone · 768px tablet · 1024px small desktop · 1280px desktop · 1440px wide
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-variable-884c49a1.woff2") format("woff2");
}

:root {
  /* Palette: white, cool grey-blue zones, one flat blue, navy text. */
  --ck-white: #ffffff;
  --ck-sky-50: #f3f7ff;
  --ck-sky-100: #e8f0ff;
  --ck-sky-300: #a9c4ff;
  --ck-blue-500: #3b74ff;
  --ck-blue-600: #1f5af0;
  --ck-blue-700: #1847c9;
  --ck-navy-700: #1c3460;
  --ck-navy-800: #12264a;
  --ck-navy-900: #0b1a33;
  --ck-slate-700: #34445f;
  --ck-slate-600: #4d5d78;
  --ck-slate-500: #60708a;
  --ck-slate-400: #8290a6;
  --ck-slate-300: #b8c3d4;
  --ck-slate-200: #d5ddea;
  --ck-slate-150: #e2e8f2;
  --ck-slate-100: #edf1f7;
  --ck-slate-50: #f5f8fd;

  /* Two surface levels: white, and a cool grey-blue for the few zones that need one. */
  --ck-bg: var(--ck-white);
  --ck-canvas: var(--ck-white);
  --ck-surface: var(--ck-white);
  --ck-surface-sunken: var(--ck-slate-50);
  --ck-surface-tint: var(--ck-slate-50);
  --ck-text: var(--ck-slate-700);
  --ck-text-strong: var(--ck-navy-900);
  --ck-text-muted: var(--ck-slate-500);
  --ck-text-subtle: var(--ck-slate-400);
  --ck-border: var(--ck-slate-150);
  --ck-border-strong: var(--ck-slate-200);
  --ck-border-control: var(--ck-slate-400);
  --ck-accent: var(--ck-blue-600);
  --ck-accent-hover: var(--ck-blue-700);
  --ck-accent-soft: var(--ck-sky-100);
  --ck-accent-softer: var(--ck-sky-50);
  --ck-accent-text: var(--ck-blue-700);
  --ck-accent-contrast: var(--ck-white);
  --ck-focus-ring: 0 0 0 3px rgb(59 116 255 / 32%);
  --ck-focus-outline: 2px solid var(--ck-blue-600);

  /* Status tones: text / background / border / indicator. Only for real states. */
  --ck-success-text: #0a7a55;
  --ck-success-bg: #e7f6ef;
  --ck-success-border: #bfe6d3;
  --ck-success-dot: #12a36f;
  --ck-warning-text: #945400;
  --ck-warning-bg: #fff5e1;
  --ck-warning-border: #f3d9a4;
  --ck-warning-dot: #d98a00;
  --ck-error-text: #b42331;
  --ck-error-bg: #fdedef;
  --ck-error-border: #f5c2c8;
  --ck-error-dot: #d63747;
  --ck-info-text: var(--ck-blue-700);
  --ck-info-bg: #eaf1ff;
  --ck-info-border: #c9daff;
  --ck-info-dot: var(--ck-blue-600);
  --ck-neutral-text: var(--ck-slate-600);
  --ck-neutral-bg: var(--ck-slate-100);
  --ck-neutral-border: var(--ck-slate-200);
  --ck-neutral-dot: var(--ck-slate-400);

  /* Navy code surfaces stay dark in both themes: the one deliberate contrast element. */
  --ck-code-bg: var(--ck-navy-900);
  --ck-code-bg-raised: var(--ck-navy-800);
  --ck-code-border: #22375e;
  --ck-code-text: #dbe6fb;
  --ck-code-muted: #8fa3c4;
  --ck-code-key: #9cc3ff;
  --ck-code-string: #8fd9b5;
  --ck-code-number: #f5c27a;
  --ck-code-flag: #c7b3ff;
  --ck-code-inline-bg: var(--ck-slate-100);
  --ck-code-inline-text: var(--ck-navy-800);

  /* Typography. Inter is bundled locally; monospace uses the platform stack. */
  --ck-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ck-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ck-text-2xs: 11px;
  --ck-text-xs: 12px;
  --ck-text-sm: 13px;
  --ck-text-base: 14px;
  --ck-text-md: 15px;
  --ck-text-lg: 17px;
  --ck-text-xl: 20px;
  --ck-text-2xl: 24px;
  --ck-text-3xl: 30px;
  --ck-tracking-display: -0.04em;
  --ck-tracking-heading: -0.02em;
  --ck-tracking-caps: 0.06em;
  --ck-weight-regular: 400;
  --ck-weight-medium: 500;
  --ck-weight-semibold: 600;

  /* 4px spacing scale. */
  --ck-space-1: 4px;
  --ck-space-2: 8px;
  --ck-space-3: 12px;
  --ck-space-4: 16px;
  --ck-space-5: 20px;
  --ck-space-6: 24px;
  --ck-space-8: 32px;
  --ck-space-10: 40px;
  --ck-space-12: 48px;
  --ck-space-16: 64px;
  --ck-space-20: 80px;
  --ck-space-24: 96px;

  /* Radii: 6–8px for controls, 10–12px for the few real cards. Only statuses are pills. */
  --ck-radius-xs: 4px;
  --ck-radius-sm: 6px;
  --ck-radius-md: 8px;
  --ck-radius-lg: 10px;
  --ck-radius-xl: 12px;
  --ck-radius-pill: 999px;

  /* Elevation exists only for overlays: menus, popovers and toasts; dialogs and drawers. */
  --ck-shadow-overlay: 0 12px 32px -12px rgb(11 26 51 / 22%), 0 2px 6px -2px rgb(11 26 51 / 8%);
  --ck-shadow-dialog: 0 28px 64px -24px rgb(11 26 51 / 34%), 0 4px 12px -4px rgb(11 26 51 / 10%);

  /* Controls. Touch-heavy actions use --ck-touch as their minimum. */
  --ck-control-sm: 32px;
  --ck-control-md: 40px;
  --ck-control-lg: 48px;
  --ck-touch: 44px;

  /* Layers and motion: short, no delays, nothing waits for an animation to read. */
  --ck-z-header: 30;
  --ck-z-sidebar: 40;
  --ck-z-popover: 50;
  --ck-z-dialog: 60;
  --ck-z-toast: 70;
  --ck-ease: cubic-bezier(.2, .7, .2, 1);
  --ck-duration-fast: 120ms;
  --ck-duration: 160ms;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* Motion is decorative everywhere; the platform preference makes everything static. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- Brand */
.ck-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ck-text-strong); text-decoration: none; flex-shrink: 0; }
.ck-brand__tile { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--ck-radius-md); background: var(--ck-blue-600); color: var(--ck-white); }
.ck-brand__mark { width: 22px; height: 22px; }
.ck-brand__name { font-family: var(--ck-font-sans); font-size: 20px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.ck-brand__product { padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--ck-border-strong); color: var(--ck-text-muted); font-size: var(--ck-text-sm); font-weight: var(--ck-weight-medium); letter-spacing: 0; line-height: 1.2; }

/* ---------------------------------------------------------------- Accessibility helpers */
.ck-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ck-skip-link { position: fixed; top: -120px; left: var(--ck-space-4); z-index: calc(var(--ck-z-dialog) + 5); padding: 10px 16px; border-radius: var(--ck-radius-md); background: var(--ck-navy-900); color: var(--ck-white); font: var(--ck-weight-semibold) var(--ck-text-sm)/1.4 var(--ck-font-sans); text-decoration: none; box-shadow: var(--ck-shadow-overlay); }
.ck-skip-link:focus { top: var(--ck-space-3); outline: var(--ck-focus-outline); outline-offset: 2px; }
.ck-btn:focus-visible,
.ck-icon-btn:focus-visible,
.ck-link:focus-visible { outline: var(--ck-focus-outline); outline-offset: 2px; }

/* A quiet section label. Used sparingly: a heading usually needs no kicker. */
.ck-eyebrow { display: inline-flex; align-items: center; gap: var(--ck-space-2); margin: 0; color: var(--ck-text-muted); font-family: var(--ck-font-sans); font-size: var(--ck-text-xs); font-weight: var(--ck-weight-semibold); letter-spacing: var(--ck-tracking-caps); line-height: 1.4; text-transform: uppercase; }

/* ---------------------------------------------------------------- Buttons */
.ck-btn { --ck-btn-bg: var(--ck-surface); --ck-btn-fg: var(--ck-text-strong); --ck-btn-border: var(--ck-border-strong); --ck-btn-hover-bg: var(--ck-surface-sunken); display: inline-flex; align-items: center; justify-content: center; gap: var(--ck-space-2); min-height: var(--ck-control-md); padding: 0 var(--ck-space-4); border: 1px solid var(--ck-btn-border); border-radius: var(--ck-radius-md); background: var(--ck-btn-bg); color: var(--ck-btn-fg); font: var(--ck-weight-semibold) var(--ck-text-sm)/1.2 var(--ck-font-sans); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--ck-duration-fast) var(--ck-ease), border-color var(--ck-duration-fast) var(--ck-ease), color var(--ck-duration-fast) var(--ck-ease); -webkit-tap-highlight-color: transparent; }
.ck-btn:hover { background: var(--ck-btn-hover-bg); color: var(--ck-btn-fg); }
.ck-btn .ui-icon { flex-shrink: 0; }
.ck-btn--primary { --ck-btn-bg: var(--ck-accent); --ck-btn-fg: var(--ck-accent-contrast); --ck-btn-border: var(--ck-accent); --ck-btn-hover-bg: var(--ck-accent-hover); }
.ck-btn--primary:hover { border-color: var(--ck-accent-hover); }
.ck-btn--secondary { --ck-btn-bg: var(--ck-surface); --ck-btn-fg: var(--ck-text-strong); --ck-btn-border: var(--ck-border-strong); --ck-btn-hover-bg: var(--ck-surface-sunken); }
.ck-btn--sm { min-height: var(--ck-control-sm); padding: 0 var(--ck-space-3); font-size: var(--ck-text-xs); border-radius: var(--ck-radius-sm); }
.ck-btn--lg { min-height: 44px; padding: 0 var(--ck-space-5); font-size: var(--ck-text-md); }
.ck-btn:disabled, .ck-btn[aria-disabled="true"] { cursor: not-allowed; --ck-btn-bg: var(--ck-surface-sunken); --ck-btn-fg: var(--ck-text-subtle); --ck-btn-border: var(--ck-border); --ck-btn-hover-bg: var(--ck-surface-sunken); }
.ck-btn[aria-busy="true"] { cursor: progress; }

.ck-icon-btn { display: inline-grid; place-items: center; width: var(--ck-control-md); height: var(--ck-control-md); flex-shrink: 0; padding: 0; border: 1px solid transparent; border-radius: var(--ck-radius-md); background: transparent; color: var(--ck-text-muted); cursor: pointer; transition: background-color var(--ck-duration-fast), color var(--ck-duration-fast), border-color var(--ck-duration-fast); }
.ck-icon-btn:hover { background: var(--ck-surface-sunken); color: var(--ck-text-strong); }
.ck-icon-btn--sm { width: var(--ck-control-sm); height: var(--ck-control-sm); border-radius: var(--ck-radius-sm); }
.ck-icon-btn--outlined { border-color: var(--ck-border-strong); background: var(--ck-surface); }

.ck-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ck-accent); font-weight: var(--ck-weight-semibold); text-decoration: none; text-underline-offset: 3px; }
.ck-link:hover { color: var(--ck-accent-hover); text-decoration: underline; }

/* ---------------------------------------------------------------- Status badges
 * Only for states that can change. Metadata, versions and networks are plain text.
 * Status is never colour alone: each tone has a distinct indicator shape and text.
 *   available/success  solid dot        planned   dashed ring
 *   deferred           hollow ring      unavailable/warning  slashed ring
 *   unknown/neutral    dotted ring      error     solid square
 *   pending/info       ring with centre
 */
.ck-badge { --ck-badge-text: var(--ck-neutral-text); --ck-badge-bg: var(--ck-neutral-bg); --ck-badge-dot: var(--ck-neutral-dot); display: inline-flex; align-items: center; gap: 6px; min-height: 20px; max-width: 100%; padding: 1px 8px 1px 7px; border-radius: var(--ck-radius-pill); background: var(--ck-badge-bg); color: var(--ck-badge-text); font: var(--ck-weight-semibold) var(--ck-text-2xs)/1.3 var(--ck-font-sans); letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle; }
.ck-badge::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--ck-badge-dot); }
.ck-badge--plain::before { display: none; }
.ck-badge--available, .ck-badge--success { --ck-badge-text: var(--ck-success-text); --ck-badge-bg: var(--ck-success-bg); --ck-badge-dot: var(--ck-success-dot); }
.ck-badge--planned { --ck-badge-text: var(--ck-info-text); --ck-badge-bg: var(--ck-accent-softer); }
.ck-badge--planned::before { background: transparent; border: 1.5px dashed var(--ck-info-dot); width: 8px; height: 8px; }
.ck-badge--deferred { --ck-badge-text: var(--ck-neutral-text); --ck-badge-bg: var(--ck-neutral-bg); }
.ck-badge--deferred::before { background: transparent; border: 1.5px solid var(--ck-neutral-dot); width: 8px; height: 8px; }
.ck-badge--unavailable, .ck-badge--warning { --ck-badge-text: var(--ck-warning-text); --ck-badge-bg: var(--ck-warning-bg); --ck-badge-dot: var(--ck-warning-dot); }
.ck-badge--unavailable::before { background: linear-gradient(135deg, transparent 42%, var(--ck-warning-dot) 42%, var(--ck-warning-dot) 58%, transparent 58%); border: 1.5px solid var(--ck-warning-dot); width: 9px; height: 9px; }
.ck-badge--unknown, .ck-badge--neutral { --ck-badge-text: var(--ck-neutral-text); --ck-badge-bg: var(--ck-neutral-bg); }
.ck-badge--unknown::before { background: transparent; border: 1.5px dotted var(--ck-neutral-dot); width: 9px; height: 9px; }
.ck-badge--error { --ck-badge-text: var(--ck-error-text); --ck-badge-bg: var(--ck-error-bg); --ck-badge-dot: var(--ck-error-dot); }
.ck-badge--error::before { border-radius: 2px; }
.ck-badge--pending, .ck-badge--info { --ck-badge-text: var(--ck-info-text); --ck-badge-bg: var(--ck-info-bg); --ck-badge-dot: var(--ck-info-dot); }
.ck-badge--pending::before { background: radial-gradient(circle, var(--ck-info-dot) 0 2px, transparent 2.5px); border: 1.5px solid var(--ck-info-dot); width: 9px; height: 9px; }

/* A version marker such as "API v1": plain monospace text, not a pill. */
.ck-version { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--ck-text-muted); font: var(--ck-weight-semibold) 11px/1 var(--ck-font-mono); letter-spacing: 0.02em; white-space: nowrap; }
.ck-version--accent { color: var(--ck-accent-text); }

/* HTTP methods: fixed width, text first, tone second. */
.ck-method { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 20px; padding: 0 6px; border-radius: var(--ck-radius-xs); font: 700 10.5px/1 var(--ck-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.ck-method--get { background: var(--ck-success-bg); color: var(--ck-success-text); }
.ck-method--post { background: var(--ck-info-bg); color: var(--ck-info-text); }
.ck-method--patch, .ck-method--put { background: var(--ck-warning-bg); color: var(--ck-warning-text); }
.ck-method--delete { background: var(--ck-error-bg); color: var(--ck-error-text); }

.ck-kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-xs); background: var(--ck-surface); color: var(--ck-text-muted); font: var(--ck-weight-semibold) 10.5px/1 var(--ck-font-sans); }

/* ---------------------------------------------------------------- Code */
.ck-code { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--ck-code-border); border-radius: var(--ck-radius-md); background: var(--ck-code-bg); color: var(--ck-code-text); }
.ck-code pre { margin: 0; padding: var(--ck-space-4) var(--ck-space-5); overflow-x: auto; color: var(--ck-code-text); font: 400 12.5px/1.7 var(--ck-font-mono); tab-size: 2; scrollbar-width: thin; scrollbar-color: #2a4274 transparent; }
.ck-code code { font: inherit; color: inherit; background: none; padding: 0; }

.ck-dot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--ck-accent); }