/* ==========================================================================
   Motyw: ARKONA (len, pergamin, drewno, kuta plecionka)
   Aby włączyć: skopiuj ten plik jako css/theme.css

   Grafiki (folder /assets/):
     tex-linen.webp      tło strony, kafelek bezszwowy 512×512
     header-bar.webp     tło paska nawigacji, ok. 1920×120
     border-braid.webp   plecionka boczna, kafelek pionowy ok. 88×400
                         (bez niej użyta zostanie stara plecionka.png)
     tex-parchment.webp  pergamin panelu generatora, ok. 720×1600
     leather-tab.webp    skórzana zakładka listy rozwijanej, ok. 124×100, ze strzałką
     slider-handle.png   drewniany uchwyt suwaka, 176×60, przezroczyste tło
   ========================================================================== */
:root {
  --color-bg: #ebe3d4;
  --color-surface: #e3d8c3;
  --color-text: #1c1610;
  --color-accent: #a8743e;
  --color-accent-2: #8e5a2e;
  --color-divider: color-mix(in srgb, #5a3a1e 24%, transparent);

  --color-neutral-100: #f7f1e6; --color-neutral-200: #ebe2d2; --color-neutral-300: #d9ccb6;
  --color-neutral-400: #bcae96; --color-neutral-500: #9c8f79; --color-neutral-600: #625745;
  --color-neutral-700: #4a3f31; --color-neutral-800: #30271d; --color-neutral-900: #2e271f;

  --color-accent-100: #fbeedb; --color-accent-200: #f3dcb8; --color-accent-300: #e6c08c;
  --color-accent-400: #d09f63; --color-accent-500: #b8844a; --color-accent-600: #976534;
  --color-accent-700: #663a18; --color-accent-800: #4e2c12; --color-accent-900: #3b230f;

  --color-accent-2-100: #f8ecdd; --color-accent-2-200: #eed6b8; --color-accent-2-300: #ddb88a;
  --color-accent-2-400: #c4955f; --color-accent-2-500: #a8773f; --color-accent-2-600: #8e5a2e;
  --color-accent-2-700: #6f4322; --color-accent-2-800: #502f17; --color-accent-2-900: #341e0e;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, serif;

  --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px; --space-4: 18.4px;
  --space-5: 23px; --space-6: 27.6px; --space-7: 32.2px; --space-8: 36.8px;

  --radius-sm: 2px; --radius-md: 5px; --radius-lg: 8px;

  --shadow-sm: 0 1px 3px rgba(60, 35, 15, .18);
  --shadow-md: 0 4px 12px rgba(60, 35, 15, .22);
  --shadow-lg: 0 14px 34px rgba(60, 35, 15, .30);

  --braid-width: 44px;
  --loom-render: realistic;     /* generator: nitki z cieniowaniem i skrętem */

  --wood: linear-gradient(145deg, #7a5033 0%, #4e3020 35%, #3a2216 60%, #5e3c26 100%);
  --parchment: radial-gradient(ellipse at 30% 20%, #f6ecd6 0%, #e9dab9 60%, #dcc79f 100%);
}

/* — tło, nagłówek, stopka — */
body, .page { background-color: var(--color-bg); background-image: url('../assets/tex-linen.webp'); background-size: 512px 512px; }
.site-head { background-color: #e6dccb; background-image: url('../assets/header-bar.webp'), linear-gradient(180deg, #efe7d9 0%, #e2d7c3 100%); background-size: cover; border-bottom-color: #c9b99c; box-shadow: 0 3px 10px rgba(60, 40, 20, .18); }
.brand img { width: 53px; height: 53px; }
.brand span { font-size: 24px; letter-spacing: .14em; }
.site-head nav { font-size: 16px; letter-spacing: .01em; }
.site-head nav a { color: var(--color-text); border-bottom-width: 3px; padding-bottom: 3px; }
.site-head nav a.is-active { box-shadow: 0 2px 0 rgba(90, 55, 20, .25); }
.site-foot { background-color: #ddd0b8; background-image: url('../assets/tex-linen.webp'); background-size: 512px 512px; border-top-color: #c4b292; box-shadow: inset 0 3px 8px rgba(60, 40, 20, .12); }

/* — plecionki: relief w kafelku, cieniowanie pręta w CSS — */
.braid i {
  opacity: 1; mix-blend-mode: normal; background-color: #9a9a96;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 18%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 60%, rgba(0,0,0,.25) 82%, rgba(0,0,0,.6) 100%),
    url('../assets/border-braid.webp'),
    url('../assets/plecionka.png');
  background-size: 100% 100%, 100% auto, 100% auto;
  background-repeat: no-repeat, repeat-y, repeat-y;
}
.braid i.l { box-shadow: inset -3px 0 6px rgba(0,0,0,.35), 4px 0 12px rgba(40,25,10,.35); }
.braid i.r { box-shadow: inset 3px 0 6px rgba(0,0,0,.35), -4px 0 12px rgba(40,25,10,.35); }

/* — komponenty — */
.btn-primary { color: #f6ecd6; border-color: #4e2c12; background: linear-gradient(180deg, #8e5a30, #6a3f1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(60,35,15,.3); }
.btn-primary:hover { color: #fff7e8; background: linear-gradient(180deg, #9c6538, #774724); }
.btn-primary:active { background: linear-gradient(180deg, #6a3f1f, #5a3517); }
.btn-secondary { border-color: #a8743e; background: rgba(255, 250, 240, .35); }
.btn-secondary:hover { background: rgba(255, 250, 240, .7); }
.card { background: rgba(250, 244, 232, .6); border-color: #c9b99c; border-radius: 6px; box-shadow: var(--shadow-sm); }
.plate { filter: sepia(0.18) saturate(0.85) contrast(1.05); border: 8px solid transparent; border-radius: 8px; background: var(--wood) border-box; box-shadow: var(--shadow-md); overflow: hidden; }
.gal { background: rgba(250, 244, 232, .6); border: 1px solid #c9b99c; }

/* — generator tkanin — */
.loom-panel { border: 12px solid transparent; border-radius: 18px; background: url('../assets/tex-parchment.webp') padding-box center / cover, var(--parchment) padding-box, var(--wood) border-box; box-shadow: 0 10px 24px rgba(50,30,15,.35), inset 0 0 0 1px rgba(40,20,8,.5), inset 0 2px 8px rgba(40,20,8,.35); }
.loom-label { font-size: 17px; font-weight: 600; letter-spacing: .08em; }
.loom-label-row { font-size: 15px; }
.loom-select select { padding: 11px 64px 11px 16px; font-size: 16px; color: var(--color-text); background: linear-gradient(180deg, #faf4e7, #ece0c6); border-color: #b9a37c; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(80,50,20,.15); }
.loom-select::after { top: -3px; right: -6px; bottom: -3px; width: 62px; height: auto; border: 0; transform: none; background: url('../assets/leather-tab.webp') center / contain no-repeat; }
.loom-group-title { font-size: 14px; color: #4a3526; border-bottom: 0; }
.loom-palette::-webkit-scrollbar-thumb { background: #8a6440; }
.loom-swatch { width: 30px; height: 30px; border: 1px solid rgba(40,25,10,.3); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.2); }
.loom-swatch.is-active { transform: none; outline: 2px solid #a8743e; box-shadow: 0 0 0 4px #5a3a1e, 0 2px 4px rgba(0,0,0,.4); }
.loom-range-field { border-top: 0; }
.loom-range { height: 34px; }
.loom-range::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(180deg, #5a3a22, #8a6440); box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.4); }
.loom-range::-moz-range-track { height: 8px; background: linear-gradient(180deg, #5a3a22, #8a6440); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.loom-range::-webkit-slider-thumb { width: 88px; height: 30px; margin-top: -11px; border-radius: 0; background: url('../assets/slider-handle.png') center / contain no-repeat; }
.loom-range::-moz-range-thumb { width: 88px; height: 30px; border-radius: 0; background: url('../assets/slider-handle.png') center / contain no-repeat; }
.loom-frame { padding: 0; border: 12px solid transparent; border-radius: 14px; background: linear-gradient(#15110d, #15110d) padding-box, var(--wood) border-box; box-shadow: 0 12px 28px rgba(40,25,10,.35); }
.loom-canvas-wrap { border: 0; border-radius: 4px; }

/* — ciemniejszy, czytelniejszy tekst na fakturze — */
.table th { color: var(--color-neutral-700); }
.card-body { opacity: 1; color: var(--color-neutral-800); }
.text-muted, figcaption, .card-meta { color: var(--color-neutral-700); }