/* =============================================================================
   Adrian Kołodziej — Platforma · System tokenów (v2 — premium)
   Kierunek: elegancki, biznesowy premium. Paleta: CZARNY / ZŁOTO / GRANAT / BIEL.
   Typografia: Playfair Display (nagłówki, display) + Montserrat (UI, treść).
   Kontrasty tekst/akcja zweryfikowane pod WCAG 2.2 AA.
   Zasady koloru:
     - Granat = marka/primary (przyciski, linki, struktura).
     - Złoto = akcent (aktywne stany, wyróżnienia, złote CTA z CIEMNYM tekstem).
       Złoto NIGDY jako drobny tekst na bieli (kontrast 3.48 — za nisko).
     - Focus ring = granat (złoto na bieli nie spełnia 3:1).
   ========================================================================== */

:root {
	/* --- PRYMITYWY: neutralne (czerń → biel, lekko chłodne) --------------- */
	--p-white:      #ffffff;
	--p-neutral-50: #f7f8fa;
	--p-neutral-100:#eef0f4;
	--p-neutral-200:#dde1e9;
	--p-neutral-300:#c3cad6;
	--p-neutral-400:#98a1b3;
	--p-neutral-500:#6b7488;
	--p-neutral-600:#4e566a;
	--p-neutral-700:#363c4d;
	--p-neutral-800:#232734;
	--p-neutral-900:#14171f;
	--p-neutral-950:#0b0d13;

	/* --- PRYMITYWY: granat (marka, kotwica #1a2340) ----------------------- */
	--p-navy-50:  #eef1f8;
	--p-navy-100: #d9e0ef;
	--p-navy-200: #b3c1df;
	--p-navy-300: #8598c7;
	--p-navy-400: #5670a8;
	--p-navy-500: #33508b;
	--p-navy-600: #212f56;
	--p-navy-700: #1a2340;
	--p-navy-800: #141b31;
	--p-navy-900: #0e1322;
	--p-navy-950: #080b16;

	/* --- PRYMITYWY: złoto (akcent, kotwica #c9a227) ----------------------- */
	--p-gold-50:  #faf6e8;
	--p-gold-100: #f4ecc9;
	--p-gold-200: #ecdd9c;
	--p-gold-300: #e0c86a;
	--p-gold-400: #d4af37;
	--p-gold-500: #c9a227;
	--p-gold-600: #a8851d;
	--p-gold-700: #856819;
	--p-gold-800: #6b5318;
	--p-gold-900: #574515;

	/* --- PRYMITYWY: feedback (dostępne na bieli) ------------------------- */
	--p-success-600:#157347;
	--p-success-500:#1a8a55;
	--p-warning-600:#b45309;
	--p-warning-500:#d97706;
	--p-error-600:  #b42318;
	--p-error-500:  #d92d20;
	--p-info-600:   #1a3f8b;
	--p-info-500:   #2456b8;

	/* --- SEMANTYKA: powierzchnie ----------------------------------------- */
	--surface-page:     var(--p-neutral-50);
	--surface-card:     var(--p-white);
	--surface-raised:   var(--p-white);
	--surface-sunken:   var(--p-neutral-100);
	--surface-inverse:  var(--p-navy-950);   /* ciemne panele / sidebar */
	--surface-inverse-2:var(--p-navy-900);

	/* --- SEMANTYKA: tekst ------------------------------------------------ */
	--text-primary:    var(--p-neutral-900);
	--text-secondary:  var(--p-neutral-600);
	--text-tertiary:   var(--p-neutral-500);
	--text-on-brand:   var(--p-white);
	--text-on-accent:  var(--p-navy-900);    /* ciemny tekst na złocie */
	--text-inverse:    var(--p-neutral-50);
	--text-inverse-2:  var(--p-neutral-300);
	--text-link:       var(--p-navy-700);
	--text-link-hover: var(--p-navy-800);
	--text-accent-on-dark: var(--p-gold-400);/* złoty tekst tylko na ciemnym */

	/* --- SEMANTYKA: obramowania ----------------------------------------- */
	--border-subtle:  var(--p-neutral-200);
	--border-default: var(--p-neutral-300);
	--border-strong:  var(--p-neutral-500);  /* spełnia 3:1 dla UI */
	--border-accent:  var(--p-gold-500);
	--border-on-dark: rgba(255, 255, 255, 0.10);

	/* --- SEMANTYKA: akcje (primary = granat) ---------------------------- */
	--action-primary-bg:        var(--p-navy-700);
	--action-primary-bg-hover:  var(--p-navy-800);
	--action-primary-bg-active: var(--p-navy-900);
	--action-primary-text:      var(--p-white);

	/* akcent premium (złote CTA — ciemny tekst) */
	--action-accent-bg:        var(--p-gold-500);
	--action-accent-bg-hover:  var(--p-gold-600);
	--action-accent-text:      var(--p-navy-900);

	--action-secondary-bg:        transparent;
	--action-secondary-bg-hover:  var(--p-navy-50);
	--action-secondary-text:      var(--p-navy-700);
	--action-secondary-border:    var(--p-navy-700);

	--action-destructive-bg:       var(--p-error-600);
	--action-destructive-bg-hover: #922016;
	--action-destructive-text:     var(--p-white);

	/* --- SEMANTYKA: feedback -------------------------------------------- */
	--feedback-success: var(--p-success-600);
	--feedback-warning: var(--p-warning-600);
	--feedback-error:   var(--p-error-600);
	--feedback-info:    var(--p-info-600);

	/* --- SEMANTYKA: akcent (złoto) -------------------------------------- */
	--accent:         var(--p-gold-500);
	--accent-strong:  var(--p-gold-600);
	--accent-soft:    var(--p-gold-100);

	/* --- SEMANTYKA: focus ----------------------------------------------- */
	--focus-ring:        var(--p-navy-500);
	--focus-ring-offset: var(--surface-page);

	/* --- TYPOGRAFIA ----------------------------------------------------- */
	--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-serif:   'Playfair Display', Georgia, serif;
	--font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-lg:   1.125rem;
	--fs-xl:   1.25rem;
	--fs-2xl:  1.5rem;
	--fs-3xl:  1.875rem;
	--fs-4xl:  2.375rem;
	--fs-5xl:  3.25rem;

	--lh-tight:   1.15;
	--lh-heading: 1.22;
	--lh-body:    1.65;

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

	--tracking-tight: -0.01em;
	--tracking-wide:  0.08em;   /* dla etykiet/kapitalików */

	--measure: 68ch;

	/* --- SPACING (baza 4px) --------------------------------------------- */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* --- PROMIENIE (elegancko, umiarkowanie) --------------------------- */
	--radius-sm:   0.25rem;
	--radius-md:   0.5rem;
	--radius-lg:   0.875rem;
	--radius-xl:   1.25rem;
	--radius-full: 9999px;

	/* --- CIENIE (subtelne, granatowy tint) ----------------------------- */
	--shadow-sm: 0 1px 2px rgba(11, 13, 19, 0.06);
	--shadow-md: 0 6px 18px rgba(11, 13, 19, 0.08);
	--shadow-lg: 0 18px 44px rgba(11, 13, 19, 0.12);
	--shadow-accent: 0 8px 24px rgba(201, 162, 39, 0.30);

	/* --- MOTION --------------------------------------------------------- */
	--dur-fast:   120ms;
	--dur-base:   220ms;
	--dur-slow:   340ms;
	--ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

	/* --- WARSTWY -------------------------------------------------------- */
	--z-header:  100;
	--z-overlay: 900;
	--z-modal:   1000;
	--z-toast:   1100;
}

