/* ==========================================================================
   DQ Design - Tokens (tidak bergantung warna kampus)
   Mengikuti Microsoft Fluent 2: radius 4/8px, elevation tipis, Segoe UI.
   ========================================================================== */
:root {
  /* Tipografi */
  --dq-font-base: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --dq-font-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --dq-font-arabic: "Noto Naskh Arabic", "Segoe UI", "Traditional Arabic", serif;
  --dq-font-mono: "Cascadia Code", Consolas, monospace;

  --dq-text-caption: .75rem;
  --dq-text-body: .875rem;
  --dq-text-body-lg: 1rem;
  --dq-text-title: 1.25rem;
  --dq-text-title-lg: 1.5rem;

  /* Ruang & bentuk */
  --dq-space-1: .25rem; --dq-space-2: .5rem; --dq-space-3: .75rem;
  --dq-space-4: 1rem;   --dq-space-5: 1.5rem; --dq-space-6: 2rem;
  --dq-radius-sm: 2px;  --dq-radius-md: 4px;  --dq-radius-lg: 8px;  --dq-radius-xl: 12px;
  --dq-radius-pill: 999px;

  /* Elevation Fluent (shadow2 / shadow4 / shadow8 / shadow16) */
  --dq-shadow-2:  0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --dq-shadow-4:  0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
  --dq-shadow-8:  0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --dq-shadow-16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);

  /* Netral Fluent (light) */
  --dq-neutral-bg:        #f5f5f5;   /* canvas */
  --dq-neutral-surface:   #ffffff;   /* kartu */
  --dq-neutral-surface-2: #fafafa;
  --dq-neutral-stroke:    #e0e0e0;
  --dq-neutral-stroke-2:  #d1d1d1;
  --dq-neutral-fg:        #242424;
  --dq-neutral-fg-2:      #424242;
  --dq-neutral-fg-3:      #616161;
  --dq-neutral-fg-disabled: #bdbdbd;

  /* Status semantik (sama untuk semua kampus, agar makna tidak berubah) */
  --dq-success: #107c10;  --dq-success-bg: #f1faf1;  --dq-success-stroke: #9fd89f;
  --dq-warning: #bc4b09;  --dq-warning-bg: #fff9f5;  --dq-warning-stroke: #fdcfb4;
  --dq-danger:  #b10e1c;  --dq-danger-bg:  #fdf3f4;  --dq-danger-stroke:  #eeacb2;
  --dq-info:    #0f6cbd;  --dq-info-bg:    #ebf3fc;  --dq-info-stroke:    #b4d6fa;

  /* Layout */
  --dq-sidebar-w: 260px;
  --dq-sidebar-w-collapsed: 56px;
  --dq-topbar-h: 56px;
  --dq-content-max: 1600px;
}

:root { --dq-danger-solid: #b10e1c;
  --dq-note-fg: #5c3b00; --dq-note-bg: #fff8e1; --dq-note-stroke: #f5d98a;
  color-scheme: light; }

/* ---------- Mode gelap (Fluent 2 dark) ---------- */
:root[data-dq-mode="dark"] {
  color-scheme: dark;
  --dq-neutral-bg: #141414;  --dq-neutral-surface: #1f1f1f;  --dq-neutral-surface-2: #292929;
  --dq-neutral-stroke: #424242; --dq-neutral-stroke-2: #525252;
  --dq-neutral-fg: #f5f5f5;  --dq-neutral-fg-2: #d6d6d6;  --dq-neutral-fg-3: #adadad;  --dq-neutral-fg-disabled: #5c5c5c;

  --dq-success: #6ccb6c; --dq-success-bg: #0b2a0b; --dq-success-stroke: #0e700e;
  --dq-warning: #fbb27c; --dq-warning-bg: #3d1a04; --dq-warning-stroke: #8a3707;
  --dq-danger:  #f1707b; --dq-danger-bg:  #3b0509; --dq-danger-stroke:  #920a19;
  --dq-info:    #479ef5; --dq-info-bg:    #082338; --dq-info-stroke:    #0e4775;
  --dq-note-fg: #ffd980; --dq-note-bg: #3a2c00; --dq-note-stroke: #7a5c00;

  --dq-shadow-2:  0 0 2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.6);
  --dq-shadow-4:  0 0 2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.6);
  --dq-shadow-8:  0 0 2px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.6);
  --dq-shadow-16: 0 0 2px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.6);
}