/*
Theme Name: Willa Róża
Theme URI: https://willaroza.example
Author: Willa Róża Redaction
Author URI: https://willaroza.example
Description: Coastal-modern motyw WordPress dla bloga turystycznego/przewodnika po polskim wybrzeżu Bałtyku. Fraunces serif z italic accentami, paleta piaskowo-granatowa z miedzianym akcentem, dark mode, dedykowane CPT (hotel/event/miejscowość), URL-based filters w archiwum (PBN/SEO friendly), pełne JSON-LD i performance out of the box.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: willa-roza
Tags: blog, news, travel, two-columns, three-columns, right-sidebar, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, editor-style, block-styles, wide-blocks, accessibility-ready
*/

/* Theme tokens — single source of truth.
   Runtime overrides via Customizer arrive through inc/customizer-output.php
   (attached to the main `willa-theme` handle so they win the cascade). */

:root {
  /* Tony jasne — piasek, papier, mgła morska */
  --bg:        #F5EFE3;
  --bg-alt:    #EBE3D2;
  --paper:     #FFFDF8;
  --mist:      #E7DECB;

  /* Tony ciemne — granat morski */
  --ink:       #1F3A5F;
  --ink-2:     #3F5575;
  --ink-3:     #8A93A6;
  --line:      #1F3A5F;
  --line-soft: #D6CDB8;

  /* Akcent — ciepła miedź / mosiądz */
  --accent:    #B89058;
  --accent-2:  #8A6B3D;
  --accent-3:  #E8D9B8;

  /* Powierzchnie kontrastowe — zawsze ciemne, niezależnie od trybu */
  --dark-surface:    #1F3A5F;
  --dark-surface-2:  #14283B;
  --on-dark:         #F5EFE3;
  --on-dark-soft:    rgba(245,239,227,0.7);
  --on-dark-mute:    rgba(245,239,227,0.45);
  --on-dark-line:    rgba(245,239,227,0.12);

  /* Stan / utility */
  --ok:        #5C7A5C;
  --warn:      #B86A3A;
  --error:     #B33A3A;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Layout */
  --wrap: 1280px;
  --wrap-narrow: 760px;
  --wrap-prose: 680px;
  --gutter: 32px;
  --gutter-mobile: 20px;
  --header-height: 76px;
  --sidebar-width: 320px;

  /* Promień */
  --r-1: 2px;
  --r-2: 4px;

  /* Cienie — subtelne, ciepłe na bazie granatu */
  --shadow-1: 0 1px 2px rgba(31,58,95,0.04), 0 8px 24px rgba(31,58,95,0.06);
  --shadow-2: 0 2px 4px rgba(31,58,95,0.06), 0 16px 40px rgba(31,58,95,0.08);

  /* Typografia */
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-base: 16px;
  --lh-base: 1.6;
  --heading-scale: 1;

  /* Motion */
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
  --ease:   cubic-bezier(.22,.61,.36,1);

  /* Z-index */
  --z-nav: 60;
  --z-cta: 70;
  --z-drawer: 100;
  --z-modal: 110;
}

/* Dark mode — głębia morska o zmierzchu */
:root[data-theme="dark"] {
  --bg:        #0F1D2B;
  --bg-alt:    #14283B;
  --paper:     #16314A;
  --mist:      #1A3852;
  --ink:       #EFE6D2;
  --ink-2:     #BBB29C;
  --ink-3:     #7E8597;
  --line:      #2C4565;
  --line-soft: #243A55;
  --accent:    #D4B587;
  --accent-2:  #E8CDA0;
  --accent-3:  #2A3F5C;
  --dark-surface:   #0A1622;
  --dark-surface-2: #06101A;
  --on-dark:        #EFE6D2;
  --on-dark-soft:   rgba(239,230,210,0.7);
  --on-dark-mute:   rgba(239,230,210,0.4);
  --on-dark-line:   rgba(239,230,210,0.1);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.6);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  transition: background-color .35s ease, color .35s ease;
  overflow-x: hidden;
}
body.willa-no-scroll { overflow: hidden; }
img, svg, video, picture { max-width: 100%; display: block; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--paper); }

:where(a, button, input, textarea, select, details, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 12px; background: var(--ink); color: var(--bg);
  padding: 10px 16px; font-family: var(--mono); font-size: 12px; z-index: 200;
  transition: top var(--t-base);
}
.skip-link:focus { top: 12px; }