/* =============================================================
   Improve Digital — Design Tokens
   A refined publisher-analytics design system built from the
   existing Azerion / Improve Digital dashboard.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --- Brand -------------------------------------------------- */
  --id-brand-navy:       #0f1a2e;   /* sidebar / brand surface */
  --id-brand-navy-800:   #16243d;   /* hover on navy surfaces */
  --id-brand-navy-600:   #233452;   /* borders on navy */
  --id-brand-blue:       #2563eb;   /* primary action */
  --id-brand-blue-hover: #1d4ed8;
  --id-brand-blue-soft:  #eff4ff;   /* primary-tint background */
  --id-brand-lime:       #9acb24;   /* brand accent (charts, active) */
  --id-brand-lime-soft:  #f3faddff;

  /* --- Neutrals ---------------------------------------------- */
  --id-white:            #ffffff;
  --id-gray-25:          #fcfcfd;
  --id-gray-50:          #f8f9fb;
  --id-gray-100:         #f1f3f6;
  --id-gray-200:         #e5e8ee;
  --id-gray-300:         #d3d8e0;
  --id-gray-400:         #9aa2b0;
  --id-gray-500:         #6b7280;
  --id-gray-600:         #4b5563;
  --id-gray-700:         #323a47;
  --id-gray-800:         #1f2634;
  --id-gray-900:         #0f1420;

  /* --- Semantic (light) -------------------------------------- */
  --id-bg:               var(--id-gray-50);
  --id-surface:          var(--id-white);
  --id-surface-alt:      var(--id-gray-50);
  --id-surface-sunken:   var(--id-gray-100);
  --id-border:           var(--id-gray-200);
  --id-border-strong:    var(--id-gray-300);
  --id-divider:          var(--id-gray-100);

  --id-text:             var(--id-gray-800);
  --id-text-muted:       var(--id-gray-500);
  --id-text-subtle:      var(--id-gray-400);
  --id-text-inverse:     var(--id-white);
  --id-text-link:        var(--id-brand-blue);

  --id-focus-ring:       color-mix(in oklab, var(--id-brand-blue) 35%, transparent);

  /* --- Feedback ---------------------------------------------- */
  --id-success:          #10805a;
  --id-success-soft:     #e5f5ef;
  --id-warning:          #b8700a;
  --id-warning-soft:     #fef3dc;
  --id-danger:           #c8321f;
  --id-danger-soft:      #fdeceb;
  --id-info:             #0b7bbd;
  --id-info-soft:        #e6f3fb;

  /* --- Data-viz (refined, WCAG-AA aware) --------------------
     Ordered so consecutive series remain distinguishable on
     both light and dark backgrounds. */
  --id-viz-1:            #2563eb;   /* blue   */
  --id-viz-2:            #10805a;   /* green  */
  --id-viz-3:            #b8700a;   /* amber  */
  --id-viz-4:            #7c3aed;   /* purple */
  --id-viz-5:            #0e9488;   /* teal   */
  --id-viz-6:            #c8321f;   /* red    */
  --id-viz-7:            #6b7280;   /* gray   */
  --id-viz-8:            #9acb24;   /* lime   */

  /* --- Radii ------------------------------------------------- */
  --id-radius-xs:        2px;
  --id-radius-sm:        4px;
  --id-radius:           6px;
  --id-radius-md:        8px;
  --id-radius-lg:        12px;
  --id-radius-xl:        16px;
  --id-radius-full:      999px;

  /* --- Spacing (4pt base) ----------------------------------- */
  --id-space-1:          4px;
  --id-space-2:          8px;
  --id-space-3:          12px;
  --id-space-4:          16px;
  --id-space-5:          20px;
  --id-space-6:          24px;
  --id-space-8:          32px;
  --id-space-10:         40px;
  --id-space-12:         48px;
  --id-space-16:         64px;

  /* --- Shadows ---------------------------------------------- */
  --id-shadow-xs:        0 1px 2px rgba(15, 26, 46, 0.06);
  --id-shadow-sm:        0 1px 2px rgba(15, 26, 46, 0.05), 0 1px 3px rgba(15, 26, 46, 0.06);
  --id-shadow-md:        0 2px 4px rgba(15, 26, 46, 0.05), 0 4px 12px rgba(15, 26, 46, 0.08);
  --id-shadow-lg:        0 8px 16px rgba(15, 26, 46, 0.06), 0 16px 32px rgba(15, 26, 46, 0.10);
  --id-shadow-focus:     0 0 0 3px var(--id-focus-ring);

  /* --- Type ------------------------------------------------- */
  --id-font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --id-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --id-text-xs:    12px;
  --id-text-sm:    13px;
  --id-text-base:  14px;
  --id-text-md:    15px;
  --id-text-lg:    17px;
  --id-text-xl:    20px;
  --id-text-2xl:   24px;
  --id-text-3xl:   30px;
  --id-text-4xl:   36px;
  --id-text-5xl:   48px;

  --id-lh-tight:   1.2;
  --id-lh-snug:    1.35;
  --id-lh-normal:  1.5;
  --id-lh-loose:   1.65;

  --id-fw-regular: 400;
  --id-fw-medium:  500;
  --id-fw-semibold:600;
  --id-fw-bold:    700;

  /* --- Layout ------------------------------------------------ */
  --id-sidebar-w:        248px;
  --id-sidebar-w-collapsed: 64px;
  --id-topbar-h:         64px;
  --id-content-max:      1440px;

  /* --- Motion ------------------------------------------------ */
  --id-ease:             cubic-bezier(0.2, 0.6, 0.2, 1);
  --id-dur-fast:         120ms;
  --id-dur:              180ms;
  --id-dur-slow:         280ms;

  /* --- Density knobs (defaults = comfortable) --------------- */
  --id-row-h:            44px;
  --id-control-h:        36px;
  --id-control-px:       12px;
  --id-card-p:           20px;
}

