/* ============================================================
   Simpletools — Design Tokens  (3-wariantowy system)
   Tricomo (domyślny) | Meridian | Pure
   ============================================================ */

/* ===== WSPÓLNA SKALA — :root zawiera też domyślne Tricomo ===== */
:root {
  /* --- Skala typografii --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3.25rem;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.1em;

  /* --- Spacing --- */
  --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;

  /* --- Layout --- */
  --container-max:     1200px;
  --container-padding: var(--space-6);
  --layout-content:    720px;
  --layout-sidebar:    300px;
  --layout-gap:        var(--space-10);
  --radius-full:       9999px;

  /* --- Transitions --- */
  --transition-fast: 140ms cubic-bezier(.4,0,.2,1);
  --transition:      180ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 260ms cubic-bezier(.4,0,.2,1);

  /* --- Kolory semantyczne (wspólne) --- */
  --color-success:    #16A34A;  --color-success-bg: #DCFCE7;
  --color-error:      #DC2626;  --color-error-bg:   #FEE2E2;
  --color-warning:    #D97706;  --color-warning-bg: #FEF3C7;
  --color-info:       #2563EB;  --color-info-bg:    #DBEAFE;

  /* ===== TRICOMO (indygo → fuksja) — domyślne wartości ===== */
  --color-bg:            #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F6F6FB;
  --color-surface-3:     #EEEEFF;
  --color-border:        #E9EAF1;
  --color-border-strong: #D1D5E0;
  --color-text:           #0E1117;
  --color-text-secondary: #5B6472;
  --color-text-tertiary:  #8B92A2;

  --color-primary:        #5B53F0;
  --color-primary-hover:  #4A42E0;
  --color-primary-light:  #EEEEFF;
  --color-primary-mid:    #9D9AF5;

  --color-action:         #7C3AED;
  --color-action-hover:   #6D28D9;
  --color-action-light:   #EDE9FE;
  --color-action-bright:  #8B5CF6;

  --color-gradient: linear-gradient(135deg,#6366F1 0%,#8B5CF6 48%,#D946EF 100%);
  --color-star:     #F5A623;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-serif:   'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-eyebrow: 'Space Grotesk', system-ui, sans-serif;
  --eyebrow-prefix:    '';
  --eyebrow-transform: uppercase;
  --eyebrow-tracking:  .06em;

  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 16px;

  --shadow-sm:         0 1px 2px rgba(16,17,33,.05);
  --shadow-md:         0 4px 12px rgba(16,17,33,.08), 0 1px 2px rgba(16,17,33,.04);
  --shadow-lg:         0 8px 24px rgba(16,17,33,.10), 0 2px 6px rgba(16,17,33,.06);
  --shadow-focus:      0 0 0 3px rgba(91,83,240,.28);
  --shadow-card:       0 1px 2px rgba(16,17,33,.05);
  --shadow-card-hover: 0 22px 48px -22px rgba(99,102,241,.5);
  --shadow-btn:        0 10px 26px -12px rgba(99,102,241,.75);
  --shadow-mark:       0 8px 20px -8px rgba(99,102,241,.8);

  --nav-bg:     rgba(255,255,255,.82);
  --nav-ink:    #0E1117;
  --nav-muted:  #5B6472;
  --nav-border: #ECEDF3;

  --cta-bg:    linear-gradient(135deg,#6366F1 0%,#8B5CF6 50%,#D946EF 100%);
  --cta-ink:   #fff;
  --cta-muted: rgba(255,255,255,.82);
  --nl-bg:     rgba(255,255,255,.16);
  --nl-border: rgba(255,255,255,.32);

  --footer-bg:     #0E1117;
  --footer-muted:  rgba(255,255,255,.62);
  --footer-head:   #9D9AF5;
  --footer-border: rgba(255,255,255,.12);

  --band-bg: #FAFAFF;
}

/* ===== MERIDIAN (granat + niebieski) ===== */
body.theme-meridian {
  --color-bg:            #F5F7FB;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #EEF2F8;
  --color-surface-3:     #E7EFFE;
  --color-border:        #E2E8F2;
  --color-border-strong: #C5D3E8;
  --color-text:           #0B1E3B;
  --color-text-secondary: #54627A;
  --color-text-tertiary:  #7F8FA3;

  --color-primary:        #1D4ED8;
  --color-primary-hover:  #1A45BE;
  --color-primary-light:  #E7EFFE;
  --color-primary-mid:    #7FB0FF;

  --color-action:         #0EA5E9;
  --color-action-hover:   #0892D0;
  --color-action-light:   #E0F5FE;
  --color-action-bright:  #38BDF8;

  --color-gradient: linear-gradient(135deg,#1D4ED8 0%,#3B82F6 60%,#0EA5E9 100%);
  --color-star:     #F59E0B;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-serif:   'Sora', system-ui, sans-serif;
  --font-sans:    'Public Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-eyebrow: 'Public Sans', system-ui, sans-serif;
  --eyebrow-prefix:    '';
  --eyebrow-transform: uppercase;
  --eyebrow-tracking:  .1em;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm:         0 1px 2px rgba(11,30,59,.06);
  --shadow-md:         0 4px 12px rgba(11,30,59,.09), 0 1px 2px rgba(11,30,59,.05);
  --shadow-lg:         0 8px 24px rgba(11,30,59,.12), 0 2px 6px rgba(11,30,59,.07);
  --shadow-focus:      0 0 0 3px rgba(29,78,216,.28);
  --shadow-card:       0 1px 2px rgba(11,30,59,.06);
  --shadow-card-hover: 0 20px 44px -22px rgba(29,78,216,.4);
  --shadow-btn:        0 10px 26px -12px rgba(29,78,216,.55);
  --shadow-mark:       0 8px 18px -8px rgba(29,78,216,.6);

  --nav-bg:     rgba(11,30,59,.96);
  --nav-ink:    #fff;
  --nav-muted:  rgba(255,255,255,.7);
  --nav-border: rgba(255,255,255,.12);

  --cta-bg:    linear-gradient(135deg,#0B1E3B 0%,#13346B 55%,#1D4ED8 130%);
  --cta-ink:   #fff;
  --cta-muted: rgba(255,255,255,.74);
  --nl-bg:     rgba(255,255,255,.1);
  --nl-border: rgba(255,255,255,.24);

  --footer-bg:     #0B1E3B;
  --footer-muted:  rgba(255,255,255,.66);
  --footer-head:   #7FB0FF;
  --footer-border: rgba(255,255,255,.12);

  --band-bg: #FFFFFF;
}

/* Meridian: ciemny nagłówek (granatowy) */
body.theme-meridian .site-header {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--nav-border) !important;
}
body.theme-meridian .brand,
body.theme-meridian .brand:hover { color: var(--nav-ink) !important; text-decoration: none; }
body.theme-meridian .brand__simple,
body.theme-meridian .brand__tools { color: var(--nav-ink) !important; }
body.theme-meridian .brand__tools { opacity: .6; }
body.theme-meridian .site-nav__link { color: var(--nav-muted) !important; text-decoration: none; }
body.theme-meridian .site-nav__link:hover,
body.theme-meridian .site-nav__link[aria-current="page"] { color: var(--nav-ink) !important; }
body.theme-meridian .header-icon-btn,
body.theme-meridian .dark-mode-toggle {
  border-color: var(--nav-border) !important;
  color: var(--nav-muted) !important;
  background: transparent !important;
}
body.theme-meridian .hamburger { color: var(--nav-ink) !important; }

/* ===== PURE (zieleń emerald, minimalizm) ===== */
body.theme-pure {
  --color-bg:            #FBFBFA;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F4F3F0;
  --color-surface-3:     #E7F5EE;
  --color-border:        #E8E6E1;
  --color-border-strong: #CDC9C2;
  --color-text:           #1A1A18;
  --color-text-secondary: #76746E;
  --color-text-tertiary:  #A09D97;

  --color-primary:        #0E8F5E;
  --color-primary-hover:  #0B7A50;
  --color-primary-light:  #E7F5EE;
  --color-primary-mid:    #5FD3A0;

  --color-action:         #0E8F5E;
  --color-action-hover:   #0B7A50;
  --color-action-light:   #E7F5EE;
  --color-action-bright:  #10B981;

  --color-gradient: linear-gradient(135deg,#0E8F5E 0%,#10B981 100%);
  --color-star:     #0E8F5E;

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-serif:   'Manrope', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-eyebrow: 'JetBrains Mono', monospace;
  --eyebrow-prefix:    '// ';
  --eyebrow-transform: none;
  --eyebrow-tracking:  .14em;

  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm:         0 1px 2px rgba(26,26,24,.04);
  --shadow-md:         0 4px 12px rgba(26,26,24,.07), 0 1px 2px rgba(26,26,24,.04);
  --shadow-lg:         0 8px 24px rgba(26,26,24,.10), 0 2px 6px rgba(26,26,24,.06);
  --shadow-focus:      0 0 0 3px rgba(14,143,94,.28);
  --shadow-card:       0 1px 2px rgba(26,26,24,.04);
  --shadow-card-hover: 0 18px 40px -24px rgba(26,26,24,.3);
  --shadow-btn:        0 8px 22px -12px rgba(14,143,94,.5);
  --shadow-mark:       0 6px 16px -8px rgba(14,143,94,.55);

  --nav-bg:     rgba(251,251,250,.85);
  --nav-ink:    #1A1A18;
  --nav-muted:  #76746E;
  --nav-border: #ECEAE5;

  --cta-bg:    #1A1A18;
  --cta-ink:   #fff;
  --cta-muted: rgba(255,255,255,.66);
  --nl-bg:     rgba(255,255,255,.08);
  --nl-border: rgba(255,255,255,.2);

  --footer-bg:     #1A1A18;
  --footer-muted:  rgba(255,255,255,.6);
  --footer-head:   #5FD3A0;
  --footer-border: rgba(255,255,255,.12);

  --band-bg: #FFFFFF;
}

/* ===== DARK MODE ===== */
body.dark-mode:not(.theme-meridian):not(.theme-pure) {
  --color-bg:            #0C0C14;
  --color-surface:       #161622;
  --color-surface-2:     #1E1E2E;
  --color-surface-3:     #252540;
  --color-border:        #2E2E4A;
  --color-border-strong: #3F3F6A;
  --color-text:           #E8E8F8;
  --color-text-secondary: #9A9AB0;
  --color-text-tertiary:  #6A6A88;
  --color-primary-light:  rgba(91,83,240,.2);
  --color-action-light:   rgba(124,58,237,.15);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
  --nav-bg:  rgba(12,12,20,.92);
  --band-bg: #0F0F1A;
}
body.theme-meridian.dark-mode {
  --color-bg:            #0A0F1E;
  --color-surface:       #111827;
  --color-surface-2:     #1B2538;
  --color-border:        #243348;
  --color-border-strong: #2F4560;
  --color-text:           #E7EDF7;
  --color-text-secondary: #8A9BB5;
  --color-text-tertiary:  #5E7090;
  --color-primary-light:  rgba(29,78,216,.2);
  --color-action-light:   rgba(14,165,233,.15);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.7);
  --band-bg: #111827;
}
body.theme-pure.dark-mode {
  --color-bg:            #111110;
  --color-surface:       #1A1A18;
  --color-surface-2:     #242420;
  --color-border:        #2E2D2A;
  --color-border-strong: #3D3B36;
  --color-text:           #F0EFEB;
  --color-text-secondary: #A09D97;
  --color-text-tertiary:  #76746E;
  --color-primary-light:  rgba(14,143,94,.2);
  --color-action-light:   rgba(14,143,94,.15);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
  --band-bg: #1A1A18;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}