/* ================================================================
   bahri-ui-kits — Dev theme overrides
   Terminal aesthetics: sharp edges, monospace type, high contrast,
   dense spacing, green/cyan accents on a very dark ground.
================================================================ */

/* ---- Structural token overrides ---- */
:root {
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;
  --radius-full: 0px;

  --shadow-raised: none;
  --shadow-overlay: 0 2px 8px rgba(0, 0, 0, 0.6);

  --motion-fast: 60ms;
  --motion-normal: 100ms;
}

/* ---- Colour overrides — dark terminal palette ---- */
html,
html[data-mode="light"],
html[data-mode="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #0d1117;
  --color-bg-subtle: #161b22;
  --color-surface-default: #1c2128;
  --color-surface-raised: #21262d;
  --color-surface-overlay: #2d333b;

  --color-text-primary: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-tertiary: #6e7681;
  --color-text-inverse: #0d1117;
  --color-text-disabled: #484f58;

  --color-border-subtle: #21262d;
  --color-border-default: #30363d;
  --color-border-strong: #6e7681;
  --color-border-focus: #00c969;

  --color-icon-primary: #e6edf3;
  --color-icon-secondary: #8b949e;
  --color-icon-inverse: #0d1117;

  --color-action-primary-bg: #00c969;
  --color-action-primary-bg-hover: #00a656;
  --color-action-primary-text: #0d1117;

  --color-action-secondary-bg: #0a2a18;
  --color-action-secondary-bg-hover: #0d3520;
  --color-action-secondary-text: #00c969;

  --color-feedback-success-bg: #0a2a18;
  --color-feedback-success-text: #00c969;
  --color-feedback-success-border: #00a656;

  --color-feedback-warning-bg: #2a1f0a;
  --color-feedback-warning-text: #f0c040;
  --color-feedback-warning-border: #c09020;

  --color-feedback-danger-bg: #2a0a0a;
  --color-feedback-danger-text: #ff6060;
  --color-feedback-danger-border: #cc3333;

  --color-focus-ring: #00c969;
  --color-overlay-scrim: rgba(0, 0, 0, 0.72);
}

/* ---- Component overrides ---- */

/* Body */
body {
  background: var(--color-bg-canvas);
}

/* Buttons — uppercase, no radius, prominent borders */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 600;
  border-width: 1px;
}

.btn-primary {
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
  border-color: var(--color-action-primary-bg);
}

.btn-primary.is-hover { background: var(--color-action-primary-bg-hover); border-color: var(--color-action-primary-bg-hover); }

.btn-secondary {
  background: transparent;
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.btn-secondary.is-hover { background: var(--color-bg-subtle); border-color: var(--color-border-strong); }

.btn-ghost {
  color: var(--color-action-primary-bg);
}

.btn-ghost.is-hover { background: var(--color-action-secondary-bg); }

.btn-outline {
  color: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-bg);
}

/* Fields — dark inset, green focus */
.field {
  background: var(--color-bg-canvas);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.field.is-hover { border-color: var(--color-border-strong); }

.field.is-focus {
  border-color: var(--color-action-primary-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-action-primary-bg) 25%, transparent);
}

select.field-select {
  background-color: var(--color-bg-canvas);
}

/* Badges — squared */
.bdg {
  border-radius: 0;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Cards — outlined, no shadow */
.crd {
  border-radius: 0;
  border-color: var(--color-border-default);
  box-shadow: none;
}

.crd-elev {
  box-shadow: none;
  border-color: var(--color-action-primary-bg);
}

/* Tabs — underline style with green active */
.tabs .tab.is-active {
  color: var(--color-action-primary-bg);
  border-bottom-color: var(--color-action-primary-bg);
}

.tabs-pill {
  border-radius: 0;
  background: var(--color-bg-subtle);
}

.tabs-pill .tab {
  border-radius: 0;
}

.tabs-pill .tab.is-active {
  background: var(--color-surface-raised);
  border-left: 2px solid var(--color-action-primary-bg);
  color: var(--color-action-primary-bg);
}

/* Dialogs — sharp */
.dlg {
  border-radius: 0;
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-overlay);
}

/* Tables — dense */
.tbl th {
  background: var(--color-bg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Toggle */
.toggle-sw.is-on { background: var(--color-action-primary-bg); }

/* ---- Page shell overrides ---- */
.page-topbar {
  background: color-mix(in srgb, var(--color-surface-default) 95%, transparent);
  border-bottom-color: var(--color-border-default);
}

.side {
  border-color: var(--color-border-default);
  background: var(--color-bg-subtle);
}

.nav-item.is-active {
  color: var(--color-action-primary-bg);
  border-left-color: var(--color-action-primary-bg);
}