/* instrumenta-base -- generated from packages/instrumenta-base/src by build.mjs.
   Do not edit: edit the source and rebuild. */

/* ---- tokens.css ---- */
/* The one token vocabulary. Every palette value in the repo lives in this file
   (tools/check-ui-tokens.mjs enforces it); everything else says var(--i-*).

   Theme: follows the OS (prefers-color-scheme), dark by default, with an
   optional override -- <html data-theme="light|dark"> -- that wins over the OS.
   The kits inherit this; none of them defines its own mechanism. */

:root {
    color-scheme: dark;
    --i-bg: #0f172a;
    --i-card: #111827;
    --i-surface: #1a2035;
    --i-border: #1f2937;
    --i-border-strong: #2d3651;
    --i-accent: #3b82f6;
    --i-accent-hover: #60a5fa;
    --i-accent-deep: #1d4ed8;
    --i-text: #e5e7eb;
    --i-muted: #9ca3af;
    --i-error: #ef4444;
    --i-success: #22c55e;
    --i-error-hover: #fca5a5;
    --i-warn: #fbbf24;
    --i-shadow: rgba(0, 0, 0, .4);
    --i-input-bg: #020617;
    --i-hover-tint: rgba(255, 255, 255, 0.03);
    /* Data visualisation (the usage dashboard): one series hue, a sequential ramp for
       magnitude (quiet end = near the surface), and an ordinal ramp for stages. The
       -text tokens are the ink that stays readable on each ramp step. */
    --i-viz-series: #3987e5;
    --i-viz-cat-2: #d95926;   /* installed app, against the series blue */
    --i-viz-seq-1: #0d366b; --i-viz-seq-2: #104281; --i-viz-seq-3: #1c5cab; --i-viz-seq-4: #5598e7; --i-viz-seq-5: #9ec5f4;
    --i-viz-seq-text-1: #ffffff; --i-viz-seq-text-2: #ffffff; --i-viz-seq-text-3: #ffffff; --i-viz-seq-text-4: #0b0b0b; --i-viz-seq-text-5: #0b0b0b;
    --i-viz-ord-1: #184f95; --i-viz-ord-2: #256abf; --i-viz-ord-3: #5598e7; --i-viz-ord-4: #9ec5f4;
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --i-bg: #f1f5f9;
        --i-card: #ffffff;
        --i-surface: #f1f5f9;
        --i-border: #e2e8f0;
        --i-border-strong: #cbd5e1;
        --i-accent: #2563eb;
        --i-accent-hover: #1d4ed8;
        --i-accent-deep: #1d4ed8;
        --i-text: #0f172a;
        --i-muted: #64748b;
        --i-error: #dc2626;
        --i-success: #16a34a;
        --i-error-hover: #b91c1c;
        --i-warn: #b45309;
        --i-shadow: rgba(15, 23, 42, .12);
        --i-input-bg: #f8fafc;
        --i-hover-tint: rgba(15, 23, 42, 0.03);
        /* Data visualisation: see the dark block. On a light surface the quiet end is the pale one. */
        --i-viz-series: #2a78d6;
        --i-viz-cat-2: #eb6834;   /* installed app, against the series blue */
        --i-viz-seq-1: #cde2fb; --i-viz-seq-2: #9ec5f4; --i-viz-seq-3: #5598e7; --i-viz-seq-4: #256abf; --i-viz-seq-5: #184f95;
        --i-viz-seq-text-1: #0b0b0b; --i-viz-seq-text-2: #0b0b0b; --i-viz-seq-text-3: #0b0b0b; --i-viz-seq-text-4: #ffffff; --i-viz-seq-text-5: #ffffff;
        --i-viz-ord-1: #86b6ef; --i-viz-ord-2: #5598e7; --i-viz-ord-3: #2a78d6; --i-viz-ord-4: #1c5cab;
    }
}

