/* ============================================
   Public Token API
   ============================================ */
/* ============================================
   ❗Primitive Tokens (RAW VALUES ONLY)
   DO NOT USE DIRECTLY IN COMPONENTS
   ============================================ */
/* ============================================
   Public Token API
   ============================================ */
/* ============================================
   Semantic Tokens (INTENT-BASED)
   SAFE FOR COMPONENTS
   ============================================ */
/* Base */
/* Navigation */
/* Buttons – centralized yellow warning style */
/* Cards */
/* Alerts */
/* Tables */
/* Forms */
/* Layout & sizing tokens */
:root {
  --color-bg: #fff9f5;
  --color-text: #333333;
  --color-link: #007bff;
  --color-highlight-blue: #007bff;
  --brand-primary: #ff6b00;
  --brand-primary-text: #ffffff;
  --btn-primary-bg: #ffc107;
  --btn-primary-hover-bg: rgb(211, 158.25, 0);
  --btn-primary-text: #ffffff;
  --card-bg: #ffffff;
  --card-text: #333333;
  --alert-bg: #f8d7da;
  --alert-text: #721c24;
  --table-row-alt: #f9f9f9;
  --table-border: #dee2e6;
  --form-border: #cccccc;
}

html[data-theme=dark] {
  --color-bg: #1e1e1e;
  --color-text: #f0f0f0;
  --color-link: #66b3ff;
  --color-highlight-blue: #66b3ff;
  --brand-primary: #2a2a2a;
  --brand-primary-text: #ffffff;
  --card-bg: #2a2a2a;
  --card-text: #f0f0f0;
  --alert-bg: #4a1f25;
  --alert-text: #f8d7da;
  --table-row-alt: #2a2a2a;
  --table-border: #444;
  --form-border: #555;
}

a {
  color: var(--color-link);
}

.highlight-blue {
  color: var(--color-link);
  font-weight: 600;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
}

.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-radius: 0.25rem;
  border: 1px solid var(--btn-primary-bg);
  padding: 0.5rem 1rem;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--btn-primary-hover-bg) !important;
  border-color: var(--btn-primary-hover-bg) !important;
}

input,
textarea,
select {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--form-border);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

.card {
  background-color: var(--card-bg);
  color: var(--card-text);
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.bg-card {
  background-color: var(--card-bg);
  color: var(--card-text);
  border-radius: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--table-border);
}

.read-box {
  background-color: var(--card-bg);
  color: var(--card-text);
  border-radius: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--table-border);
  word-break: break-word;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}

.bg-card .table,
.bg-card .table th,
.bg-card .table td {
  background-color: var(--card-bg) !important;
  color: var(--card-text) !important;
  border: 1px solid var(--table-border) !important;
}

.bg-card .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--table-row-alt) !important;
}

.bg-card .table-hover tbody tr:hover {
  background-color: var(--table-row-hover, var(--table-row-alt)) !important;
}

.alert {
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.alert-danger {
  background-color: var(--alert-bg);
  color: var(--alert-text);
}

.theme-toggle {
  cursor: pointer;
  user-select: none;
}
.theme-toggle input {
  display: none;
}
.theme-toggle span {
  font-size: 1.2rem;
  line-height: 1;
}

:root,
html[data-theme=light] {
  --color-bg: #fff9f5;
  --color-text: #333333;
  --color-link: #007bff;
  --color-highlight-blue: #007bff;
  --brand-primary: #ff6b00;
  --brand-primary-text: #ffffff;
  --btn-primary-bg: #ffc107;
  --btn-primary-hover-bg: rgb(211, 158.25, 0);
  --btn-primary-text: #ffffff;
  --card-bg: #ffffff;
  --card-text: #333333;
  --alert-bg: #f8d7da;
  --alert-text: #721c24;
  --table-row-alt: #f9f9f9;
  --table-border: #dee2e6;
  --form-border: #cccccc;
}

html[data-theme=dark] {
  --color-bg: #1e1e1e;
  --color-text: #f0f0f0;
  --card-bg: #2a2a2a;
  --card-text: #f0f0f0;
  --alert-bg: #4a1f25;
  --alert-text: #f8d7da;
  --table-row-alt: #2a2a2a;
  --table-border: #444;
  --form-border: #555;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
}

a {
  color: var(--color-link);
}

.highlight-blue {
  color: var(--color-highlight-blue);
  font-weight: 600;
}

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

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--btn-primary-hover-bg) !important;
  border-color: var(--btn-primary-hover-bg) !important;
}

.navbar {
  background-color: var(--brand-primary);
  color: var(--brand-primary-text);
}

.navbar a {
  color: var(--brand-primary-text);
}

.theme-toggle {
  cursor: pointer;
  user-select: none;
}
.theme-toggle input {
  display: none;
}
.theme-toggle span {
  font-size: 1.2rem;
  line-height: 1;
}