/* ============================================================
   ARK360 design system — tokens and primitive styles
   SPEC-0042 · ADR-0019
   Canonical source: ARK360/ark360-web (src/globals.css, src/components/ui/*).
   Self-hosted Inter + JetBrains Mono (no external font CDN).
   Light-first. Loaded AFTER btros-theme.css so it (a) provides the
   --ark-* token layer the Ark* primitives consume, and (b) re-points the
   ADR-0016 semantic status tokens to ARK360 hues (SPEC-0042 REQ-006).
   Brand rule: text on a teal fill is ARK Navy (#0F1822), never white.
   ============================================================ */

/* ---- Self-hosted fonts (REQ-002: no external font CDN) ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

/* ---- ARK360 token layer (REQ-001, REQ-002) ---- */
:root {
    /* Type families */
    --ark-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ark-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

    /* Navy — weight and trust; the logo colour and dark chrome */
    --ark-navy-900: #0f1822;
    --ark-navy-800: #17232f;
    --ark-navy-700: #21303d;
    --ark-navy-600: #2e4150;
    --ark-navy-500: #3d5366;

    /* Teal — the single accent, used sparingly */
    --ark-teal-700: #0f7a8a; /* Teal Ink — teal text/links on light (WCAG AA) */
    --ark-teal-600: #1893a6;
    --ark-teal-500: #2aa8bc; /* ARK Teal — core accent */
    --ark-teal-400: #46c2d4;
    --ark-teal-300: #34c7de; /* Cyan Bright — on-dark emphasis only */
    --ark-teal-050: #e6f6f8;

    /* Neutrals (light base) */
    --ark-paper: #ffffff;
    --ark-surface: #f7f9fa;
    --ark-panel: #eef2f4;
    --ark-line: #e1e7eb;
    --ark-line-strong: #cdd6db;

    /* Ink (text ramp) */
    --ark-ink-900: #0f1822; /* headings */
    --ark-ink-700: #2e3b45; /* body */
    --ark-ink-500: #5c6a73; /* muted */
    --ark-ink-400: #8a969e; /* captions, placeholders */

    /* Functional (foreground + soft background) */
    --ark-success: #1f9d6b;
    --ark-success-bg: #e7f6ef;
    --ark-warning: #b9791a;
    --ark-warning-bg: #fbf1de;
    --ark-error: #cf4438;
    --ark-error-bg: #fbe9e7;
    --ark-info: #2a6fbc;
    --ark-info-bg: #e8f0fa;

    /* Semantic aliases */
    --ark-primary: #2aa8bc; /* teal-500 */
    --ark-primary-foreground: #0f1822; /* navy text on teal fills (brand rule) */
    --ark-signal: #34c7de; /* teal-300 */
    --ark-background: #f7f9fa;
    --ark-foreground: #2e3b45;
    --ark-muted: #5c6a73;
    --ark-card: #ffffff;
    --ark-border: #e1e7eb;
    --ark-on-dark: #ffffff; /* text on navy/solid/danger fills (never on teal) */
    --ark-on-navy-muted: #9fb0bc; /* mono labels on navy blocks */

    /* Spacing (4px scale) */
    --ark-space-1: 4px;
    --ark-space-2: 8px;
    --ark-space-3: 12px;
    --ark-space-4: 16px;
    --ark-space-5: 20px;
    --ark-space-6: 24px;
    --ark-space-8: 32px;
    --ark-space-12: 48px;
    --ark-space-24: 96px;

    /* Radius */
    --ark-radius-xs: 4px;
    --ark-radius-sm: 8px;
    --ark-radius-md: 10px;
    --ark-radius-lg: 14px;
    --ark-radius-pill: 999px;

    /* Elevation (navy-tinted) */
    --ark-shadow-e1: 0 1px 2px rgba(15, 24, 34, 0.06), 0 1px 3px rgba(15, 24, 34, 0.05);
    --ark-shadow-e2: 0 4px 10px rgba(15, 24, 34, 0.07), 0 2px 4px rgba(15, 24, 34, 0.05);
    --ark-shadow-e3: 0 16px 40px rgba(15, 24, 34, 0.12), 0 6px 12px rgba(15, 24, 34, 0.07);

    /* Focus ring (teal) */
    --ark-focus-ring: 0 0 0 2.5px rgba(42, 168, 188, 0.45);

    /* ---- Re-point ADR-0016 semantic status tokens to ARK360 hues (REQ-006) ----
       The -text values are darkened ARK360-family hues chosen for AA contrast on
       the soft surfaces; existing components keep referencing the same token names. */
    --btros-success: #1f9d6b;
    --btros-success-soft: #e7f6ef;
    --btros-success-border: #c2e6d5;
    --btros-success-text: #136f4b;

    --btros-warning: #b9791a;
    --btros-warning-soft: #fbf1de;
    --btros-warning-border: #ebd7a7;
    --btros-warning-text: #7c5212;

    --btros-danger: #cf4438;
    --btros-danger-soft: #fbe9e7;
    --btros-danger-border: #f0c9c4;
    --btros-danger-text: #9e2b21;

    --btros-info: #2a6fbc;
    --btros-info-soft: #e8f0fa;
    --btros-info-border: #cadbf1;
    --btros-info-text: #1f5187;
}

