/* =============================================================================
   TEMELIE — variabile, reset, tipografie, motive textile.
   Paleta e luată din cabana reală: lemnul ars, cobaltul ferestrelor,
   verdele pajiștii, roșul carpetei cu trandafiri, mierea lemnului de brad.
   ============================================================================= */

@layer reset, temelie, tipografie, utilitare;

/* ---------------------------------------------------------------- RESET --- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* permite animarea înălțimii către „auto" acolo unde e suportat */
    interpolate-size: allow-keywords;
  }

  body {
    min-height: 100svh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; background-color: var(--umbra-poza); }

  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }

  h1, h2, h3, h4 { text-wrap: balance; }
  p, li { text-wrap: pretty; }

  :focus-visible {
    outline: 2px solid var(--sezon-text);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--sezon-plin); color: var(--pe-sezon); }
}

/* -------------------------------------------------------------- TEMELIE --- */
@layer temelie {
  :root {
    color-scheme: light;

    /* --- culori de bază, fixe --- */
    --lemn-ars:     oklch(21% 0.016 55);    /* exteriorul cabanei      */
    --lemn-adanc:   oklch(16% 0.014 50);    /* umbra dintre scânduri   */
    --cerneala:     oklch(23% 0.020 60);
    --cerneala-moi: oklch(41% 0.018 62);
    --pergament:    oklch(97.2% 0.011 88);  /* varul de pe tocărie     */
    --pergament-2:  oklch(94.2% 0.017 88);
    --cobalt:       oklch(52% 0.190 254);   /* ferestrele              */
    --cobalt-clar:  oklch(64% 0.165 252);
    --pin:          oklch(70% 0.108 68);    /* lemnul de brad          */
    --pajiste:      oklch(63% 0.135 133);   /* iarba                   */
    --brad:         oklch(38% 0.058 155);
    --trandafir:    oklch(52% 0.170 27);    /* carpeta                 */
    --miere:        oklch(74% 0.135 78);
    --umbra-poza:   oklch(88% 0.012 80);

    /* --- roluri, se schimbă la modul de noapte --- */
    --fundal:       var(--pergament);
    --fundal-2:     var(--pergament-2);
    --fundal-adanc: var(--lemn-ars);
    --text:         var(--cerneala);
    --text-moi:     var(--cerneala-moi);
    --linie:        oklch(23% 0.020 60 / 0.14);
    --linie-tare:   oklch(23% 0.020 60 / 0.28);
    --card:         oklch(99% 0.006 88);

    /* --- anotimpul curent (se suprascrie mai jos) ---
       Sunt patru roluri, nu unul singur, ca să iasă mereu citeț:
         --sezon        culoarea vie: puncte, bare, chenare, lucruri decorative
         --sezon-adanc  suprafață închisă (fundal de card) cu text deschis peste
         --sezon-clar   suprafață deschisă, pentru benzile întunecate
         --sezon-text   accentul pentru TEXT pe fundalul paginii
         --sezon-plin   fundalul butoanelor pline, cu --pe-sezon deasupra       */
    --sezon:        var(--pajiste);
    --sezon-adanc:  var(--brad);
    --sezon-clar:   oklch(80% 0.130 133);
    --sezon-spalat: oklch(63% 0.135 133 / 0.10);
    --sezon-text:   var(--sezon-adanc);
    --sezon-plin:   var(--sezon-adanc);
    --pe-sezon:     var(--pergament);
    --miere-clar:   oklch(85% 0.115 84);

    /* --- umbre: joase și calde, ca lumina de după-amiază --- */
    --umbra-1: 0 1px 2px oklch(21% 0.016 55 / 0.06),
               0 4px 12px -6px oklch(21% 0.016 55 / 0.16);
    --umbra-2: 0 2px 4px oklch(21% 0.016 55 / 0.05),
               0 18px 40px -22px oklch(21% 0.016 55 / 0.40);
    --umbra-3: 0 40px 90px -40px oklch(21% 0.016 55 / 0.55);

    /* --- tipografie --- */
    --afis: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --text-font: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* --- ritm --- */
    --lat: 1240px;
    --lat-ingust: 760px;
    --margine: clamp(20px, 5vw, 56px);
    --gol-sectiune: clamp(88px, 12vw, 168px);
    --raza: 14px;
    --raza-mica: 8px;

    /* --- mișcare --- */
    --lin: cubic-bezier(0.22, 0.68, 0.24, 1);
    --elan: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ---------- anotimpuri: schimbă câteva culori, dar schimbă tot ---------- */
  :root[data-anotimp="vara"] {
    --sezon: var(--pajiste);
    --sezon-adanc: var(--brad);
    --sezon-clar: oklch(80% 0.130 133);
    --sezon-spalat: oklch(63% 0.135 133 / 0.11);
  }
  :root[data-anotimp="toamna"] {
    --sezon: oklch(64% 0.148 62);
    --sezon-adanc: oklch(42% 0.108 48);
    --sezon-clar: oklch(82% 0.125 74);
    --sezon-spalat: oklch(64% 0.148 62 / 0.13);
  }
  :root[data-anotimp="iarna"] {
    --sezon: var(--cobalt);
    --sezon-adanc: oklch(34% 0.120 256);
    --sezon-clar: oklch(79% 0.115 248);
    --sezon-spalat: oklch(52% 0.190 254 / 0.10);
  }
  :root[data-anotimp="primavara"] {
    --sezon: oklch(70% 0.148 142);
    --sezon-adanc: oklch(41% 0.085 148);
    --sezon-clar: oklch(85% 0.125 142);
    --sezon-spalat: oklch(70% 0.148 142 / 0.11);
  }

  /* ---------- noaptea la cabană ---------- */
  :root[data-lumina="noapte"] {
    color-scheme: dark;
    --fundal:       oklch(17% 0.014 58);
    --fundal-2:     oklch(21% 0.016 56);
    --fundal-adanc: oklch(12% 0.012 55);
    --text:         oklch(93% 0.014 84);
    --text-moi:     oklch(74% 0.016 78);
    --linie:        oklch(93% 0.014 84 / 0.14);
    --linie-tare:   oklch(93% 0.014 84 / 0.26);
    --card:         oklch(22% 0.017 56);
    --umbra-poza:   oklch(26% 0.014 58);
    --cobalt:       var(--cobalt-clar);
    --umbra-1: 0 1px 2px oklch(0% 0 0 / 0.30), 0 4px 12px -6px oklch(0% 0 0 / 0.55);
    --umbra-2: 0 2px 4px oklch(0% 0 0 / 0.32), 0 18px 40px -22px oklch(0% 0 0 / 0.75);
    --umbra-3: 0 40px 90px -40px oklch(0% 0 0 / 0.85);

    /* noaptea, rolurile se întorc: accentul de text trebuie deschis, iar
       butoanele pline capătă text închis peste culoarea vie */
    --sezon-text: var(--sezon-clar);
    --sezon-plin: var(--sezon);
    --pe-sezon:   var(--lemn-adanc);
  }
  :root[data-lumina="noapte"][data-anotimp="vara"] { --sezon: oklch(72% 0.140 133); }
  :root[data-lumina="noapte"][data-anotimp="toamna"] { --sezon: oklch(74% 0.140 66); }
  :root[data-lumina="noapte"][data-anotimp="iarna"] { --sezon: oklch(70% 0.150 250); }
  :root[data-lumina="noapte"][data-anotimp="primavara"] { --sezon: oklch(78% 0.145 142); }

  body {
    background: var(--fundal);
    color: var(--text);
    font-family: var(--text-font);
    font-size: clamp(16px, 0.42vw + 15px, 17.5px);
    font-optical-sizing: auto;
    transition: background-color 0.6s var(--lin), color 0.6s var(--lin);
  }
}

/* ----------------------------------------------------------- TIPOGRAFIE --- */
@layer tipografie {
  .afis {
    font-family: var(--afis);
    font-weight: 400;
    font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 60;
    line-height: 1.02;
    letter-spacing: -0.018em;
  }

  .t-urias { font-size: clamp(3rem, 8.2vw, 7.4rem); }
  .t-mare  { font-size: clamp(2.2rem, 5vw, 4.2rem); }
  .t-medie { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
  .t-mica  { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }

  /* eticheta mică de deasupra titlurilor */
  .sprancena {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sezon-text);
    display: flex;
    align-items: center;
    gap: 0.75em;
  }
  .sprancena::before {
    content: "";
    inline-size: 1.9em;
    block-size: 2px;
    background: var(--sezon);
    border-radius: 2px;
    flex: none;
  }

  .plumb {
    font-size: clamp(1.02rem, 1.1vw, 1.2rem);
    color: var(--text-moi);
    max-inline-size: 58ch;
  }

  /* orele — cifre aliniate, ca pe un ceas de perete */
  .ceas {
    font-family: var(--afis);
    font-variant-numeric: tabular-nums;
    font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 90;
    letter-spacing: -0.03em;
  }
}

/* ------------------------------------------------------------ UTILITARE --- */
@layer utilitare {
  .invelis {
    inline-size: 100%;
    max-inline-size: var(--lat);
    margin-inline: auto;
    padding-inline: var(--margine);
  }
  .invelis-ingust { max-inline-size: var(--lat-ingust); }

  .sectiune { padding-block: var(--gol-sectiune); }

  .doar-citit {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* ---------- ȚESĂTURA: motivul preșurilor bucovinene, ca element grafic ----
     Nu e ornament pus la întâmplare — sunt dungile de pe preșurile din casă. */
  .tesatura {
    --fir: 4px;
    block-size: 9px;
    inline-size: 100%;
    border: 0;
    background:
      repeating-linear-gradient(90deg,
        var(--trandafir)  0 calc(var(--fir) * 0.75),
        transparent       calc(var(--fir) * 0.75) calc(var(--fir) * 2.5),
        var(--cobalt)     calc(var(--fir) * 2.5)  calc(var(--fir) * 3.25),
        transparent       calc(var(--fir) * 3.25) calc(var(--fir) * 5),
        var(--miere)      calc(var(--fir) * 5)    calc(var(--fir) * 6),
        transparent       calc(var(--fir) * 6)    calc(var(--fir) * 8),
        var(--sezon)      calc(var(--fir) * 8)    calc(var(--fir) * 8.75),
        transparent       calc(var(--fir) * 8.75) calc(var(--fir) * 11)
      ),
      linear-gradient(var(--linie), var(--linie));
    background-size: 100% 3px, 100% 1px;
    background-position: 0 3px, 0 0;
    background-repeat: repeat-x;
    opacity: 0.9;
  }
  .tesatura-groasa { --fir: 7px; block-size: 14px; background-size: 100% 6px, 100% 1px; }

  /* linia de brad — separator mai discret */
  .fir {
    block-size: 1px; border: 0;
    background: linear-gradient(90deg, transparent, var(--linie) 12%, var(--linie) 88%, transparent);
  }

  /* apariția la derulare — CSS pur unde se poate, JS ca plasă de siguranță */
  .apare { opacity: 0; transform: translateY(26px); }
  .apare.vazut { opacity: 1; transform: none; transition: opacity 0.85s var(--lin), transform 0.85s var(--elan); }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .apare {
        opacity: 1; transform: none;
        animation: ridica-din-jos linear both;
        animation-timeline: view();
        animation-range: entry 4% cover 26%;
      }
    }
  }
  @keyframes ridica-din-jos {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .apare { opacity: 1 !important; transform: none !important; animation: none !important; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}