@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');
@import "tailwindcss";
@source "./";

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy:          #0f172a;
  --navy-800:      #1e293b;
  --navy-700:      #334155;
  --sky:           #0ea5e9;
  --sky-dark:      #0369a1;
  --sky-light:     #e0f2fe;

  /* Semantic */
  --success:       #10b981;
  --success-light: #ecfdf5;
  --warning:       #f59e0b;
  --warning-light: #fffbeb;
  --danger:        #ef4444;
  --danger-light:  #fff1f2;

  /* Sidebar */
  --sidebar-width: 248px;
  --sidebar-bg:    linear-gradient(180deg, #0f172a 0%, #1a2744 100%);

  /* Surface */
  --bg-app:    #f1f5f9;
  --bg-card:   #ffffff;
  --bg-muted:  #f8fafc;

  /* Border */
  --border:    #e2e8f0;
  --border-md: #cbd5e1;

  /* Text */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.06);
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  background: var(--bg-app);
  color: var(--text-primary);
  line-height: 1.5;
}

/* ─── Typography ────────────────────────────────────────────────────────────── */
.font-serif { font-family: 'DM Serif Display', Georgia, serif; }

h1 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem;  font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 0.95rem; font-weight: 700; }

/* ─── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* ─── Focus ──────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* ─── Transitions ────────────────────────────────────────────────────────────── */
button, a, input, select, textarea {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Card ────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.card-hover {
  transition: box-shadow 0.2s, transform 0.2s;
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ─── Form inputs ────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select,
textarea {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  @page { size: A4 portrait; margin: 8mm 10mm; }
  body { background: white; }
}

/* ─── Animations ──────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes bellRing {
  0%, 100% { transform: rotate(0deg); }
  10%       { transform: rotate(-14deg); }
  20%       { transform: rotate(14deg); }
  30%       { transform: rotate(-8deg); }
  40%       { transform: rotate(8deg); }
  50%       { transform: rotate(0deg); }
}

.animate-fadeIn  { animation: fadeIn  0.2s ease both; }
.animate-slideUp { animation: slideUp 0.22s ease both; }
.animate-popIn   { animation: popIn   0.2s ease both; }
.animate-spin    { animation: spin    0.8s linear infinite; }

/* ─── Utility ────────────────────────────────────────────────────────────────── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-mono { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; }

/* ─── Table ──────────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 13px 16px;
  font-size: 13px;
  border-bottom: 1px solid #f8fafc;
  color: var(--text-secondary);
}
.data-table tr:hover td { background: #fafafa; }