/* ============================================================================
   Vuexy Design System — Colors & Type
   Based on the Vuexy HTML/Django Admin Template by PixInvent
   https://pixinvent.com/vuexy-django-bootstrap-admin-template/
   ============================================================================ */

/* ---------- Webfont: Public Sans (Vuexy's brand typeface) ----------------- */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---------- Boxicons (Vuexy's icon font for HTML/Django build) ------------ */
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');

:root {
  /* ===== Brand palette ===================================================
     Vuexy's core palette. `primary` is the unmistakable Vuexy purple. The five
     semantic accents map 1:1 to Bootstrap's contextual classes. */
  --vx-primary:        #7367F0;
  --vx-primary-light:  #8F85F3; /* hover, soft fills */
  --vx-primary-dark:   #655BD3; /* active/pressed */
  --vx-primary-50:     #EEEDFD; /* "label-primary" tint chip background */

  --vx-secondary:      #A8AAAE;
  --vx-secondary-50:   #F1F1F2;

  --vx-success:        #28C76F;
  --vx-success-50:     #DFF7E9;

  --vx-info:           #00CFE8;
  --vx-info-50:        #D7F5FA;

  --vx-warning:        #FF9F43;
  --vx-warning-50:     #FFF1E3;

  --vx-danger:         #EA5455;
  --vx-danger-50:      #FCE4E4;

  --vx-dark:           #4B4B4B;
  --vx-light:          #DFDFE3;

  /* ===== Surfaces & neutrals (light theme, default) ====================== */
  --vx-body-bg:        #F8F7FA;   /* page background */
  --vx-card-bg:        #FFFFFF;   /* card / surface */
  --vx-muted-bg:       #F1F0F2;   /* subtle fills, hovers on listrows */
  --vx-overlay-bg:     rgba(75, 70, 92, 0.42); /* modal scrim */

  /* Vuexy's text scale is rgba over #4B465C — these flatten to hex equivs. */
  --vx-heading:        #5D596C;   /* H1–H6, strong body */
  --vx-text:           #6F6B7D;   /* default body */
  --vx-text-muted:     #A5A3AE;   /* secondary, meta, hints */
  --vx-text-disabled:  #B7B5BE;
  --vx-text-on-primary:#FFFFFF;

  --vx-border:         #DBDADE;   /* card / input border */
  --vx-border-light:   #EBE9F1;   /* dividers, table rules */
  --vx-input-border:   #DBDADE;
  --vx-input-focus:    var(--vx-primary);

  /* ===== Elevation =======================================================
     Vuexy shadows are tight, low-opacity, never gray-blue — always derived
     from the body text color #4B465C. */
  --vx-shadow-xs:  0 0.0625rem 0.125rem rgba(75, 70, 92, 0.08);
  --vx-shadow-sm:  0 0.125rem  0.25rem  rgba(75, 70, 92, 0.10);
  --vx-shadow:     0 0.25rem   1.125rem rgba(75, 70, 92, 0.10);
  --vx-shadow-lg:  0 0.625rem  1.25rem  rgba(75, 70, 92, 0.15);
  --vx-shadow-xl:  0 0.9375rem 1.75rem  rgba(75, 70, 92, 0.20);
  --vx-shadow-focus: 0 0 0 0.15rem rgba(115, 103, 240, 0.25); /* primary focus ring */

  /* ===== Radii =========================================================== */
  --vx-radius-xs:   0.25rem;   /* 4px  — chips, small badges */
  --vx-radius-sm:   0.375rem;  /* 6px  — buttons, inputs */
  --vx-radius:      0.5rem;    /* 8px  — cards (most common) */
  --vx-radius-lg:   0.625rem;  /* 10px — modals, dropdowns */
  --vx-radius-xl:   1rem;      /* large feature cards */
  --vx-radius-pill: 50rem;     /* badges with rounded-pill */

  /* ===== Spacing scale (Bootstrap's, kept verbatim) ====================== */
  --vx-space-0:  0;
  --vx-space-1:  0.25rem;  /* 4 */
  --vx-space-2:  0.5rem;   /* 8 */
  --vx-space-3:  1rem;     /* 16 */
  --vx-space-4:  1.5rem;   /* 24 */
  --vx-space-5:  3rem;     /* 48 */
  --vx-space-6:  4.5rem;   /* 72 */
  --vx-space-7:  6rem;     /* 96 */

  /* ===== Layout chrome =================================================== */
  --vx-navbar-h:     64px;
  --vx-sidebar-w:    260px;
  --vx-sidebar-w-collapsed: 80px;
  --vx-content-max:  1440px;

  /* ===== Type ============================================================ */
  --vx-font-sans:  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --vx-font-mono:  'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* font-size scale (rem-based, root = 16px) */
  --vx-fs-xs:     0.75rem;    /* 12 — meta, chips, table labels */
  --vx-fs-sm:     0.8125rem;  /* 13 — secondary buttons, hints */
  --vx-fs-base:   0.9375rem;  /* 15 — body default */
  --vx-fs-md:     1rem;       /* 16 — list rows, dense headings */
  --vx-fs-lg:     1.125rem;   /* 18 — H5 / card titles */
  --vx-fs-xl:     1.375rem;   /* 22 — H4 */
  --vx-fs-2xl:    1.5rem;     /* 24 — H3 / stat numbers */
  --vx-fs-3xl:    1.75rem;    /* 28 — auth page heading */
  --vx-fs-4xl:    2rem;       /* 32 — H2 / dashboard hero */
  --vx-fs-5xl:    2.875rem;   /* 46 — H1 / display */

  /* weights */
  --vx-fw-light:    300;
  --vx-fw-regular:  400;
  --vx-fw-medium:   500;
  --vx-fw-semibold: 600;
  --vx-fw-bold:     700;

  /* line-heights */
  --vx-lh-tight:    1.2;
  --vx-lh-snug:     1.375;
  --vx-lh-normal:   1.5;
  --vx-lh-relaxed:  1.625;

  /* letter-spacing */
  --vx-tracking-tight:   -0.02em;
  --vx-tracking-normal:   0;
  --vx-tracking-wide:     0.04em;   /* small UPPERCASE labels */

  /* ===== Easings (Vuexy uses Bootstrap defaults + a tight ease-out) ====== */
  --vx-ease:          cubic-bezier(0.25, 0.8, 0.25, 1);
  --vx-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --vx-dur-fast:      150ms;
  --vx-dur:           250ms;
  --vx-dur-slow:      400ms;
}

/* ===== Dark theme (data-bs-theme="dark" matches Bootstrap 5 / Vuexy) ===== */
[data-bs-theme="dark"], .dark-theme {
  --vx-body-bg:       #25293C;
  --vx-card-bg:       #2F3349;
  --vx-muted-bg:      #3B3F58;
  --vx-overlay-bg:    rgba(15, 17, 28, 0.6);

  --vx-heading:       #D5D1EC;
  --vx-text:          #B6BEE3;
  --vx-text-muted:    #7E83A3;
  --vx-text-disabled: #6A6F8A;

  --vx-border:        #434968;
  --vx-border-light:  #3B3F58;
  --vx-input-border:  #434968;

  --vx-light:         #3B3F58;
  --vx-dark:          #E7E3FC;

  --vx-primary-50:    #312D4B; /* tinted chip on dark */
  --vx-success-50:    #1B3B2A;
  --vx-info-50:       #143C44;
  --vx-warning-50:    #3F2C16;
  --vx-danger-50:     #3F1F22;
  --vx-secondary-50:  #353A50;
}

/* ============================================================================
   Semantic element styles — drop-in defaults for body, headings, links, code.
   ============================================================================ */
html { font-size: 16px; }

body {
  font-family: var(--vx-font-sans);
  font-size: var(--vx-fs-base);
  font-weight: var(--vx-fw-regular);
  line-height: var(--vx-lh-normal);
  color: var(--vx-text);
  background-color: var(--vx-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .vx-h1, h2, .vx-h2, h3, .vx-h3, h4, .vx-h4, h5, .vx-h5, h6, .vx-h6 {
  color: var(--vx-heading);
  font-weight: var(--vx-fw-medium);
  line-height: var(--vx-lh-snug);
  margin: 0 0 var(--vx-space-2) 0;
  letter-spacing: var(--vx-tracking-tight);
}

h1, .vx-h1 { font-size: var(--vx-fs-5xl); font-weight: var(--vx-fw-semibold); }
h2, .vx-h2 { font-size: var(--vx-fs-4xl); font-weight: var(--vx-fw-semibold); }
h3, .vx-h3 { font-size: var(--vx-fs-2xl); }
h4, .vx-h4 { font-size: var(--vx-fs-xl); }
h5, .vx-h5 { font-size: var(--vx-fs-lg); }
h6, .vx-h6 { font-size: var(--vx-fs-md); font-weight: var(--vx-fw-semibold); }

p { margin: 0 0 var(--vx-space-3) 0; }

small, .vx-small {
  font-size: var(--vx-fs-sm);
  color: var(--vx-text-muted);
}

.vx-eyebrow,
.vx-overline {
  font-size: var(--vx-fs-xs);
  font-weight: var(--vx-fw-semibold);
  letter-spacing: var(--vx-tracking-wide);
  text-transform: uppercase;
  color: var(--vx-text-muted);
}

a {
  color: var(--vx-primary);
  text-decoration: none;
  transition: color var(--vx-dur-fast) var(--vx-ease);
}
a:hover { color: var(--vx-primary-dark); }

code, kbd, samp {
  font-family: var(--vx-font-mono);
  font-size: 0.875em;
  color: var(--vx-danger);
  background: var(--vx-muted-bg);
  padding: 0.125rem 0.375rem;
  border-radius: var(--vx-radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--vx-border-light);
  margin: var(--vx-space-3) 0;
}

::selection { background: var(--vx-primary-50); color: var(--vx-primary-dark); }