/* =========================================================
   Mensum — Design Tokens
   Prefix: --mdc-*
   Light = default · Dark = [data-theme="dark"]
   ========================================================= */

:root {
  /* ---------- Brand: Cobalt Blue ---------- */
  --mdc-brand-50:  #eff6ff;
  --mdc-brand-100: #dbeafe;
  --mdc-brand-200: #bfdbfe;
  --mdc-brand-300: #93c5fd;
  --mdc-brand-400: #60a5fa;
  --mdc-brand-500: #3b82f6;
  --mdc-brand-600: #2563eb;
  --mdc-brand-700: #1d4ed8;  /* primary CTA */
  --mdc-brand-800: #1e40af;
  --mdc-brand-900: #1e3a8a;
  --mdc-brand-950: #172554;

  /* ---------- Neutrals: Zinc ---------- */
  --mdc-zinc-50:  #fafafa;
  --mdc-zinc-100: #f4f4f5;
  --mdc-zinc-200: #e4e4e7;
  --mdc-zinc-300: #d4d4d8;
  --mdc-zinc-400: #a1a1aa;
  --mdc-zinc-500: #71717a;
  --mdc-zinc-600: #52525b;
  --mdc-zinc-700: #3f3f46;
  --mdc-zinc-800: #27272a;
  --mdc-zinc-900: #18181b;
  --mdc-zinc-950: #09090b;

  /* ---------- Semantic palettes ---------- */
  --mdc-success-50:  #f0fdf4;
  --mdc-success-100: #dcfce7;
  --mdc-success-500: #22c55e;
  --mdc-success-600: #16a34a;
  --mdc-success-700: #15803d;

  --mdc-warning-50:  #fffbeb;
  --mdc-warning-100: #fef3c7;
  --mdc-warning-500: #f59e0b;
  --mdc-warning-600: #d97706;
  --mdc-warning-700: #b45309;

  --mdc-danger-50:   #fef2f2;
  --mdc-danger-100:  #fee2e2;
  --mdc-danger-500:  #ef4444;
  --mdc-danger-600:  #dc2626;
  --mdc-danger-700:  #b91c1c;

  --mdc-info-50:     #eff6ff;
  --mdc-info-100:    #dbeafe;
  --mdc-info-500:    #3b82f6;
  --mdc-info-600:    #2563eb;
  --mdc-info-700:    #1d4ed8;

  /* ---------- Chart colors (max 6, distinguishable) ---------- */
  --mdc-chart-1: #1d4ed8;  /* brand blue */
  --mdc-chart-2: #d97706;  /* amber */
  --mdc-chart-3: #16a34a;  /* green (semantic OK) */
  --mdc-chart-4: #9333ea;  /* purple */
  --mdc-chart-5: #db2777;  /* pink */
  --mdc-chart-6: #0d9488;  /* teal */

  /* ---------- Semantic surface tokens (LIGHT) ---------- */
  --mdc-bg:                #ffffff;        /* page background */
  --mdc-bg-subtle:         #fafafa;        /* tinted areas (sidebar, sections) */
  --mdc-bg-muted:          #f4f4f5;        /* deeper tint, hover surfaces */
  --mdc-surface:           #ffffff;        /* cards, modals */
  --mdc-surface-raised:    #ffffff;        /* dropdowns, popovers (with shadow) */
  --mdc-surface-overlay:   rgba(9, 9, 11, 0.55);  /* modal backdrop */

  --mdc-border:            #e4e4e7;        /* default borders, dividers */
  --mdc-border-strong:     #d4d4d8;        /* emphasised borders, focused inputs */
  --mdc-border-subtle:     #f4f4f5;        /* very faint dividers */

  --mdc-text:              #18181b;        /* primary text */
  --mdc-text-muted:        #52525b;        /* secondary text */
  --mdc-text-subtle:       #71717a;        /* tertiary, captions, helper */
  --mdc-text-disabled:     #a1a1aa;
  --mdc-text-inverse:      #ffffff;
  --mdc-text-link:         var(--mdc-brand-700);
  --mdc-text-link-hover:   var(--mdc-brand-800);

  /* Brand surfaces */
  --mdc-brand:             var(--mdc-brand-700);
  --mdc-brand-hover:       var(--mdc-brand-800);
  --mdc-brand-active:      var(--mdc-brand-900);
  --mdc-brand-soft:        var(--mdc-brand-50);
  --mdc-brand-soft-border: var(--mdc-brand-200);
  --mdc-brand-contrast:    #ffffff;

  /* Semantic surfaces (foreground/background pairs) */
  --mdc-success:           var(--mdc-success-600);
  --mdc-success-soft:      var(--mdc-success-50);
  --mdc-success-soft-text: var(--mdc-success-700);
  --mdc-success-soft-border: #bbf7d0;

  --mdc-warning:           var(--mdc-warning-600);
  --mdc-warning-soft:      var(--mdc-warning-50);
  --mdc-warning-soft-text: var(--mdc-warning-700);
  --mdc-warning-soft-border: #fde68a;

  --mdc-danger:            var(--mdc-danger-600);
  --mdc-danger-soft:       var(--mdc-danger-50);
  --mdc-danger-soft-text:  var(--mdc-danger-700);
  --mdc-danger-soft-border: #fecaca;

  --mdc-info:              var(--mdc-info-600);
  --mdc-info-soft:         var(--mdc-info-50);
  --mdc-info-soft-text:    var(--mdc-info-700);
  --mdc-info-soft-border:  #bfdbfe;

  /* Focus ring */
  --mdc-focus-ring:        0 0 0 3px rgba(29, 78, 216, 0.25);
  --mdc-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.25);

  /* ---------- Typography ---------- */
  --mdc-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mdc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
                    "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale (px) */
  --mdc-text-xs:    12px;   /* 12 / 16 */
  --mdc-text-sm:    13px;   /* 13 / 18 */
  --mdc-text-base:  14px;   /* 14 / 20 — body default */
  --mdc-text-md:    16px;   /* 16 / 24 — reading */
  --mdc-text-lg:    18px;   /* 18 / 26 */
  --mdc-text-xl:    20px;   /* 20 / 28 */
  --mdc-text-2xl:   24px;   /* 24 / 32 */
  --mdc-text-3xl:   30px;   /* 30 / 36 */
  --mdc-text-4xl:   36px;   /* 36 / 40 */
  --mdc-text-5xl:   48px;   /* 48 / 52 */

  --mdc-leading-xs:    16px;
  --mdc-leading-sm:    18px;
  --mdc-leading-base:  20px;
  --mdc-leading-md:    24px;
  --mdc-leading-lg:    26px;
  --mdc-leading-xl:    28px;
  --mdc-leading-2xl:   32px;
  --mdc-leading-3xl:   36px;
  --mdc-leading-4xl:   40px;
  --mdc-leading-5xl:   52px;

  --mdc-font-regular:  400;
  --mdc-font-medium:   500;
  --mdc-font-semibold: 600;
  --mdc-font-bold:     700;

  --mdc-tracking-tight: -0.02em;
  --mdc-tracking-snug:  -0.01em;
  --mdc-tracking-normal: 0;
  --mdc-tracking-wide:  0.04em;

  /* ---------- Spacing scale (4px base) ---------- */
  --mdc-space-0:  0;
  --mdc-space-1:  4px;
  --mdc-space-2:  8px;
  --mdc-space-3:  12px;
  --mdc-space-4:  16px;
  --mdc-space-5:  20px;
  --mdc-space-6:  24px;
  --mdc-space-8:  32px;
  --mdc-space-10: 40px;
  --mdc-space-12: 48px;
  --mdc-space-16: 64px;
  --mdc-space-20: 80px;
  --mdc-space-24: 96px;

  /* ---------- Radii ---------- */
  --mdc-radius-xs:   4px;
  --mdc-radius-sm:   6px;
  --mdc-radius-md:   8px;   /* default for buttons, inputs, cards */
  --mdc-radius-lg:   12px;
  --mdc-radius-xl:   16px;
  --mdc-radius-full: 999px;

  /* ---------- Shadows (sobri, non drammatici) ---------- */
  --mdc-shadow-sm:
    0 1px 2px 0 rgba(9, 9, 11, 0.04),
    0 1px 1px 0 rgba(9, 9, 11, 0.03);
  --mdc-shadow-md:
    0 2px 4px -1px rgba(9, 9, 11, 0.06),
    0 1px 2px -1px rgba(9, 9, 11, 0.04);
  --mdc-shadow-lg:
    0 8px 16px -4px rgba(9, 9, 11, 0.08),
    0 4px 6px -2px rgba(9, 9, 11, 0.04);
  --mdc-shadow-xl:
    0 16px 32px -8px rgba(9, 9, 11, 0.12),
    0 8px 16px -4px rgba(9, 9, 11, 0.06);

  /* ---------- Layout ---------- */
  --mdc-radius-card: var(--mdc-radius-lg);
  --mdc-control-h-sm: 28px;
  --mdc-control-h-md: 36px;
  --mdc-control-h-lg: 44px;   /* touch target minimum */
  --mdc-row-h: 44px;          /* density: balanced */

  /* ---------- Motion ---------- */
  --mdc-ease: cubic-bezier(0.2, 0.0, 0.0, 1);
  --mdc-duration-fast:   120ms;
  --mdc-duration-base:   180ms;
  --mdc-duration-slow:   240ms;

  color-scheme: light;
}