[data-theme="light"] { color-scheme: light; }

/* =============================================================================
   TRYB CIEMNY — swap na poziomie semantyki
   ========================================================================== */
[data-theme="dark"] {
	color-scheme: dark;

	--surface-page:    var(--p-navy-950);
	--surface-card:    var(--p-navy-900);
	--surface-raised:  var(--p-navy-800);
	--surface-sunken:  #06080d;
	--surface-inverse: var(--p-neutral-50);

	--text-primary:    var(--p-neutral-50);
	--text-secondary:  var(--p-neutral-300);
	--text-tertiary:   var(--p-neutral-400);
	--text-inverse:    var(--p-neutral-900);
	--text-link:       var(--p-gold-400);
	--text-link-hover: var(--p-gold-300);

	--border-subtle:  rgba(255, 255, 255, 0.08);
	--border-default: rgba(255, 255, 255, 0.14);
	--border-strong:  var(--p-neutral-500);

	--action-primary-bg:        var(--p-gold-500);
	--action-primary-bg-hover:  var(--p-gold-400);
	--action-primary-bg-active: var(--p-gold-300);
	--action-primary-text:      var(--p-navy-900);

	--action-secondary-bg-hover: rgba(255, 255, 255, 0.06);
	--action-secondary-text:     var(--p-gold-400);
	--action-secondary-border:   var(--p-gold-500);

	--focus-ring:        var(--p-gold-400);
	--focus-ring-offset: var(--surface-page);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
	--shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
	--shadow-accent: 0 8px 24px rgba(201, 162, 39, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	:root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}