/* Compact density */
:root[data-density="compact"] {
  --id-row-h:            32px;
  --id-control-h:        30px;
  --id-control-px:       10px;
  --id-card-p:           16px;
  --id-text-base:        13px;
}

/* Spacious density */
:root[data-density="spacious"] {
  --id-row-h:            52px;
  --id-control-h:        42px;
  --id-control-px:       16px;
  --id-card-p:           28px;
}

/* --- Dark theme --------------------------------------------- */
:root[data-theme="dark"] {
  --id-bg:               #0a1120;
  --id-surface:          #111a2e;
  --id-surface-alt:      #0f182a;
  --id-surface-sunken:   #0a1120;
  --id-border:           #1f2d48;
  --id-border-strong:    #2a3b5c;
  --id-divider:          #172340;

  --id-text:             #e5e9f0;
  --id-text-muted:       #93a0b5;
  --id-text-subtle:      #677390;
  --id-text-inverse:     var(--id-gray-900);

  --id-brand-blue-soft:  #162749;
  --id-brand-lime-soft:  #1e2a16;

  --id-success-soft:     #0f2a20;
  --id-warning-soft:     #2a1f0a;
  --id-danger-soft:      #2a120f;
  --id-info-soft:        #0a2236;

  --id-viz-1:            #60a5fa;
  --id-viz-2:            #34d399;
  --id-viz-3:            #fbbf24;
  --id-viz-4:            #a78bfa;
  --id-viz-5:            #22d3ee;
  --id-viz-6:            #f87171;
  --id-viz-7:            #9ca3af;
  --id-viz-8:            #bef264;

  --id-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.35);
  --id-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.35);
  --id-shadow-md:        0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.40);
  --id-shadow-lg:        0 8px 16px rgba(0, 0, 0, 0.35), 0 16px 32px rgba(0, 0, 0, 0.45);
}

/* --- Base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--id-bg);
  color: var(--id-text);
  font-family: var(--id-font-sans);
  font-size: var(--id-text-base);
  line-height: var(--id-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--id-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }