/* ============================================================================
   AU ONE ERP — DESIGN TOKENS  (assets/css/au-tokens.css)  v1.0.0
   ----------------------------------------------------------------------------
   The shared design language for every AU One module.

   RULES:
   • Everything is prefixed `--au-` / `.au-` — this file can NEVER collide
     with a module's existing CSS. Loading it changes nothing until a module
     opts in by using the tokens/classes.
   • Palette mirrors the platform's established olive/paper/ink family so new
     surfaces feel native next to existing ones.
   • Motion respects prefers-reduced-motion.
   ============================================================================ */

:root{
  /* ---- brand + semantic color ---- */
  --au-olive:        #748040;
  --au-olive-deep:   #54632a;
  --au-olive-soft:   rgba(163,178,94,.16);
  --au-gold:         #e9d9a3;
  --au-amber:        #e0922b;
  --au-ok:           #3f7d4e;
  --au-warn:         #d69e2e;
  --au-bad:          #d6453f;
  --au-info:         #5b8def;

  /* ---- light surfaces ---- */
  --au-paper:        #f4f3ec;
  --au-paper-2:      #fbfaf5;
  --au-paper-3:      #f6f6f1;
  --au-ink:          #1c1e16;
  --au-ink-2:        #444a38;
  --au-muted:        #8a8f7d;
  --au-line:         #e3e1d4;
  --au-line-2:       #d5d3c4;

  /* ---- spacing scale (4pt grid) ---- */
  --au-s1: 4px;  --au-s2: 8px;  --au-s3: 12px; --au-s4: 16px;
  --au-s5: 20px; --au-s6: 24px; --au-s8: 32px; --au-s10: 40px;

  /* ---- radii ---- */
  --au-r-sm: 8px; --au-r-md: 12px; --au-r-lg: 16px; --au-r-xl: 22px; --au-r-pill: 999px;

  /* ---- layered elevation ---- */
  --au-shadow-1: 0 1px 2px rgba(20,24,16,.06), 0 2px 8px rgba(20,24,16,.05);
  --au-shadow-2: 0 2px 6px rgba(20,24,16,.07), 0 10px 24px -8px rgba(20,24,16,.14);
  --au-shadow-3: 0 6px 16px rgba(20,24,16,.10), 0 24px 48px -12px rgba(20,24,16,.22);

  /* ---- glass ---- */
  --au-glass-bg:     rgba(251,250,245,.66);
  --au-glass-line:   rgba(255,255,255,.45);
  --au-glass-blur:   14px;

  /* ---- motion (spring-feel curves) ---- */
  --au-ease-out:     cubic-bezier(.22,.9,.24,1);
  --au-ease-spring:  cubic-bezier(.34,1.4,.44,1);
  --au-t-fast: 140ms; --au-t-med: 240ms; --au-t-slow: 380ms;

  /* ---- type scale ---- */
  --au-font: 'Archivo','Lexend',system-ui,'Segoe UI',Roboto,sans-serif;
  --au-mono: 'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --au-fs-xs: 11px; --au-fs-sm: 12.5px; --au-fs-md: 14px; --au-fs-lg: 16.5px;
  --au-fs-xl: 21px; --au-fs-2xl: 28px;

  /* ---- z scale ---- */
  --au-z-nav: 40; --au-z-overlay: 900; --au-z-modal: 9000; --au-z-toast: 99999;
}

/* dark theme — keyed off the platform's existing html[data-theme="dark"] */
html[data-theme="dark"]{
  --au-paper:        #0d0d07;
  --au-paper-2:      #15160f;
  --au-paper-3:      #1b1d14;
  --au-ink:          #f3f5f0;
  --au-ink-2:        #cdd6c6;
  --au-muted:        #8f957f;
  --au-line:         #262a1c;
  --au-line-2:       #343827;
  --au-olive-soft:   rgba(163,178,94,.22);
  --au-glass-bg:     rgba(21,22,15,.62);
  --au-glass-line:   rgba(255,255,255,.10);
  --au-shadow-1: 0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.28);
  --au-shadow-2: 0 2px 6px rgba(0,0,0,.36), 0 10px 24px -8px rgba(0,0,0,.5);
  --au-shadow-3: 0 6px 16px rgba(0,0,0,.44), 0 24px 48px -12px rgba(0,0,0,.62);
}

/* ============================================================================
   OPT-IN PRIMITIVES — used by new/uplifted surfaces only
   ============================================================================ */

