/* ============================================================
   BARRY CALLEBAUT — LOGISTICS DESIGN SYSTEM
   Framework-agnostic CSS. Import once in your app entry.
   Fontes: stack local (system-ui). Poppins self-hosted entra na entrega offline.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* ---------- Brand palette (OKLCH + HEX ref) ---------- */
  --burgundy:      oklch(0.32 0.10 5);      /* #5C1A33 */
  --burgundy-mid:  oklch(0.39 0.11 5);      /* #7A2848 */
  --gold:          oklch(0.71 0.11 75);     /* #C4944A */
  --cream:         oklch(0.97 0.014 80);    /* #FAF5EE */
  --brown-dark:    oklch(0.22 0.03 50);     /* #2C1810 */
  --brown-mid:     oklch(0.45 0.04 55);     /* #6B4C3B */

  /* ---------- Semantic surfaces ---------- */
  --background:            var(--cream);
  --foreground:            var(--brown-dark);
  --card:                  oklch(1 0 0);
  --card-foreground:       var(--brown-dark);
  --popover:               oklch(1 0 0);
  --popover-foreground:    var(--brown-dark);

  /* ---------- Semantic actions ---------- */
  --primary:               var(--burgundy);
  --primary-foreground:    oklch(1 0 0);
  --secondary:             oklch(0.94 0.012 70);
  --secondary-foreground:  var(--brown-dark);
  --muted:                 oklch(0.94 0.012 70);
  --muted-foreground:      var(--brown-mid);
  --accent:                var(--gold);
  --accent-foreground:     oklch(1 0 0);

  /* ---------- Status ---------- */
  --destructive:            oklch(0.60 0.24 27);   /* #FF0004 */
  --destructive-foreground: oklch(1 0 0);
  --success:                oklch(0.58 0.16 145);  /* #089346 */
  --success-foreground:     oklch(1 0 0);
  --warning:                oklch(0.78 0.15 80);

  /* ---------- Form / borders ---------- */
  --border:  oklch(0.89 0.018 70);           /* #E8DFD3 */
  --input:   oklch(0.89 0.018 70);
  --ring:    var(--burgundy);

  /* ---------- Sidebar ---------- */
  --sidebar:                     var(--burgundy);
  --sidebar-foreground:          oklch(1 0 0);
  --sidebar-primary:             var(--gold);
  --sidebar-primary-foreground:  oklch(1 0 0);
  --sidebar-accent:              var(--burgundy-mid);
  --sidebar-accent-foreground:   oklch(1 0 0);
  --sidebar-border:              oklch(0.39 0.11 5);
  --sidebar-ring:                var(--gold);

  /* ---------- Typography ---------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---------- Radius ---------- */
  --radius:    0.625rem;                    /* 10px */
  --radius-sm: calc(var(--radius) - 4px);   /* 6px  */
  --radius-md: calc(var(--radius) - 2px);   /* 8px  */
  --radius-lg: var(--radius);               /* 10px */
  --radius-xl: calc(var(--radius) + 4px);   /* 14px */
  --radius-2xl: calc(var(--radius) + 8px);  /* 18px */
  --radius-full: 9999px;

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

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px 0 color-mix(in oklab, var(--brown-dark) 8%, transparent);
  --shadow-md: 0 4px 8px -2px color-mix(in oklab, var(--brown-dark) 12%, transparent);
  --shadow-lg: 0 10px 20px -6px color-mix(in oklab, var(--brown-dark) 18%, transparent);
  --shadow-elegant: 0 10px 30px -10px color-mix(in oklab, var(--burgundy) 30%, transparent);

  /* ---------- Motion ---------- */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Gradients ---------- */
  --gradient-primary: linear-gradient(135deg, var(--burgundy), var(--burgundy-mid));
  --gradient-gold:    linear-gradient(135deg, var(--gold), oklch(0.78 0.12 78));
}

