/* ==========================================================================
   tokens.css — Design tokens (single source of truth for the visual system)
   --------------------------------------------------------------------------
   * Everything themeable is a CSS variable.
   * Light theme lives on :root, dark theme on [data-bs-theme="dark"].
   * Accent presets: [data-accent="indigo|blue|emerald|rose"] (indigo default).
   * Density presets: [data-density="comfortable|compact"].
   * Bootstrap 5.3 variables (--bs-*) are mapped to these tokens so that every
     Bootstrap component follows the theme automatically.
   ========================================================================== */

/* ---- Inter (self-hosted variable font, latin + latin-ext) --------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* ---- Typography ------------------------------------------------------- */
  --tf-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --tf-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* 6-step UI scale (+ display). Base UI text is 14px. */
  --tf-fs-xs: 0.75rem; /* 12 */
  --tf-fs-sm: 0.8125rem; /* 13 */
  --tf-fs-base: 0.875rem; /* 14 */
  --tf-fs-md: 1rem; /* 16 */
  --tf-fs-lg: 1.25rem; /* 20 */
  --tf-fs-xl: 1.5rem; /* 24 */
  --tf-fs-2xl: 1.875rem; /* 30 */
  --tf-lh-tight: 1.25;
  --tf-lh-base: 1.5;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --tf-space-1: 0.25rem;
  --tf-space-2: 0.5rem;
  --tf-space-3: 0.75rem;
  --tf-space-4: 1rem;
  --tf-space-5: 1.25rem;
  --tf-space-6: 1.5rem;
  --tf-space-8: 2rem;
  --tf-space-10: 2.5rem;

  /* ---- Radius ----------------------------------------------------------- */
  --tf-radius-sm: 6px;
  --tf-radius: 10px;
  --tf-radius-lg: 14px;
  --tf-radius-pill: 999px;

  /* ---- Layout ----------------------------------------------------------- */
  --tf-sidebar-w: 272px;
  --tf-sidebar-w-collapsed: 76px;
  --tf-header-h: 64px;
  --tf-content-max: 1480px;
  --tf-gutter: 1.5rem;

  /* ---- Density (comfortable default) ------------------------------------ */
  --tf-card-pad: 1.25rem;
  --tf-cell-py: 0.8125rem;
  --tf-cell-px: 1rem;
  --tf-control-h: 2.375rem;

  /* ---- Motion ----------------------------------------------------------- */
  --tf-ease: cubic-bezier(0.2, 0, 0, 1);
  --tf-dur: 160ms;

  /* ======================= LIGHT THEME (default) ========================== */
  color-scheme: light;

  /* Surfaces */
  --tf-bg: #f5f6fa;
  --tf-surface: #ffffff;
  --tf-surface-2: #f8f9fc; /* subtle inset / table header */
  --tf-surface-3: #eef0f6; /* hover / track */
  --tf-sidebar-bg: #ffffff;
  --tf-overlay: rgba(15, 20, 40, 0.5);

  /* Borders */
  --tf-border: #e4e7ef;
  --tf-border-strong: #d0d5e2;

  /* Text (all AA on --tf-surface) */
  --tf-text: #141a30;
  --tf-text-muted: #566078;
  --tf-text-subtle: #646d84;
  --tf-on-primary: #ffffff;

  /* Primary (accent) — indigo #4f46e5 */
  --tf-primary: #4f46e5;
  --tf-primary-hover: #4338ca;
  --tf-primary-active: #3730a3;
  --tf-primary-rgb: 79, 70, 229;
  --tf-primary-text: #4338ca; /* accent used as text on surfaces */
  --tf-primary-soft: rgba(var(--tf-primary-rgb), 0.1);
  --tf-primary-soft-hover: rgba(var(--tf-primary-rgb), 0.16);
  --tf-focus-ring: 0 0 0 3px rgba(var(--tf-primary-rgb), 0.28);

  /* Semantic */
  --tf-success: #166534;
  --tf-warning: #92400e;
  --tf-danger: #b91c1c;
  --tf-info: #0369a1;
  --tf-success-rgb: 22, 101, 52;
  --tf-warning-rgb: 146, 64, 14;
  --tf-danger-rgb: 185, 28, 28;
  --tf-info-rgb: 3, 105, 161;

  /* Status (tasks / projects) */
  --tf-status-backlog: #566478;
  --tf-status-todo: #475569;
  --tf-status-progress: #1d4ed8;
  --tf-status-review: #6d28d9;
  --tf-status-done: #166534;
  --tf-status-blocked: #b91c1c;
  --tf-status-hold: #92400e;

  /* Priority */
  --tf-priority-low: #64748b;
  --tf-priority-medium: #2563eb;
  --tf-priority-high: #d97706;
  --tf-priority-urgent: #dc2626;

  /* Chart palette (categorical, validated for both themes) */
  --tf-chart-1: #4f46e5;
  --tf-chart-2: #0891b2;
  --tf-chart-3: #16a34a;
  --tf-chart-4: #d97706;
  --tf-chart-5: #db2777;
  --tf-chart-6: #7c3aed;
  --tf-chart-7: #64748b;
  --tf-chart-grid: rgba(20, 26, 48, 0.08);

  /* Shadows */
  --tf-shadow-sm: 0 1px 2px rgba(20, 26, 48, 0.05), 0 1px 1px rgba(20, 26, 48, 0.03);
  --tf-shadow-md: 0 8px 24px -6px rgba(20, 26, 48, 0.12), 0 2px 6px rgba(20, 26, 48, 0.05);

  /* ---- Bootstrap 5.3 mapping ------------------------------------------- */
  --bs-body-font-family: var(--tf-font-sans);
  --bs-body-font-size: var(--tf-fs-base);
  --bs-body-line-height: var(--tf-lh-base);
  --bs-body-color: var(--tf-text);
  --bs-body-color-rgb: 20, 26, 48;
  --bs-body-bg: var(--tf-bg);
  --bs-body-bg-rgb: 245, 246, 250;
  --bs-secondary-color: var(--tf-text-muted);
  --bs-secondary-bg: var(--tf-surface-3);
  --bs-tertiary-color: var(--tf-text-subtle);
  --bs-tertiary-bg: var(--tf-surface-2);
  --bs-emphasis-color: var(--tf-text);
  --bs-heading-color: var(--tf-text);
  --bs-border-color: var(--tf-border);
  --bs-border-color-translucent: var(--tf-border);
  --bs-border-radius: var(--tf-radius-sm);
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: var(--tf-radius);
  --bs-border-radius-xl: var(--tf-radius-lg);
  --bs-primary: var(--tf-primary);
  --bs-primary-rgb: var(--tf-primary-rgb);
  --bs-success: var(--tf-success);
  --bs-success-rgb: var(--tf-success-rgb);
  --bs-warning: var(--tf-warning);
  --bs-warning-rgb: var(--tf-warning-rgb);
  --bs-danger: var(--tf-danger);
  --bs-danger-rgb: var(--tf-danger-rgb);
  --bs-info: var(--tf-info);
  --bs-info-rgb: var(--tf-info-rgb);
  --bs-link-color: var(--tf-primary-text);
  --bs-link-color-rgb: 67, 56, 202;
  --bs-link-hover-color: var(--tf-primary-active);
  --bs-link-hover-color-rgb: 55, 48, 163;
  --bs-focus-ring-color: rgba(var(--tf-primary-rgb), 0.28);
  --bs-box-shadow: var(--tf-shadow-md);
  --bs-box-shadow-sm: var(--tf-shadow-sm);
}