.au-card{
  background: var(--au-paper-2);
  border: 1px solid var(--au-line);
  border-radius: var(--au-r-lg);
  box-shadow: var(--au-shadow-1);
  transition: transform var(--au-t-med) var(--au-ease-out), box-shadow var(--au-t-med) var(--au-ease-out);
}
@media (hover:hover){
  .au-card.au-lift:hover{ transform: translateY(-2px); box-shadow: var(--au-shadow-2); }
}

.au-glass{
  background: var(--au-glass-bg);
  -webkit-backdrop-filter: blur(var(--au-glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--au-glass-blur)) saturate(1.4);
  border: 1px solid var(--au-glass-line);
  border-radius: var(--au-r-lg);
  box-shadow: var(--au-shadow-2);
}

.au-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--au-line-2); border-radius: var(--au-r-md);
  background: var(--au-paper-2); color: var(--au-ink);
  font: 700 var(--au-fs-sm)/1 var(--au-font);
  padding: 9px 15px; cursor:pointer; user-select:none;
  transition: transform var(--au-t-fast) var(--au-ease-out), filter var(--au-t-fast) ease,
              background var(--au-t-fast) ease, box-shadow var(--au-t-fast) ease;
}
.au-btn:active{ transform: scale(.97); }
.au-btn.au-primary{ background: var(--au-olive); border-color: var(--au-olive); color:#fff; }
.au-btn.au-primary:hover{ filter: brightness(1.06); box-shadow: 0 4px 14px rgba(116,128,64,.35); }
.au-btn.au-danger{ background: var(--au-bad); border-color: var(--au-bad); color:#fff; }

.au-chip{
  display:inline-flex; align-items:center; gap:5px;
  font: 800 var(--au-fs-xs)/1 var(--au-font); letter-spacing:.04em; text-transform:uppercase;
  padding: 4px 10px; border-radius: var(--au-r-pill);
  background: var(--au-paper-3); color: var(--au-ink-2); border:1px solid var(--au-line);
}
.au-chip.ok{ color: var(--au-ok); border-color: var(--au-ok); }
.au-chip.warn{ color: var(--au-warn); border-color: var(--au-warn); }
.au-chip.bad{ color: var(--au-bad); border-color: var(--au-bad); }

/* ---- entrance motion ---- */
@keyframes au-rise{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes au-fade{ from{ opacity:0; } to{ opacity:1; } }
.au-rise{ animation: au-rise var(--au-t-slow) var(--au-ease-spring) both; }
.au-fade{ animation: au-fade var(--au-t-med) ease both; }
.au-stagger > *{ animation: au-rise var(--au-t-slow) var(--au-ease-spring) both; }
.au-stagger > *:nth-child(2){ animation-delay: 40ms; }
.au-stagger > *:nth-child(3){ animation-delay: 80ms; }
.au-stagger > *:nth-child(4){ animation-delay: 120ms; }
.au-stagger > *:nth-child(5){ animation-delay: 160ms; }
.au-stagger > *:nth-child(n+6){ animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce){
  .au-rise, .au-fade, .au-stagger > *{ animation: none; }
  .au-card, .au-btn{ transition: none; }
}

/* ============================================================================
   v1.1 — ENTERPRISE COMPONENT CLASSES (backing AUCore.ui)
   All `.au-` prefixed → zero collision risk; dormant until emitted.
   ============================================================================ */

/* ---- KPI card ---- */
.au-kpi{ background:var(--au-paper-2); border:1px solid var(--au-line); border-radius:var(--au-r-lg);
  padding:var(--au-s4) var(--au-s4) var(--au-s3); box-shadow:var(--au-shadow-1); min-width:0; }
.au-kpi small{ display:block; font:700 var(--au-fs-xs)/1.3 var(--au-font); letter-spacing:.05em;
  text-transform:uppercase; color:var(--au-muted); margin-bottom:6px; }
.au-kpi b{ display:block; font:800 var(--au-fs-xl)/1.1 var(--au-font); color:var(--au-ink);
  font-variant-numeric:tabular-nums; word-break:break-word; }
.au-kpi .au-kpi-sub{ display:block; font:600 var(--au-fs-xs)/1.35 var(--au-font); color:var(--au-muted); margin-top:5px; }
.au-kpi.tone-ok b{ color:var(--au-ok); } .au-kpi.tone-warn b{ color:var(--au-warn); }
.au-kpi.tone-bad b{ color:var(--au-bad); } .au-kpi.tone-accent b{ color:var(--au-olive); }
.au-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--au-s3); }

/* ---- skeleton loading (shimmer) ---- */
@keyframes au-shimmer{ from{ background-position:-360px 0; } to{ background-position:360px 0; } }
.au-skel{ display:block; height:13px; border-radius:7px;
  background:linear-gradient(90deg,var(--au-paper-3) 25%,var(--au-line) 42%,var(--au-paper-3) 60%);
  background-size:720px 100%; animation:au-shimmer 1.15s linear infinite; }
.au-skel + .au-skel{ margin-top:9px; }
.au-skel-group{ padding:var(--au-s2) 0; }
.au-skel.au-skel-lg{ height:22px; border-radius:9px; }

/* ---- empty state ---- */
.au-empty{ text-align:center; padding:var(--au-s8) var(--au-s4); color:var(--au-muted); }
.au-empty .au-empty-ic{ font-size:30px; line-height:1; display:block; margin-bottom:10px; opacity:.8; }
.au-empty b{ display:block; font:800 var(--au-fs-md)/1.35 var(--au-font); color:var(--au-ink-2); margin-bottom:4px; }
.au-empty span{ display:block; font:500 var(--au-fs-sm)/1.5 var(--au-font); max-width:46ch; margin:0 auto; }

/* ---- spinner ---- */
@keyframes au-spin{ to{ transform:rotate(360deg); } }
.au-spin{ display:inline-block; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--au-line-2); border-top-color:var(--au-olive);
  animation:au-spin .7s linear infinite; vertical-align:-3px; }

