/* ==========================================================
   Procuro Design Tokens — single source of truth (app scope)
   Loaded BEFORE all other Procuro app stylesheets.

   Naming convention:
     --teal-*, --navy-*, --bg-*, --border, --muted …  raw palette
     --procuro-*                                      semantic layer
                                                      (one alias level only)

   NOTE: spacing scale (--space-*) intentionally not yet defined.
   Tracked separately — see project memory file
     project_css_audit_todos.md
   ========================================================== */

:root {
  /* ── Palette: Navy ── */
  --navy-900: #0b1c2d;
  --navy-800: #102a43;
  --navy-700: #1b3a57;

  /* ── Palette: Teal ── */
  --teal-300: #5eead4;
  --teal-500: #0ea5a4;
  --teal-600: #0891b2;
  --teal-700: #0e7490;

  /* ── Neutrals ── */
  --bg-white:      #ffffff;
  --bg-light:      #f6f8fa;
  --bg-soft:       #f8fafc;
  --bg-subtle:     #f1f5f9;
  --border:        #e5e7eb;
  --border-strong: #d1d5db;
  --muted:         #6b7280;
  --muted-light:   #9ca3af;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;
  --ink:           #0f172a;

  /* ── Semantic states ── */
  --success: #2e7d32;
  --warning: #e65100;
  --error:   #c62828;
  --info:    #0891b2;

  /* ── Gradients ── */
  --gradient-brand:      linear-gradient(135deg, var(--teal-500), var(--teal-600));
  --gradient-brand-soft: linear-gradient(135deg, rgba(14,165,164,0.08), rgba(34,211,238,0.03));
  --gradient-header:     linear-gradient(180deg, #0b1c2d 0%, #0f2438 100%);

  /* ── Border radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-xs:         0 2px 6px  rgba(0,0,0,0.04);
  --shadow-sm:         0 6px 16px rgba(0,0,0,0.05);
  --shadow-md:         0 12px 28px rgba(11,28,45,0.06);
  --shadow-focus-ring: 0 0 0 4px rgba(14,165,164,0.15);

  /* ── Spacing scale (t-shirt) ── */
  --space-3xs:      2px;
  --space-2xs:      4px;
  --space-2xs-plus: 6px;
  --space-xs:       8px;
  --space-xs-plus:  10px;
  --space-sm:       12px;
  --space-sm-plus:  14px;
  --space-md:       16px;
  --space-md-plus:  18px;
  --space-lg:       20px;
  --space-lg-plus:  22px;
  --space-xl:       24px;
  --space-xl-plus:  28px;
  --space-2xl:      32px;
  --space-3xl:      40px;
  --space-4xl:      48px;
  --space-5xl:      64px;
  --space-6xl:      80px;

  /* ── Font weight ── */
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* ── Transition durations ── */
  --transition-fast:   0.15s;
  --transition-base:   0.2s;
  --transition-medium: 0.25s;
  --transition-slow:   0.3s;

  /* ── Z-index scale ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    1000;
  --z-toast:    9999;

  /* ── Semantic aliases (Procuro brand layer) ── */
  --procuro-primary:       var(--teal-500);
  --procuro-primary-hover: var(--teal-600);
  --procuro-gradient:      var(--gradient-brand);
  --procuro-bg:            var(--bg-light);
  --procuro-bg-light:      var(--bg-light);
  --procuro-surface:       var(--bg-white);
  --procuro-border:        var(--border);
  --procuro-muted:         var(--muted);
  --procuro-ink:           var(--ink);
  --procuro-navy:          var(--navy-900);
  --procuro-navy-800:      var(--navy-800);
}

/* ==========================================================
   Dark theme overrides — scope: admin + procuro-pro pages dziś,
   [data-theme="dark"] gotowe pod przyszły przełącznik użytkownika.

   Nadpisujemy TYLKO tokeny neutralne (bg/border/text).
   Paleta kolorów (--teal-*, --navy-*, stany semantyczne)
   pozostaje bez zmian — dark UI używa ich bez modyfikacji.
   ========================================================== */

body.procuro-pro,
[data-theme="dark"] {
  /* ── Tła ── */
  --bg-white:      #0f1e2e;                /* modal / card bg     (light: #ffffff)  */
  --bg-light:      #0b1620;                /* select option bg    (light: #f6f8fa)  */
  --bg-soft:       rgba(255,255,255,0.03); /* subtle card surface (light: #f8fafc)  */
  --bg-subtle:     rgba(255,255,255,0.05); /* input / btn bg      (light: #f1f5f9)  */

  /* ── Obramowania ── */
  --border:        rgba(255,255,255,0.08); /* standardowe        (light: #e5e7eb)   */
  --border-strong: rgba(255,255,255,0.10); /* input / modal      (light: #d1d5db)   */

  /* ── Tekst ── */
  --ink:            #e6edf3;              /* główny tekst        (light: #0f172a)   */
  --text-secondary: #cfd8e3;              /* drugorzędny         (light: #64748b)   */
  --muted:          #7f93a8;              /* etykiety / muted    (light: #6b7280)   */
  --text-muted:     #7f93a8;              /* idem                (light: #94a3b8)   */
}