/**
 * OpenThink SAS — Design Tokens (CSS Custom Properties)
 * 
 * Multi-tenant ready: Each sekolah can override these variables
 * via a tenant-specific CSS file (e.g., tenant-nfis.css)
 *
 * Dark mode: Variables adapt automatically via [data-bs-theme="dark"]
 */

:root {
  /* ===== TENANT-CUSTOMIZABLE BRAND COLORS ===== */
  /* Default: Nurul Fikri Islamic School palette */
  --ots-brand-primary: #0d6eaa;
  --ots-brand-primary-rgb: 13, 110, 170;
  --ots-brand-primary-light: #e8f4fc;
  --ots-brand-primary-dark: #094d78;
  
  --ots-brand-secondary: #00a651;
  --ots-brand-secondary-rgb: 0, 166, 81;
  --ots-brand-secondary-light: #e6f9ef;
  --ots-brand-secondary-dark: #007a3c;

  --ots-brand-accent: #f7b731;
  --ots-brand-accent-rgb: 247, 183, 49;

  /* ===== TENANT-CUSTOMIZABLE BRANDING ===== */
  --ots-logo-height: 38px;
  --ots-logo-sidebar-height: 32px;
  --ots-app-name: "SIMMSIT";

  /* ===== SURFACE COLORS (Light Mode) ===== */
  --ots-bg-body: #f8f9fc;
  --ots-bg-surface: #ffffff;
  --ots-bg-surface-secondary: #f1f5f9;
  --ots-bg-sidebar: #1b2537;
  --ots-bg-header: #ffffff;

  /* ===== TEXT COLORS ===== */
  --ots-text-primary: #1e293b;
  --ots-text-secondary: #64748b;
  --ots-text-muted: #94a3b8;
  --ots-text-sidebar: #94a3b8;
  --ots-text-sidebar-active: #ffffff;

  /* ===== BORDER & SHADOW ===== */
  --ots-border-color: #e2e8f0;
  --ots-border-radius: 0.5rem;
  --ots-border-radius-lg: 0.75rem;
  --ots-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ots-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --ots-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --ots-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* ===== TYPOGRAPHY ===== */
  --ots-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ots-font-size-base: 0.875rem;
  --ots-font-size-sm: 0.8125rem;
  --ots-font-size-xs: 0.75rem;
  --ots-font-size-lg: 1rem;
  --ots-line-height: 1.5714;

  /* ===== SPACING ===== */
  --ots-sidebar-width: 260px;
  --ots-sidebar-collapsed-width: 70px;
  --ots-header-height: 56px;
  --ots-content-padding: 1.5rem;

  /* ===== TRANSITION ===== */
  --ots-transition-speed: 0.2s;
  --ots-transition-fn: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== STATUS COLORS ===== */
  --ots-success: #22c55e;
  --ots-warning: #f59e0b;
  --ots-danger: #ef4444;
  --ots-info: #3b82f6;

  /* ===== Override Tabler variables ===== */
  --tblr-primary: var(--ots-brand-primary);
  --tblr-primary-rgb: var(--ots-brand-primary-rgb);
  --tblr-font-sans-serif: var(--ots-font-family);
}

/* ===== DARK MODE ===== */
[data-bs-theme="dark"] {
  --ots-bg-body: #0f172a;
  --ots-bg-surface: #1e293b;
  --ots-bg-surface-secondary: #334155;
  --ots-bg-sidebar: #0f172a;
  --ots-bg-header: #1e293b;

  --ots-text-primary: #f1f5f9;
  --ots-text-secondary: #94a3b8;
  --ots-text-muted: #64748b;

  --ots-border-color: #334155;
  --ots-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ots-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --ots-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');