/* ---- progress bar ---- */
.au-progress{ height:8px; border-radius:var(--au-r-pill); background:var(--au-paper-3);
  border:1px solid var(--au-line); overflow:hidden; }
.au-progress > i{ display:block; height:100%; border-radius:var(--au-r-pill);
  background:var(--au-olive); transition:width var(--au-t-slow) var(--au-ease-out); }
.au-progress.tone-warn > i{ background:var(--au-warn); } .au-progress.tone-bad > i{ background:var(--au-bad); }

/* ---- clean enterprise table ---- */
.au-table{ width:100%; border-collapse:collapse; font:500 var(--au-fs-sm)/1.45 var(--au-font); }
.au-table th{ text-align:left; font:800 var(--au-fs-xs)/1.3 var(--au-font); letter-spacing:.05em;
  text-transform:uppercase; color:var(--au-muted); padding:9px 12px; border-bottom:2px solid var(--au-line-2); }
.au-table td{ padding:10px 12px; border-bottom:1px solid var(--au-line); color:var(--au-ink-2); }
.au-table tr:hover td{ background:var(--au-olive-soft); }
.au-table .num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--au-mono); }

/* ---- input ---- */
.au-input{ width:100%; box-sizing:border-box; font:600 var(--au-fs-sm)/1.4 var(--au-font);
  color:var(--au-ink); background:var(--au-paper-2); border:1.5px solid var(--au-line-2);
  border-radius:var(--au-r-md); padding:9px 12px; transition:border-color var(--au-t-fast) ease, box-shadow var(--au-t-fast) ease; }
.au-input:focus{ outline:none; border-color:var(--au-olive); box-shadow:0 0 0 3px var(--au-olive-soft); }

/* ---- drawer (right panel) ---- */
.au-drawer-veil{ position:fixed; inset:0; z-index:var(--au-z-overlay); background:rgba(10,12,6,.44);
  opacity:0; transition:opacity var(--au-t-med) ease; }
.au-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:calc(var(--au-z-overlay) + 1);
  width:min(440px,92vw); background:var(--au-paper-2); border-left:1px solid var(--au-line);
  box-shadow:var(--au-shadow-3); transform:translateX(102%); transition:transform var(--au-t-med) var(--au-ease-out);
  display:flex; flex-direction:column; }
.au-drawer.on{ transform:none; } .au-drawer-veil.on{ opacity:1; }
.au-drawer-h{ display:flex; align-items:center; gap:10px; padding:var(--au-s4);
  border-bottom:1px solid var(--au-line); font:800 var(--au-fs-lg)/1.2 var(--au-font); color:var(--au-ink); }
.au-drawer-b{ padding:var(--au-s4); overflow:auto; flex:1; }

@media (prefers-reduced-motion: reduce){
  .au-skel{ animation:none; } .au-spin{ animation-duration:1.4s; }
  .au-drawer, .au-drawer-veil, .au-progress > i{ transition:none; }
}