/* Dark-mode keeps status surfaces legible on dark cards (light-first remains the
   default per ADR-0019; this only adapts the re-pointed status tokens). */
[data-bs-theme="dark"] {
    --btros-success: #34c08a;
    --btros-success-soft: rgba(31, 157, 107, 0.16);
    --btros-success-border: rgba(31, 157, 107, 0.34);
    --btros-success-text: #7fd9b3;

    --btros-warning: #d79a3c;
    --btros-warning-soft: rgba(185, 121, 26, 0.18);
    --btros-warning-border: rgba(185, 121, 26, 0.36);
    --btros-warning-text: #e7c187;

    --btros-danger: #e0675c;
    --btros-danger-soft: rgba(207, 68, 56, 0.18);
    --btros-danger-border: rgba(207, 68, 56, 0.36);
    --btros-danger-text: #f0b0a9;

    --btros-info: #5a93d6;
    --btros-info-soft: rgba(42, 111, 188, 0.18);
    --btros-info-border: rgba(42, 111, 188, 0.36);
    --btros-info-text: #a7c6ec;
}

/* ============================================================
   ARK360 primitives (SPEC-0042 REQ-003)
   Every colour/radius/shadow references an --ark-* token only (REQ-008).
   ============================================================ */

/* ---- ArkButton ---- */
.ark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ark-font-sans);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--ark-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.ark-btn > svg { width: 15px; height: 15px; }

.ark-btn:disabled,
.ark-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.ark-btn:focus-visible { outline: none; box-shadow: var(--ark-focus-ring); }

.ark-btn--sm { padding: 8px 13px; font-size: 13px; }
.ark-btn--md { padding: 11px 18px; font-size: 14px; }
.ark-btn--lg { padding: 14px 24px; font-size: 15px; }

/* Brand rule (ADR-0029): solid CTA fill is Teal Ink with white text; hover darkens. */
.ark-btn--primary { background: var(--ark-teal-700); color: var(--ark-on-dark); border-color: transparent; }
.ark-btn--primary:hover { filter: brightness(0.95); }

.ark-btn--secondary { background: transparent; color: var(--ark-navy-800); border-color: var(--ark-line-strong); }
.ark-btn--secondary:hover { border-color: var(--ark-navy-800); background: var(--ark-surface); }

.ark-btn--solid { background: var(--ark-navy-800); color: var(--ark-on-dark); border-color: transparent; }
.ark-btn--solid:hover { background: var(--ark-navy-700); }

.ark-btn--ghost { background: transparent; color: var(--ark-teal-700); border-color: transparent; }
.ark-btn--ghost:hover { background: var(--ark-teal-050); }

.ark-btn--danger { background: var(--ark-error); color: var(--ark-on-dark); border-color: transparent; }
.ark-btn--danger:hover { filter: brightness(0.95); }

