/* ============================================================
   THEME.CSS — Design tokens, typography, resets
   ============================================================ */

@import url('../vendor/fonts/fonts.css');

:root {
  /* ---- Backgrounds ---- */
  --bg-primary:   #ffffff;
  --bg-secondary: #f8f9fb;
  --bg-sidebar:   #0f172a;
  --bg-sidebar-hover:  #1e293b;
  --bg-sidebar-active: #1e293b;
  --bg-card:   #ffffff;
  --bg-hover:  #f1f5f9;

  /* ---- Brand ---- */
  --brand-primary:       #6366f1;
  --brand-primary-dark:  #4f46e5;
  --brand-primary-light: #e0e7ff;
  --brand-accent:        #06b6d4;

  /* ---- Text ---- */
  --text-primary:        #0f172a;
  --text-secondary:      #64748b;
  --text-muted:          #94a3b8;
  --text-inverse:        #ffffff;
  --text-sidebar:        #94a3b8;
  --text-sidebar-active: #ffffff;

  /* ---- Status ---- */
  --success:      #10b981;
  --success-bg:   #d1fae5;
  --success-text: #065f46;
  --warning:      #f59e0b;
  --warning-bg:   #fef3c7;
  --warning-text: #92400e;
  --danger:       #ef4444;
  --danger-bg:    #fee2e2;
  --danger-text:  #991b1b;
  --info:         #3b82f6;
  --info-bg:      #dbeafe;
  --info-text:    #1e40af;

  /* ---- Borders ---- */
  --border:       #e2e8f0;
  --border-strong:#cbd5e1;
  --border-focus: #6366f1;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);

  /* ---- Skeleton ---- */
  --skeleton-base:  #e2e8f0;
  --skeleton-shine: #f8fafc;

  /* ---- Radius ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- Layout ---- */
  --sidebar-width:           220px;
  --sidebar-width-collapsed:  64px;
  --content-padding:          28px;

  /* ---- Transitions ---- */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-secondary);
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 { text-transform: uppercase; }
h1 { font-size: 1.5rem;    font-weight: 700; line-height: 1.3; }
h2 { font-size: 1.25rem;   font-weight: 600; line-height: 1.4; }
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }

a  { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

p  { line-height: 1.6; }

img { display: block; max-width: 100%; }

button { font-family: inherit; font-size: inherit; }

input, select, textarea { font-family: inherit; font-size: inherit; }

ul, ol { list-style: none; }

/* ---- Utility ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.text-muted    { color: var(--text-muted); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }
.text-secondary{ color: var(--text-secondary); }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

.mt-4  { margin-top:  4px; }
.mt-8  { margin-top:  8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }