/* Soverra components. All classes read from the design tokens (tokens.css),
   so every component follows the active theme (light default, .mode-dark for dark). */

/* ---- kicker / mono label ---- */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.kicker b{color:var(--signal);font-weight:700}

/* ---- buttons ---- */
.btn{font-family:var(--sans);font-size:15px;font-weight:600;padding:12px 22px;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;transition:.15s}
.btn-primary{background:var(--sov);color:var(--sov-btn-ink)}
.btn-primary:hover{background:var(--sov-hover)}
.btn-signal{background:var(--voltage);color:var(--signal-ink)}
.btn-signal:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--slate)}

/* ---- pills ---- */
.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:var(--sov-tint);color:var(--sov);font-weight:700}
.mode-dark .pill{color:var(--voltage)}
.pill.sig{background:var(--voltage);color:var(--signal-ink)}

/* ---- generic card ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:var(--card-shadow)}
.card .dlbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card .val{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px}
.card .delta{color:var(--signal);font-size:14px;font-weight:700;font-family:var(--mono)}
.card .note{color:var(--slate);font-size:14px;margin:14px 0 0}

/* ---- product / data card ---- */
.uicard{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--card-shadow);overflow:hidden;max-width:360px}
.uicard .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.uicard .dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.uicard .bar .t{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.uicard .body{padding:18px 18px 8px}
.uicard .dlbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.uicard .val{font-family:var(--display);font-size:36px;font-weight:800;letter-spacing:-.02em;margin:2px 0}
.uicard .delta{font-family:var(--mono);font-size:12px;color:var(--signal);font-weight:700}
.uicard .uptime{height:36px;margin-top:12px;border-radius:5px;background:repeating-linear-gradient(90deg,var(--signal-line) 0 5px,transparent 5px 9px)}
.uicard .foot{display:flex;justify-content:space-between;padding:10px 18px 16px;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---- pricing tier ---- */
.tier{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;max-width:280px}
.tier .tk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tier .tn{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.01em}
.tier .price{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;margin:12px 0 0}
.tier .per{font-family:var(--mono);font-size:11px;color:var(--muted)}
.tier ul{margin:14px 0 0;padding-left:18px;color:var(--slate);font-size:14px}
.tier li{margin-bottom:5px}
.tier.feature{border-color:var(--sov);box-shadow:0 0 0 1px var(--sov)}
.tier.feature .tk{color:var(--signal)}

/* ---- brand mark + wordmark ---- */
.brand{display:inline-flex;align-items:center;gap:11px}
.mark{width:24px;height:24px;border-radius:7px;background:var(--sov);position:relative;flex:none;display:inline-block}
.mark::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--voltage);border:2px solid var(--surface)}
.wordmark{font-family:var(--word);font-weight:700;font-size:21px;letter-spacing:.02em;color:var(--ink)}

/* ---- header ---- */
.ds-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.ds-header nav a{font-size:14px;color:var(--slate);text-decoration:none;margin-left:24px}
.ds-header nav a:hover{color:var(--ink)}

/* ---- footer ---- */
.ds-footer{background:var(--sov-deep);color:#9FB6AA;padding:34px 24px}
.ds-footer .wordmark{color:#F3F1EA}
.ds-footer .mark{background:#F3F1EA}
.ds-footer .mark::after{border-color:var(--sov-deep)}
.ds-footer .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--voltage);margin-top:10px}

/* ---- colour swatch (foundation) ---- */
.sw{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);display:inline-block;width:150px;vertical-align:top;margin:0 12px 12px 0}
.sw .chip{height:64px}
.sw .meta{padding:9px 11px}
.sw .nm{font-size:13px;font-weight:600;font-family:var(--sans);color:var(--ink)}
.sw .hx{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---- focus ---- */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.btn:focus-visible{outline-offset:3px}

/* ---- the mark must not vanish on dark or deep surfaces ---- */
.mode-dark .mark,.mode-deep .mark{background:var(--voltage)}
.mode-dark .mark::after,.mode-deep .mark::after{background:var(--sov);border-color:var(--surface)}