/* =========================================================
   DARK MODE
   ========================================================= */
[data-theme="dark"] {
  --mdc-bg:                #09090b;
  --mdc-bg-subtle:         #0c0c0e;
  --mdc-bg-muted:          #18181b;
  --mdc-surface:           #131316;
  --mdc-surface-raised:    #1c1c20;
  --mdc-surface-overlay:   rgba(0, 0, 0, 0.65);

  --mdc-border:            #27272a;
  --mdc-border-strong:     #3f3f46;
  --mdc-border-subtle:     #1c1c20;

  --mdc-text:              #fafafa;
  --mdc-text-muted:        #a1a1aa;
  --mdc-text-subtle:       #71717a;
  --mdc-text-disabled:     #52525b;
  --mdc-text-inverse:      #09090b;
  --mdc-text-link:         var(--mdc-brand-400);
  --mdc-text-link-hover:   var(--mdc-brand-300);

  --mdc-brand:             var(--mdc-brand-500);
  --mdc-brand-hover:       var(--mdc-brand-400);
  --mdc-brand-active:      var(--mdc-brand-300);
  --mdc-brand-soft:        rgba(59, 130, 246, 0.10);
  --mdc-brand-soft-border: rgba(59, 130, 246, 0.25);
  --mdc-brand-contrast:    #172554;

  --mdc-success:           var(--mdc-success-500);
  --mdc-success-soft:      rgba(34, 197, 94, 0.10);
  --mdc-success-soft-text: #86efac;
  --mdc-success-soft-border: rgba(34, 197, 94, 0.25);

  --mdc-warning:           var(--mdc-warning-500);
  --mdc-warning-soft:      rgba(245, 158, 11, 0.10);
  --mdc-warning-soft-text: #fcd34d;
  --mdc-warning-soft-border: rgba(245, 158, 11, 0.25);

  --mdc-danger:            var(--mdc-danger-500);
  --mdc-danger-soft:       rgba(239, 68, 68, 0.10);
  --mdc-danger-soft-text:  #fca5a5;
  --mdc-danger-soft-border: rgba(239, 68, 68, 0.25);

  --mdc-info:              var(--mdc-info-500);
  --mdc-info-soft:         rgba(59, 130, 246, 0.10);
  --mdc-info-soft-text:    #93c5fd;
  --mdc-info-soft-border:  rgba(59, 130, 246, 0.25);

  --mdc-focus-ring:        0 0 0 3px rgba(59, 130, 246, 0.35);
  --mdc-focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.35);

  --mdc-shadow-sm:
    0 1px 2px 0 rgba(0, 0, 0, 0.4),
    0 1px 1px 0 rgba(0, 0, 0, 0.3);
  --mdc-shadow-md:
    0 2px 4px -1px rgba(0, 0, 0, 0.5),
    0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --mdc-shadow-lg:
    0 8px 16px -4px rgba(0, 0, 0, 0.6),
    0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --mdc-shadow-xl:
    0 16px 32px -8px rgba(0, 0, 0, 0.7),
    0 8px 16px -4px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* =========================================================
   BASE RESET (minimal, mdc-prefixed scope)
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--mdc-font-sans);
  font-size: var(--mdc-text-base);
  line-height: var(--mdc-leading-base);
  color: var(--mdc-text);
  background: var(--mdc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

body {
  margin: 0;
  font-family: var(--mdc-font-sans);
  color: var(--mdc-text);
  background: var(--mdc-bg);
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

a {
  color: var(--mdc-text-link);
  text-decoration: none;
  transition: color var(--mdc-duration-fast) var(--mdc-ease);
}
a:hover { color: var(--mdc-text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--mdc-brand-soft); color: var(--mdc-brand-700); }
[data-theme="dark"] ::selection { color: var(--mdc-brand-300); }

/* Tabular numeric utility — always for numbers */
.mdc-num {
  font-family: var(--mdc-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0;
}