/* ---- ArkBadge ---- */
.ark-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--ark-radius-pill);
    padding: 3px 10px;
    font-family: var(--ark-font-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.ark-badge__dot { width: 6px; height: 6px; border-radius: var(--ark-radius-pill); background: currentColor; }

.ark-badge--neutral { background: var(--ark-panel); color: var(--ark-ink-700); }
.ark-badge--teal { background: var(--ark-teal-050); color: var(--ark-teal-700); }
.ark-badge--success { background: var(--ark-success-bg); color: var(--ark-success); }
.ark-badge--warning { background: var(--ark-warning-bg); color: var(--ark-warning); }
.ark-badge--error { background: var(--ark-error-bg); color: var(--ark-error); }
.ark-badge--info { background: var(--ark-info-bg); color: var(--ark-info); }

/* ---- ArkAlert ---- */
.ark-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: var(--ark-radius-sm);
    border: 1px solid var(--ark-line);
    padding: 13px 15px;
    font-family: var(--ark-font-sans);
    font-size: 13.5px;
    color: var(--ark-ink-700);
}

.ark-alert__icon { display: inline-flex; margin-top: 1px; flex-shrink: 0; }
.ark-alert__icon > svg { width: 18px; height: 18px; }
.ark-alert__title { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ark-ink-900); }

.ark-alert--info { background: var(--ark-info-bg); border-color: #cadbf1; }
.ark-alert--info .ark-alert__icon { color: var(--ark-info); }
.ark-alert--success { background: var(--ark-success-bg); border-color: #c2e6d5; }
.ark-alert--success .ark-alert__icon { color: var(--ark-success); }
.ark-alert--warning { background: var(--ark-warning-bg); border-color: #ebd7a7; }
.ark-alert--warning .ark-alert__icon { color: var(--ark-warning); }
.ark-alert--error { background: var(--ark-error-bg); border-color: #f0c9c4; }
.ark-alert--error .ark-alert__icon { color: var(--ark-error); }

/* ---- ArkCard / ArkFeatureCard / ArkStatCard ---- */
.ark-card {
    border-radius: var(--ark-radius-md);
    border: 1px solid var(--ark-line);
    background: var(--ark-paper);
    padding: 24px;
}
.ark-card--pad-lg { padding: 32px; }

.ark-feature-card {
    border-radius: var(--ark-radius-md);
    border: 1px solid var(--ark-line);
    background: var(--ark-paper);
    padding: 24px;
}
.ark-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: var(--ark-radius-sm);
    background: var(--ark-teal-050);
    color: var(--ark-teal-700);
}
.ark-feature-card__title { margin: 0; font-family: var(--ark-font-sans); font-size: 15px; font-weight: 600; color: var(--ark-ink-900); }
.ark-feature-card__body { margin: 4px 0 0; font-size: 13.5px; line-height: 1.625; color: var(--ark-ink-500); }
.ark-feature-card__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    border-top: 1px solid var(--ark-line);
    padding-top: 12px;
    font-family: var(--ark-font-mono);
    font-size: 11px;
    color: var(--ark-ink-400);
}
.ark-feature-card__foot-value { color: var(--ark-teal-700); }

.ark-stat-card {
    border-radius: var(--ark-radius-md);
    background: var(--ark-navy-800);
    padding: 24px;
    color: var(--ark-on-dark);
}
.ark-stat-card__value { font-family: var(--ark-font-sans); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ark-teal-400); }
.ark-stat-card__label { margin-top: 4px; font-family: var(--ark-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ark-on-navy-muted); }

/* ---- ArkEyebrow ---- */
.ark-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ark-eyebrow__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ark-font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ark-teal-700);
}
.ark-eyebrow__mark { color: var(--ark-teal-500); }
.ark-eyebrow__rule { height: 1px; flex: 1; background: linear-gradient(to right, var(--ark-line-strong), transparent); }

/* ---- ArkTagOutline ---- */
.ark-tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--ark-radius-xs);
    border: 1px solid var(--ark-line-strong);
    padding: 4px 10px;
    font-family: var(--ark-font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ark-ink-500);
}

/* ---- ArkWordmark / ArkMark ---- */
.ark-wordmark { display: inline-flex; align-items: center; gap: 12px; }
.ark-wordmark__mark { color: var(--ark-navy-800); }
.ark-wordmark__text { font-family: var(--ark-font-sans); font-weight: 800; line-height: 1; letter-spacing: -0.025em; color: var(--ark-navy-800); }
.ark-wordmark__num { font-weight: 300; color: var(--ark-teal-600); }
.ark-wordmark--light .ark-wordmark__mark,
.ark-wordmark--light .ark-wordmark__text { color: var(--ark-on-dark); }
.ark-wordmark--light .ark-wordmark__num { color: var(--ark-teal-400); }

/* ---- BtrosWordmark / BtrosMark (SPEC-0073, ADR-0030) ----
   BTROS product lockup: shield mark + bold "BTROS" + accent "OS".
   "OS" uses Teal Ink on light surfaces and Cyan Bright on dark (the brand's
   on-light / on-dark teal split). The mark is navy on light, white on dark. */
.btros-mark { display: inline-block; vertical-align: middle; }
.btros-wordmark { display: inline-flex; align-items: center; gap: 12px; }
.btros-wordmark--stacked { flex-direction: column; gap: 12px; text-align: center; }
.btros-wordmark__mark { color: var(--ark-navy-800); }
.btros-wordmark__text { font-family: var(--ark-font-sans); font-weight: 800; line-height: 1; letter-spacing: -0.025em; color: var(--ark-navy-800); }
.btros-wordmark__os { font-weight: 400; color: var(--ark-teal-700); }
.btros-wordmark--light .btros-wordmark__mark,
.btros-wordmark--light .btros-wordmark__text { color: var(--ark-on-dark); }
.btros-wordmark--light .btros-wordmark__os { color: var(--ark-teal-300); }

.ark-mark { display: inline-block; vertical-align: middle; }
.ark-icon { display: inline-block; vertical-align: middle; }

/* ============================================================
   ARK360 base typography (SPEC-0067 REQ-003)
   Generic headings adopt the Inter family/weight/tracking. Operator pages use
   .page-title / .section-title and marketing uses .marketing-* (both higher
   specificity), so this only reaches raw headings and does not shift those.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ark-font-sans);
    color: var(--ark-ink-900);
    letter-spacing: -0.02em;
}
h1, h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; }

/* "Technical readout" mono label utility (brand label voice): uppercase, tracked. */
.ark-label-mono {
    font-family: var(--ark-font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ark-ink-500);
}

/* ============================================================
   ARK360 form primitives + empty state (SPEC-0067 REQ-001)
   The .ark-input/.ark-select/.ark-textarea classes also apply to Blazor
   InputText/InputSelect/InputTextArea inside an EditForm (branded + validating).
   ============================================================ */
.ark-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ark-field__label { font-family: var(--ark-font-sans); font-size: 13px; font-weight: 600; color: var(--ark-ink-700); }
.ark-field__hint { font-size: 12px; color: var(--ark-ink-400); }

.ark-input,
.ark-select,
.ark-textarea {
    width: 100%;
    font-family: var(--ark-font-sans);
    font-size: 14px;
    color: var(--ark-ink-900);
    background: var(--ark-paper);
    border: 1px solid var(--ark-line);
    border-radius: var(--ark-radius-sm);
    padding: 9px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ark-input::placeholder,
.ark-textarea::placeholder { color: var(--ark-ink-400); opacity: 1; }

.ark-input:focus,
.ark-select:focus,
.ark-textarea:focus,
.ark-input:focus-visible,
.ark-select:focus-visible,
.ark-textarea:focus-visible {
    outline: none;
    border-color: var(--ark-teal-500);
    box-shadow: var(--ark-focus-ring);
}

.ark-input:disabled,
.ark-select:disabled,
.ark-textarea:disabled { background: var(--ark-surface); color: var(--ark-ink-400); cursor: not-allowed; }

.ark-input--sm { padding: 6px 10px; font-size: 13px; }
.ark-input--lg { padding: 12px 14px; font-size: 15px; }
.ark-textarea { min-height: 84px; resize: vertical; }

.ark-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 40px 24px;
}
.ark-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: var(--ark-radius-md);
    background: var(--ark-teal-050);
    color: var(--ark-teal-700);
}
.ark-empty-state__title { margin: 0; font-family: var(--ark-font-sans); font-size: 15px; font-weight: 600; color: var(--ark-ink-900); }
.ark-empty-state__body { margin: 0; font-size: 13px; color: var(--ark-ink-500); }
.ark-empty-state__actions { margin-top: 12px; display: flex; gap: 8px; }