/* ============================== DARK THEME ============================== */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --tf-bg: #0c0f1d;
  --tf-surface: #141930;
  --tf-surface-2: #181e38;
  --tf-surface-3: #1f2645;
  --tf-sidebar-bg: #10142a;
  --tf-overlay: rgba(2, 4, 12, 0.66);

  --tf-border: #252c4a;
  --tf-border-strong: #343d63;

  --tf-text: #e9ebf5;
  --tf-text-muted: #a4acc4;
  --tf-text-subtle: #8c94ad;
  --tf-on-primary: #ffffff;

  --tf-primary: #5b5ee8;
  --tf-primary-hover: #6d70ef;
  --tf-primary-active: #7f82f4;
  --tf-primary-rgb: 129, 140, 248;
  --tf-primary-text: #a5b4fc;
  --tf-primary-soft: rgba(var(--tf-primary-rgb), 0.16);
  --tf-primary-soft-hover: rgba(var(--tf-primary-rgb), 0.24);
  --tf-focus-ring: 0 0 0 3px rgba(var(--tf-primary-rgb), 0.4);

  --tf-success: #4ade80;
  --tf-warning: #fbbf24;
  --tf-danger: #f87171;
  --tf-info: #38bdf8;
  --tf-success-rgb: 74, 222, 128;
  --tf-warning-rgb: 251, 191, 36;
  --tf-danger-rgb: 248, 113, 113;
  --tf-info-rgb: 56, 189, 248;

  --tf-status-backlog: #94a3b8;
  --tf-status-todo: #a4acc4;
  --tf-status-progress: #60a5fa;
  --tf-status-review: #a78bfa;
  --tf-status-done: #4ade80;
  --tf-status-blocked: #f87171;
  --tf-status-hold: #fbbf24;

  --tf-priority-low: #94a3b8;
  --tf-priority-medium: #60a5fa;
  --tf-priority-high: #fbbf24;
  --tf-priority-urgent: #f87171;

  --tf-chart-1: #818cf8;
  --tf-chart-2: #22d3ee;
  --tf-chart-3: #4ade80;
  --tf-chart-4: #fbbf24;
  --tf-chart-5: #f472b6;
  --tf-chart-6: #a78bfa;
  --tf-chart-7: #94a3b8;
  --tf-chart-grid: rgba(233, 235, 245, 0.09);

  --tf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --tf-shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.35);

  --bs-body-color-rgb: 233, 235, 245;
  --bs-body-bg-rgb: 12, 15, 29;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color-rgb: 199, 210, 254;
}

