/* ============================================================
   SYDEKYCK — tokens.css  (LAYER 2 of 3)
   Design tokens + Bootstrap (--bs-*) override layer.

   Load order on every screen:
     1. bootstrap.min.css        (CDN — the framework)
     2. tokens.css               (THIS — re-skins Bootstrap)
     3. components.css           (Sydekyck chrome not in Bootstrap)
   Then a small page <style> only for genuinely unique instances.

   Everything below maps the Sydekyck palette/type/geometry onto
   Bootstrap's own variables so native .btn / .form-control /
   .nav-tabs / .card / .form-switch render on-brand with no extra
   per-component CSS in the screens.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap");

:root {
  /* ---- Primary · robin egg blue ---- */
  --se-blue-50:#EAF8FA; --se-blue-100:#CDEEF2; --se-blue-200:#A5E1E8; --se-blue-300:#7BD2DC;
  --se-blue-400:#4FC3D1; --se-blue-500:#2FB0BF; --se-blue-600:#1F8E9C; --se-blue-700:#176C77;
  --se-blue-800:#114E56; --se-blue-900:#0B343A;
  /* ---- Accents ---- */
  --se-coral:#F4A02B; --se-coral-soft:#FBE6C5; --se-coral-700:#8B5510;
  --se-marigold:#F5B945; --se-marigold-soft:#FBEACB; --se-marigold-700:#8E6713;
  --se-sage:#6FB58A; --se-sage-soft:#DAEDDF; --se-sage-700:#2E6B4A;
  --se-plum:#8E6BB0; --se-plum-soft:#E6DCEF; --se-plum-700:#5E3F7C;
  /* ---- Neutrals · warm slate ---- */
  --se-ink-900:#0F1A22; --se-ink-800:#1B2731; --se-ink-700:#2E3A45; --se-ink-600:#485663;
  --se-ink-500:#6B7884; --se-ink-400:#95A2AE; --se-ink-300:#C2CCD4; --se-ink-200:#E2E7EC;
  --se-ink-100:#F0F3F5; --se-ink-50:#F7F9FA; --se-paper:#FBFAF6; --se-cream:#F4EFE2;
  /* ---- Semantic surfaces ---- */
  --bg-base:#FBFAF6; --bg-surface:#FFFFFF; --bg-deep:#0F1A22;
  --border:#E2E7EC; --border-soft:#F0F3F5; --primary-on:#03323A;
  --link:#176C77; --halo:rgba(79,195,209,0.16);
  /* ---- Status ---- */
  --se-success:#2BAE6A; --se-warning:#E89B1F; --se-danger:#E55353; --se-info:#2FB0BF;
  /* ---- Type ---- */
  --font-display:"Outfit",system-ui,sans-serif;
  --font-sub:"DM Sans",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,sans-serif;
  --font-mono:"Fira Code",ui-monospace,monospace;
  /* ---- Geometry ---- */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:22px;
  /* ---- Elevation ---- */
  --shadow-1:0 1px 2px rgba(15,26,34,.06),0 1px 1px rgba(15,26,34,.04);
  --shadow-2:0 4px 14px rgba(15,26,34,.07),0 2px 4px rgba(15,26,34,.04);
  --shadow-3:0 18px 40px -12px rgba(15,26,34,.18),0 6px 12px rgba(15,26,34,.06);

  /* ===== Bootstrap overrides — LIGHT ===== */
  --bs-primary: var(--se-blue-400);
  --bs-primary-rgb: 79,195,209;
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 0.9375rem;
  --bs-body-color: var(--se-ink-800);
  --bs-body-bg: var(--bg-base);
  --bs-secondary-color: var(--se-ink-500);
  --bs-tertiary-bg: var(--se-ink-50);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--r);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-xl);
  --bs-link-color: var(--link);
  --bs-link-color-rgb: 23,108,119;
  --bs-link-hover-color: var(--se-blue-800);
  --bs-emphasis-color: var(--se-ink-900);
  --bs-heading-color: var(--se-ink-900);
}

/* ===== Bootstrap overrides — DARK (also inverts the ink scale) ===== */
[data-bs-theme="dark"] {
  --bg-base:#0B1218; --bg-surface:#141B22; --bg-deep:#06090D;
  --border:#243140; --border-soft:#19222B; --link:#7BD2DC; --halo:rgba(123,210,220,0.16);
  --se-paper:#0B1218; --se-ink-50:#141B22; --se-ink-100:#19222B; --se-ink-200:#243140;
  --se-ink-300:#33455A; --se-ink-400:#5B6E83; --se-ink-500:#8395A8; --se-ink-600:#A9B7C6;
  --se-ink-700:#C8D2DC; --se-ink-800:#E4EAF0; --se-ink-900:#F2F5F8;
  --se-blue-50:#0F2A30; --se-coral-soft:#3A2E14; --se-marigold-soft:#3A2E14;
  --se-sage-soft:#1E2F25; --se-plum-soft:#2A2235;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 6px 18px rgba(0,0,0,.45);
  --shadow-3:0 24px 60px -16px rgba(0,0,0,.75),0 8px 16px rgba(0,0,0,.4);

  --bs-primary: var(--se-blue-300);
  --bs-primary-rgb: 123,210,220;
  --bs-body-color: var(--se-ink-800);
  --bs-body-bg: var(--bg-base);
  --bs-secondary-color: var(--se-ink-500);
  --bs-tertiary-bg: var(--se-ink-100);
  --bs-border-color: var(--border);
  --bs-link-color: var(--se-blue-300);
  --bs-link-hover-color: var(--se-blue-200);
  --bs-emphasis-color: var(--se-ink-900);
  --bs-heading-color: var(--se-ink-900);
  color-scheme: dark;
}

body { font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }

/* ============================================================
   Bootstrap component re-skins (token-driven, applies app-wide)
   ============================================================ */

/* Headings use the display/sub families */
h1,h2,.h1,.h2 { font-family: var(--font-display); letter-spacing: -.025em; font-weight: 600; }
h3,h4,h5,h6,.h3,.h4,.h5,.h6 { font-family: var(--font-sub); font-weight: 700; letter-spacing: -.015em; }

/* Buttons — solid primary keeps deep-teal ink, not white */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .62rem; --bs-btn-padding-x: 1.05rem; letter-spacing: -.005em; }
.btn-primary {
  --bs-btn-color: var(--primary-on); --bs-btn-bg: var(--se-blue-400); --bs-btn-border-color: var(--se-blue-400);
  --bs-btn-hover-color: var(--primary-on); --bs-btn-hover-bg: var(--se-blue-500); --bs-btn-hover-border-color: var(--se-blue-500);
  --bs-btn-active-bg: var(--se-blue-600); --bs-btn-active-border-color: var(--se-blue-600);
  --bs-btn-disabled-color: var(--primary-on); --bs-btn-disabled-bg: var(--se-blue-200); --bs-btn-disabled-border-color: var(--se-blue-200);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color:#03323A; --bs-btn-hover-color:#03323A; }
.btn-outline-secondary {
  --bs-btn-color: var(--se-ink-700); --bs-btn-border-color: var(--border); --bs-btn-bg: var(--bg-surface);
  --bs-btn-hover-color: var(--se-ink-900); --bs-btn-hover-bg: var(--se-ink-50); --bs-btn-hover-border-color: var(--se-ink-300);
  --bs-btn-active-color: var(--se-ink-900); --bs-btn-active-bg: var(--se-ink-100); --bs-btn-active-border-color: var(--se-ink-300);
}
.btn-success { --bs-btn-color:#0E2A1B; --bs-btn-bg:var(--se-sage); --bs-btn-border-color:var(--se-sage); --bs-btn-hover-color:#0E2A1B; --bs-btn-hover-bg:#5fa67b; --bs-btn-hover-border-color:#5fa67b; }
.btn-link { --bs-btn-color: var(--se-ink-600); --bs-btn-hover-color: var(--se-blue-600); font-weight: 600; text-decoration: none; }

/* Forms */
.form-label { font-size: .8125rem; font-weight: 600; color: var(--se-ink-800); margin-bottom: .4rem; }
.form-control, .form-select {
  background: var(--bg-surface); color: var(--se-ink-900);
  border-color: var(--border); border-width: 1.5px; padding: .62rem .8rem;
}
.form-control::placeholder { color: var(--se-ink-400); }
.form-control:focus, .form-select:focus { border-color: var(--se-blue-400); box-shadow: 0 0 0 4px var(--halo); }
.form-text { color: var(--se-ink-500); font-size: .75rem; }
.input-group-text { background: var(--se-ink-100); border-color: var(--border); border-width: 1.5px; color: var(--se-ink-600); font-family: var(--font-mono); font-weight: 600; }

/* Switch + checkbox in brand blue */
.form-check-input { border-color: var(--se-ink-300); border-width: 1.5px; }
.form-check-input:checked { background-color: var(--se-blue-400); border-color: var(--se-blue-400); }
.form-check-input:focus { border-color: var(--se-blue-400); box-shadow: 0 0 0 4px var(--halo); }
.form-switch .form-check-input { width: 2.6em; height: 1.45em; }

/* Cards */
.card {
  --bs-card-bg: var(--bg-surface); --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--r-lg); --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.6rem;
  box-shadow: var(--shadow-1);
}

/* Nav-tabs → underline style */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-active-color: var(--se-blue-600);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--se-blue-400);
  --bs-nav-link-color: var(--se-ink-500);
  --bs-nav-link-hover-color: var(--se-ink-800);
  --bs-nav-link-font-weight: 600;
  gap: 4px;
}
.nav-tabs .nav-link { border-width: 0 0 2px; padding: .8rem 1rem; font-size: .9rem; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--se-blue-200); }

/* Alerts → tonal with a left accent (brand pattern) */
.alert { --bs-alert-border: 0; border-left: 3px solid; border-radius: var(--r); font-size: .85rem; font-weight: 500; }
.alert-primary { background: var(--se-blue-50); color: var(--se-blue-700); border-left-color: var(--se-blue-400); }
.alert-success { background: var(--se-sage-soft); color: var(--se-sage-700); border-left-color: var(--se-success); }
[data-bs-theme="dark"] .alert-primary { color: var(--se-blue-200); }
[data-bs-theme="dark"] .alert-success { color: #9FD9B4; }

/* Selection + focus polish */
::selection { background: var(--se-blue-100); color: var(--se-ink-900); }