/*
  DiviMetrics — Design Tokens (CSS Custom Properties)
  =========================================================
  Nippo / MTA theme — ciemne panele, ciepły pomarańcz, zaokrąglenia
*/

:root {
  /* ──────────────────────────────────────────────
     COLOR PALETTE — Nippo / MTA (dark)
     Brand = warm orange; green/red = market only
     ────────────────────────────────────────────── */

  --bg: #0c0c0c;
  --bg-scene: radial-gradient(ellipse 80% 60% at 70% 15%, rgba(201, 120, 69, 0.07) 0%, transparent 55%),
              radial-gradient(ellipse 50% 40% at 8% 85%, rgba(80, 60, 40, 0.1) 0%, transparent 50%),
              #0c0c0c;
  --glass: rgba(24, 24, 24, 0.88);
  --glass-strong: rgba(28, 28, 28, 0.94);

  --bg-panel: #1a1a1a;
  --bg-card: #1e1e1e;
  --bg-inset: #141414;
  --bg-elevated: #242424;
  --bg-hover: #2c2c2c;
  --bg-input: rgba(0, 0, 0, 0.35);
  --bg-sidebar: #161616;
  --bg-rail: #0e0e0e;

  /* Borders — subtelne, bez outline terminalowego */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --border-focus: var(--accent);

  /* Text */
  --text: #f2f2f2;
  --text-dim: #9a9a9a;
  --text-bright: #ffffff;
  --text-inverse: #ffffff;

  /* Brand — pomarańcz MTA */
  --accent-deep: #a85a30;
  --accent: #c97845;
  --accent-dim: rgba(201, 120, 69, 0.14);
  --accent-hover: #d88855;
  --accent-light: #e8a045;
  --accent-grad: linear-gradient(135deg, #e8a045 0%, #c97845 50%, #a85a30 100%);
  --accent-glow: rgba(201, 120, 69, 0.35);

  --shade-line: var(--border-strong);
  --shade-line-soft: rgba(255, 255, 255, 0.05);
  --shade-kicker: var(--text-dim);
  --shade-surface: color-mix(in srgb, var(--text-bright) 4%, var(--bg-panel));
  --shade-surface-hover: color-mix(in srgb, var(--text-bright) 8%, var(--bg-panel));

  /* Semantic */
  --green: #5cb85c;
  --green-bg: rgba(92, 184, 92, 0.12);
  --green-border: rgba(92, 184, 92, 0.35);

  --red: #e05c5c;
  --red-bg: rgba(224, 92, 92, 0.12);
  --red-border: rgba(224, 92, 92, 0.35);

  --amber: #e8a045;
  --amber-bg: rgba(232, 160, 69, 0.12);
  --amber-border: rgba(232, 160, 69, 0.35);

  --cyan: #7eb8c8;
  --cyan-bg: rgba(126, 184, 200, 0.1);

  --tab-active: var(--text-bright);
  --tab-active-bg: var(--bg-elevated);

  --party-d: #6a9fd9;
  --party-d-bg: rgba(106, 159, 217, 0.12);
  --party-r: #e08080;
  --party-r-bg: rgba(224, 128, 128, 0.12);
  --party-i: var(--text-dim);
  --party-i-bg: var(--bg-inset);

  /* ──────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────── */
  --sans: 'Nippo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', monospace;

  --fs-xs: 0.7rem;
  --fs-sm: 0.85rem;
  --fs-base: 0.92rem;
  --fs-md: 0.98rem;
  --fs-lg: 1rem;
  --fs-xl: 1.15rem;
  --fs-2xl: 1.35rem;
  --fs-3xl: 1.7rem;

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;

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

  /* ──────────────────────────────────────────────
     SPACING
     ────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 56px;
  --space-20: 72px;
  --space-24: 88px;

  /* ──────────────────────────────────────────────
     BORDER RADIUS — MTA rounded
     ────────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ──────────────────────────────────────────────
     SHADOWS
     ────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 2px var(--accent-glow);

  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;

  --z-dropdown: 100;
  --z-sticky: 50;
  --z-modal: 200;
  --z-toast: 300;
  --z-tooltip: 400;

  --container-max: 1400px;
  --container-narrow: 720px;
  --container-wide: 1400px;
  --header-height: 48px;
  --nav-height: 0px;
  --footer-height: 32px;

  --sidebar-width: 170px;
  --right-panel-width: 240px;
  --app-gap: 0px;

  --btn-height-sm: 28px;
  --btn-height-md: 36px;
  --btn-height-lg: 44px;
  --btn-padding-x-sm: 10px;
  --btn-padding-x-md: 16px;
  --btn-padding-x-lg: 24px;

  --input-height: 36px;
  --input-padding-x: 12px;

  --table-cell-padding-y: 6px;
  --table-cell-padding-x: 10px;
  --table-header-bg: var(--bg-inset);

  --panel-padding: 14px 18px;
  --panel-gap: 12px;

  --toast-min-width: 280px;
  --toast-max-width: 420px;
  --toast-padding: 14px 18px;

  --skeleton-bg: var(--bg-hover);
  --skeleton-highlight: var(--border-strong);
  --skeleton-animation: 1.5s ease-in-out infinite;
}

@media (prefers-contrast: high) {
  :root {
    --border: rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.22);
    --text: #ffffff;
    --text-dim: #c0c0c0;
    --accent: #e8a045;
    --accent-light: #f0b860;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-base: 0s;
    --transition-slow: 0s;
    --skeleton-animation: none;
  }
}

@media print {
  :root {
    --bg: #ffffff;
    --bg-panel: #ffffff;
    --bg-inset: #f5f5f5;
    --text: #1a1a1a;
    --text-dim: #4a4a4a;
    --text-bright: #000000;
    --border: #cccccc;
    --border-strong: #999999;
    --accent: #a85a30;
    --accent-light: #c97845;
  }
  .top-bar, .nav-tabs, .action-bar, .disclaimer-bar, .app-sidebar, .app-right-panel, .status-bar { display: none !important; }
  .app-shell { grid-template-columns: 1fr !important; }
  .report-panel { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}