/* ============================ ACCENT PRESETS ============================ */
/* Each preset defines light values on the attribute and dark values below. */
[data-accent="blue"] {
  --tf-primary: #2563eb;
  --tf-primary-hover: #1d4ed8;
  --tf-primary-active: #1e40af;
  --tf-primary-rgb: 37, 99, 235;
  --tf-primary-text: #1d4ed8;
  --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color-rgb: 30, 64, 175;
}
[data-accent="emerald"] {
  --tf-primary: #047857;
  --tf-primary-hover: #065f46;
  --tf-primary-active: #064e3b;
  --tf-primary-rgb: 4, 120, 87;
  --tf-primary-text: #047857;
  --bs-link-color-rgb: 4, 120, 87;
  --bs-link-hover-color-rgb: 6, 95, 70;
}
[data-accent="rose"] {
  --tf-primary: #be123c;
  --tf-primary-hover: #9f1239;
  --tf-primary-active: #881337;
  --tf-primary-rgb: 190, 18, 60;
  --tf-primary-text: #be123c;
  --bs-link-color-rgb: 190, 18, 60;
  --bs-link-hover-color-rgb: 159, 18, 57;
}
[data-bs-theme="dark"][data-accent="blue"] {
  --tf-primary: #2f6cf0;
  --tf-primary-hover: #4a80f3;
  --tf-primary-active: #6896f6;
  --tf-primary-rgb: 96, 165, 250;
  --tf-primary-text: #93c5fd;
  --bs-link-color-rgb: 147, 197, 253;
  --bs-link-hover-color-rgb: 191, 219, 254;
}
[data-bs-theme="dark"][data-accent="emerald"] {
  --tf-primary: #059669;
  --tf-primary-hover: #10a878;
  --tf-primary-active: #34d399;
  --tf-primary-rgb: 52, 211, 153;
  --tf-primary-text: #6ee7b7;
  --bs-link-color-rgb: 110, 231, 183;
  --bs-link-hover-color-rgb: 167, 243, 208;
}
[data-bs-theme="dark"][data-accent="rose"] {
  --tf-primary: #d9285a;
  --tf-primary-hover: #e4466f;
  --tf-primary-active: #ee6a8c;
  --tf-primary-rgb: 251, 113, 133;
  --tf-primary-text: #fda4af;
  --bs-link-color-rgb: 253, 164, 175;
  --bs-link-hover-color-rgb: 254, 205, 211;
}

/* ============================ DENSITY PRESETS =========================== */
[data-density="compact"] {
  --tf-card-pad: 0.9375rem;
  --tf-cell-py: 0.5rem;
  --tf-cell-px: 0.75rem;
  --tf-control-h: 2.125rem;
  --tf-gutter: 1.125rem;
}