/* ============================================================
   2. BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html, body { margin: 0; padding: 0; font-family: var(--font-sans); }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-semibold); line-height: var(--leading-tight); margin: 0; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
a  { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   3. UTILITY CLASSES (subset)
   ============================================================ */
.bg-background { background-color: var(--background); }
.bg-card       { background-color: var(--card); }
.bg-primary    { background-color: var(--primary); color: var(--primary-foreground); }
.bg-secondary  { background-color: var(--secondary); color: var(--secondary-foreground); }
.bg-muted      { background-color: var(--muted); color: var(--muted-foreground); }
.bg-accent     { background-color: var(--accent); color: var(--accent-foreground); }
.bg-destructive{ background-color: var(--destructive); color: var(--destructive-foreground); }
.bg-success    { background-color: var(--success); color: var(--success-foreground); }

.text-foreground      { color: var(--foreground); }
.text-muted-foreground{ color: var(--muted-foreground); }
.text-primary         { color: var(--primary); }
.text-accent          { color: var(--accent); }
.text-destructive     { color: var(--destructive); }
.text-success         { color: var(--success); }

.border-default { border: 1px solid var(--border); }
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full{ border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }

/* ============================================================
   4. COMPONENT PATTERNS
   ============================================================ */

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary     { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--burgundy-mid); }

.btn-secondary   { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: color-mix(in oklab, var(--secondary) 80%, var(--brown-dark) 5%); }

.btn-outline     { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--muted); }

.btn-ghost       { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--muted); }

.btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn-destructive:hover { background: color-mix(in oklab, var(--destructive) 88%, black); }

.btn-premium {
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-elegant);
}

/* ---------- Card ---------- */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header  { padding: var(--space-6) var(--space-6) var(--space-4); }
.card-title   { font-size: var(--text-lg); font-weight: var(--font-semibold); }
.card-content { padding: var(--space-6); }
.card-footer  { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }

/* ---------- Input ---------- */
.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder { color: var(--muted-foreground); }
.input:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}

/* ---------- Label ---------- */
.label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--foreground);
  margin-bottom: var(--space-2);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  background: var(--muted);
  color: var(--muted-foreground);
}
.badge-primary     { background: var(--primary); color: var(--primary-foreground); }
.badge-accent      { background: var(--accent);  color: var(--accent-foreground); }
.badge-success     { background: var(--success); color: var(--success-foreground); }
.badge-destructive { background: var(--destructive); color: var(--destructive-foreground); }

/* ---------- Table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; }
.table thead th {
  color: var(--muted-foreground);
  font-weight: var(--font-medium);
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}
.table tbody tr { border-bottom: 1px solid var(--border); }
.table tbody tr:hover { background: color-mix(in oklab, var(--muted) 60%, transparent); }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  padding: var(--space-4);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--sidebar-foreground);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.sidebar-item:hover,
.sidebar-item[data-active="true"] {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

/* ---------- Dialog / Overlay ---------- */
.dialog-overlay {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--brown-dark) 55%, transparent);
  backdrop-filter: blur(2px);
}
.dialog-content {
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

/* ============================================================
   5. DARK MODE (opcional — ativa com class="dark" no <html>)
   ============================================================ */
.dark {
  --background:            var(--brown-dark);
  --foreground:            var(--cream);
  --card:                  oklch(0.26 0.03 50);
  --card-foreground:       var(--cream);
  --popover:               oklch(0.26 0.03 50);
  --popover-foreground:    var(--cream);
  --primary:               var(--gold);
  --primary-foreground:    var(--brown-dark);
  --secondary:             oklch(0.30 0.03 50);
  --secondary-foreground:  var(--cream);
  --muted:                 oklch(0.30 0.03 50);
  --muted-foreground:      oklch(0.75 0.02 70);
  --accent:                var(--burgundy);
  --accent-foreground:     var(--cream);
  --border:                oklch(0.35 0.03 50);
  --input:                 oklch(0.35 0.03 50);
  --ring:                  var(--gold);
}