/* Explicit override. Declared after the media query so it wins on equal
   specificity; the attribute selector keeps it from touching anything else. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --i-bg: #0f172a;
    --i-card: #111827;
    --i-surface: #1a2035;
    --i-border: #1f2937;
    --i-border-strong: #2d3651;
    --i-accent: #3b82f6;
    --i-accent-hover: #60a5fa;
    --i-accent-deep: #1d4ed8;
    --i-text: #e5e7eb;
    --i-muted: #9ca3af;
    --i-error: #ef4444;
    --i-success: #22c55e;
    --i-error-hover: #fca5a5;
    --i-warn: #fbbf24;
    --i-shadow: rgba(0, 0, 0, .4);
    --i-input-bg: #020617;
    --i-hover-tint: rgba(255, 255, 255, 0.03);
    /* Data visualisation (the usage dashboard): one series hue, a sequential ramp for
       magnitude (quiet end = near the surface), and an ordinal ramp for stages. The
       -text tokens are the ink that stays readable on each ramp step. */
    --i-viz-series: #3987e5;
    --i-viz-cat-2: #d95926;   /* installed app, against the series blue */
    --i-viz-seq-1: #0d366b; --i-viz-seq-2: #104281; --i-viz-seq-3: #1c5cab; --i-viz-seq-4: #5598e7; --i-viz-seq-5: #9ec5f4;
    --i-viz-seq-text-1: #ffffff; --i-viz-seq-text-2: #ffffff; --i-viz-seq-text-3: #ffffff; --i-viz-seq-text-4: #0b0b0b; --i-viz-seq-text-5: #0b0b0b;
    --i-viz-ord-1: #184f95; --i-viz-ord-2: #256abf; --i-viz-ord-3: #5598e7; --i-viz-ord-4: #9ec5f4;
}

:root[data-theme="light"] {
    color-scheme: light;
    --i-bg: #f1f5f9;
    --i-card: #ffffff;
    --i-surface: #f1f5f9;
    --i-border: #e2e8f0;
    --i-border-strong: #cbd5e1;
    --i-accent: #2563eb;
    --i-accent-hover: #1d4ed8;
    --i-accent-deep: #1d4ed8;
    --i-text: #0f172a;
    --i-muted: #64748b;
    --i-error: #dc2626;
    --i-success: #16a34a;
    --i-error-hover: #b91c1c;
    --i-warn: #b45309;
    --i-shadow: rgba(15, 23, 42, .12);
    --i-input-bg: #f8fafc;
    --i-hover-tint: rgba(15, 23, 42, 0.03);
    /* Data visualisation: see the dark block. On a light surface the quiet end is the pale one. */
    --i-viz-series: #2a78d6;
    --i-viz-cat-2: #eb6834;   /* installed app, against the series blue */
    --i-viz-seq-1: #cde2fb; --i-viz-seq-2: #9ec5f4; --i-viz-seq-3: #5598e7; --i-viz-seq-4: #256abf; --i-viz-seq-5: #184f95;
    --i-viz-seq-text-1: #0b0b0b; --i-viz-seq-text-2: #0b0b0b; --i-viz-seq-text-3: #0b0b0b; --i-viz-seq-text-4: #ffffff; --i-viz-seq-text-5: #ffffff;
    --i-viz-ord-1: #86b6ef; --i-viz-ord-2: #5598e7; --i-viz-ord-3: #2a78d6; --i-viz-ord-4: #1c5cab;
}

/* ---- doc-tokens.css ---- */
/* Document-editor palette (files / sheets / docs / netview): a light desktop
   editor look, deliberately not the classic one in tokens.css.
   packages/instrumenta-ui maps its Tailwind @theme onto these. Variables only --
   no color-scheme -- so importing it changes nothing but what it names. */

:root {
    --i-doc-primary: #007AFF;
    --i-doc-primary-hover: #1d4ed8;
    --i-doc-primary-soft: #dbeafe;

    --i-doc-bg: #fafafa;
    --i-doc-bg-secondary: #f2f2f7;
    --i-doc-bg-tertiary: #e4e4e7;
    --i-doc-bg-elevated: #ffffff;

    --i-doc-surface: #ffffff;
    --i-doc-surface-secondary: #fafafa;
    --i-doc-surface-tertiary: #f4f4f5;

    --i-doc-text: #18181b;
    --i-doc-text-secondary: #3c3c43;
    --i-doc-text-tertiary: #71717a;
    --i-doc-text-muted: #a1a1aa;
    --i-doc-text-inverse: #ffffff;

    --i-doc-border: #c6c6c8;
    --i-doc-border-strong: #d4d4d8;
    --i-doc-separator: #ddd;

    --i-doc-fill: #f4f4f5;
    --i-doc-fill-secondary: #e4e4e7;
    --i-doc-fill-tertiary: #d4d4d8;

    --i-doc-focus-ring: rgb(37 99 235 / 0.35);

    --i-doc-success: #16a34a;

    /* Cautions that are not errors: an unresolved problem in a plan, a read-only notice. */
    --i-doc-warn: #b45309;
    --i-doc-warn-soft: #fef3c7;
    --i-doc-warn-text: #78350f;

    --i-doc-error: #dc2626;
    --i-doc-error-hover: #b91c1c;
    --i-doc-error-soft: #fef2f2;

    /* Formula editor syntax colours (sheets): functions, string and number literals. */
    --i-doc-syntax-fn: #7c3aed;
    --i-doc-syntax-str: #047857;
    --i-doc-syntax-num: #0369a1;
}

/* ---- primitives.css ---- */
/* Shared design system for Instrumenta auth + user-management surfaces
   and the directory-listing chrome. Palette: base/base.css (--i-*). */

/* The values live in base/base.css (--i-*, both schemes). These keep the
   --auth-* names so no markup or rule below had to change. Load base.css first. */
:root {
    --auth-bg: var(--i-bg);
    --auth-card: var(--i-card);
    --auth-surface: var(--i-surface);
    --auth-border: var(--i-border);
    --auth-accent: var(--i-accent);
    --auth-accent-hover: var(--i-accent-hover);
    --auth-accent-deep: var(--i-accent-deep);
    --auth-text: var(--i-text);
    --auth-muted: var(--i-muted);
    --auth-error: var(--i-error);
    --auth-success: var(--i-success);
    --auth-shadow: var(--i-shadow);
    --auth-input-bg: var(--i-input-bg);
    --auth-border-strong: var(--i-border-strong);
    --auth-hover-tint: var(--i-hover-tint);
}

.auth-card,
.auth-modal,
.login-card {
    background: var(--auth-card);
    color: var(--auth-text);
    border-radius: 14px;
    box-shadow: 0 20px 40px var(--auth-shadow);
}

.auth-card *,
.auth-modal *,
.login-card * {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.auth-card h1, .auth-modal h1, .login-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.auth-modal h2 { margin: 0 0 14px; font-size: 1.25rem; }
.auth-modal h3 { margin: 22px 0 8px; font-size: 1rem; color: var(--auth-text); }

.auth-subtitle, .auth-modal .auth-hint-text {
    margin: 0 0 20px;
    color: var(--auth-muted);
    font-size: 0.9rem;
}

.auth-card label, .auth-modal label, .login-card label {
    font-size: 0.85rem;
    color: var(--auth-muted);
    display: block;
    margin-bottom: 6px;
}

.auth-card input, .auth-modal input, .auth-modal select, .login-card input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--auth-border);
    margin-bottom: 14px;
    font-size: 1rem;
    background: var(--auth-input-bg);
    color: var(--auth-text);
    outline: none;
}

.auth-card input:focus, .auth-modal input:focus, .auth-modal select:focus, .login-card input:focus {
    outline: 2px solid var(--auth-accent);
}

.auth-btn {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
}

.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-btn-primary, .auth-card button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: var(--auth-accent);
    color: white;
}
.auth-btn-primary:hover, .auth-card button[type="submit"]:hover { background: var(--auth-accent-hover); }

