/* ===========================================================
   APOCALIP — tokens v2
   Sans peste tot (Open Sans). Separarea se face prin suprafață,
   spațiu și sticlă — nu prin linii. Blur discret, nu efect.
   =========================================================== */

@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: block;
}

:root {
  /* --- suprafețe --- */
  --paper:        #f4f3ef;
  --paper-2:      #eceae5;
  --surface:      #ffffff;
  --surface-soft: rgba(255, 255, 255, .64);
  --night:        #161511;
  --night-2:      #201e19;
  /* Cerneală caldă — noaptea trasă spre roșul casei. Suprafața blocului
     rubricilor evidențiate: iese din hârtie prin valoare, nu prin nuanță. */
  --night-cald:   #241a16;
  --night-cald-2: #14100d;

  /* --- sticlă --- */
  --glass:        rgba(251, 250, 248, .62);
  --glass-strong: rgba(251, 250, 248, .84);
  --glass-dark:   rgba(20, 19, 15, .56);
  --glass-edge:   inset 0 1px 0 rgba(255, 255, 255, .6);
  --blur:         blur(20px) saturate(170%);
  --blur-soft:    blur(12px) saturate(150%);

  /* --- cerneală --- */
  --ink:          #16150f;
  --ink-2:        #3c382f;
  /* Culoarea etichetelor mici (kicker) de când nu mai poartă accentul:
     la 5.2:1 pe hârtie ține exact contrastul pe care îl avea roșul. */
  --ink-3:        #6b6456;
  --muted:        #797265;
  --muted-2:      #a8a194;
  --on-night:     #f5f3ee;
  --on-night-m:   #9d968a;

  /* --- accent unic --- */
  --accent:       #b8371f;
  --accent-2:     #922814;
  --accent-soft:  rgba(184, 55, 31, .10);
  --accent-glow:  rgba(184, 55, 31, .22);


  /* --- tipografie --- */
  --sans: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display: clamp(2.6rem, 5.1vw, 4.5rem);
  --t-h1:      clamp(2.05rem, 3.5vw, 3.1rem);
  --t-h2:      clamp(1.45rem, 2vw, 1.8rem);
  --t-h3:      1.2rem;
  --t-body:    1.0625rem;
  --t-meta:    0.8125rem;
  --t-kicker:  0.68rem;

  /* --- ritm --- */
  --gut:   clamp(1.25rem, 2.4vw, 2.25rem);
  --sec:   clamp(3.5rem, 6vw, 6rem);
  --maxw:  1280px;
  --readw: 40rem;

  /* --- formă --- */
  --r-xs:   10px;
  --r-sm:   14px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(23, 21, 15, .045);
  --sh-sm: 0 2px 10px -3px rgba(23, 21, 15, .10), 0 1px 2px rgba(23, 21, 15, .04);
  --sh-md: 0 10px 30px -14px rgba(23, 21, 15, .20), 0 2px 6px -2px rgba(23, 21, 15, .05);
  --sh-lg: 0 28px 64px -28px rgba(23, 21, 15, .32), 0 8px 20px -12px rgba(23, 21, 15, .12);
  --sh-glass: 0 10px 34px -14px rgba(23, 21, 15, .22), var(--glass-edge);

  --ease:  cubic-bezier(.22, .61, .36, 1);
  --ease-2: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Lumină ambientală — dă sticlei ceva de estompat. Foarte discretă. */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(40vmax 36vmax at 12% 2%,  rgba(212, 176, 140, .40), transparent 62%),
    radial-gradient(48vmax 42vmax at 90% 10%, rgba(156, 170, 198, .38), transparent 64%),
    radial-gradient(46vmax 42vmax at 58% 62%, rgba(198, 154, 138, .26), transparent 66%),
    radial-gradient(38vmax 34vmax at 30% 96%, rgba(170, 186, 176, .24), transparent 66%);
}

/* granulație de hârtie */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { letter-spacing: -.034em; line-height: 1.02; }
h3, h4 { letter-spacing: -.022em; }

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

::selection { background: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}