.auth-btn-secondary {
    background: var(--auth-surface);
    color: var(--auth-text);
    border: 1px solid var(--auth-border-strong);
}
.auth-btn-secondary:hover { background: var(--auth-border); }

.auth-btn-danger {
    background: transparent;
    color: var(--auth-error);
    border: 1px solid var(--auth-error);
}
.auth-btn-danger:hover { background: rgba(239, 68, 68, 0.12); }

.auth-btn-sm { padding: 5px 10px; font-size: 0.78rem; border-radius: 6px; }

.auth-error, .auth-success,
.auth-modal .error, .auth-modal .success {
    font-size: 0.85rem;
    margin-top: 10px;
    display: none;
}
.auth-error, .auth-modal .error { color: var(--auth-error); }
.auth-success, .auth-modal .success { color: var(--auth-success); }

.auth-toggle-link {
    text-align: center;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--auth-accent);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    width: 100%;
    display: block;
}
.auth-toggle-link:hover { color: var(--auth-accent-hover); }

.auth-hint {
    font-size: 0.75rem;
    color: var(--auth-muted);
    margin-top: -10px;
    margin-bottom: 14px;
}

.auth-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.auth-badge-admin { background: rgba(59, 130, 246, 0.18); color: var(--auth-accent-hover); }
.auth-badge-user { background: rgba(148, 163, 184, 0.18); color: var(--auth-muted); }
.auth-badge-verified { background: rgba(34, 197, 94, 0.18); color: var(--auth-success); }
.auth-badge-unverified { background: rgba(239, 68, 68, 0.18); color: var(--auth-error); }

.auth-table-wrap { overflow-x: auto; }
table.auth-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.auth-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--auth-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--auth-border);
}
table.auth-table td {
    padding: 10px;
    border-bottom: 1px solid var(--auth-border);
    vertical-align: middle;
}
table.auth-table tr:last-child td { border-bottom: none; }
.auth-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.auth-empty-note { color: var(--auth-muted); font-size: 0.8rem; padding: 10px 0; }

.auth-checkbox-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--auth-border);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}
.auth-checkbox-list label {
    display: block;
    margin-bottom: 6px;
    color: var(--auth-text);
    font-size: 0.85rem;
}
.auth-checkbox-list label input { width: auto; margin: 0 6px 0 0; }

.auth-token-item {
    font-size: 0.8rem;
    margin-bottom: 6px;
    padding: 8px 10px;
    background: var(--auth-surface);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.auth-token-item code { font-size: 0.75rem; color: var(--auth-muted); }
.auth-token-status-active { color: var(--auth-success); }
.auth-token-status-used { color: var(--auth-error); }

.auth-actions-row {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.auth-inline-label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--auth-text); font-size: 0.9rem; }
.auth-inline-label input { width: auto; margin: 0; }

/* Shared brand lockup: logo + "Instrumenta.cc" wordmark, used as a home link
   in headers/mastheads (index page, mobile login card). The `a.` prefix and
   explicit :visited/:hover rules exist to out-specificity index.css's
   ".root a" link styling (blue + underline) that would otherwise bleed in. */
a.auth-brand, a.auth-brand:visited, a.auth-brand:hover {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--auth-text);
}
.auth-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: block;
}
.auth-brand-text {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.auth-brand:hover .auth-brand-text { color: var(--auth-accent); }

/* ---------------------------------------------------------------------------
   Credential lists in Account Settings: signed-in devices and API keys.
   One row per credential, label on the left and a Revoke button on the right.
   --------------------------------------------------------------------------- */
.auth-list {
    margin: 8px 0;
    font-size: 0.9rem;
    color: var(--auth-text);
}

.auth-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--auth-surface);
    border: 1px solid var(--auth-border);
    border-radius: 8px;
}

.auth-list-row span {
    overflow-wrap: anywhere;
}