/* Radisa Gallery — design tokens */

:root {
  /* Palette — brand (revisione cliente 06/2026) */
  --r-ivory: #F2EEE8;   /* Ivory */
  --r-stone: #E6E2DB;
  --r-charcoal: #262626; /* Nero */
  --r-rosa: #D9D0CB;     /* Rosa — contorni foto, fondi "grigini" */
  --r-salvia: #A7B5A7;   /* Salvia — pagine editoriali (Ispirazioni, Progetti, Editoriale) */
  --r-olive: #8C9486;
  --r-bronze: #8A6A52;

  /* Derived */
  --r-charcoal-70: rgba(38, 38, 38, 0.7);
  --r-charcoal-50: rgba(38, 38, 38, 0.5);
  --r-charcoal-30: rgba(38, 38, 38, 0.3);
  --r-charcoal-12: rgba(38, 38, 38, 0.12);
  --r-charcoal-06: rgba(38, 38, 38, 0.06);
  --r-ivory-90: rgba(242, 238, 232, 0.9);
  --r-ivory-70: rgba(242, 238, 232, 0.7);

  /* Type */
  --r-serif: "Cormorant Garamond", "Canela", "Editorial New", "EB Garamond", "Times New Roman", serif;
  --r-sans: "Inter Tight", "Manrope", "Suisse Intl", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --r-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing rhythm */
  --r-pad: clamp(20px, 4vw, 56px);
}

html, body { background: var(--r-ivory); color: var(--r-charcoal); }
body { font-family: var(--r-sans); font-weight: 400; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }

/* Atmospheric placeholder — feels like a photograph, not a swatch.
   Layered radial highlights + warm vignette + faint grain.
   Use --r-img-hue to tune toward bronze (40) / olive (110) / neutral (60). */
.r-atmos {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 45% at 22% 28%, hsla(48, 32%, 92%, 0.95) 0%, hsla(36, 22%, 78%, 0.4) 45%, transparent 75%),
    radial-gradient(45% 60% at 85% 75%, hsla(28, 18%, 32%, 0.55) 0%, transparent 65%),
    radial-gradient(120% 90% at 50% 50%, hsla(34, 16%, 58%, 1) 0%, hsla(28, 14%, 38%, 1) 100%);
  color: var(--r-ivory);
  isolation: isolate;
}
.r-atmos::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* faint horizontal "shelf" planes */
    linear-gradient(180deg, transparent 0 38%, hsla(28, 14%, 22%, 0.18) 38% 39%, transparent 39% 64%, hsla(28, 14%, 22%, 0.12) 64% 64.6%, transparent 64.6%),
    /* light from window */
    linear-gradient(105deg, hsla(46, 40%, 92%, 0.18) 0%, transparent 38%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}
.r-atmos::after {
  /* vignette + grain */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.32) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/></svg>");
  pointer-events: none;
  z-index: 2;
}

/* Variants of the atmospheric scene */
.r-atmos--warm {
  background:
    radial-gradient(55% 40% at 28% 32%, hsla(42, 50%, 88%, 0.95) 0%, hsla(34, 26%, 72%, 0.35) 45%, transparent 75%),
    radial-gradient(48% 65% at 88% 78%, hsla(20, 22%, 24%, 0.6) 0%, transparent 65%),
    radial-gradient(120% 90% at 50% 50%, hsla(32, 22%, 62%, 1) 0%, hsla(24, 16%, 32%, 1) 100%);
}
.r-atmos--olive {
  background:
    radial-gradient(60% 45% at 22% 28%, hsla(80, 18%, 84%, 0.92) 0%, hsla(80, 12%, 64%, 0.35) 45%, transparent 75%),
    radial-gradient(45% 60% at 85% 75%, hsla(80, 10%, 22%, 0.55) 0%, transparent 65%),
    radial-gradient(120% 90% at 50% 50%, hsla(82, 12%, 52%, 1) 0%, hsla(80, 8%, 28%, 1) 100%);
}
.r-atmos--stone {
  background:
    radial-gradient(60% 45% at 22% 28%, hsla(42, 18%, 90%, 0.95) 0%, hsla(36, 10%, 74%, 0.35) 45%, transparent 75%),
    radial-gradient(45% 60% at 85% 75%, hsla(30, 6%, 28%, 0.45) 0%, transparent 65%),
    radial-gradient(120% 90% at 50% 50%, hsla(38, 8%, 70%, 1) 0%, hsla(30, 6%, 42%, 1) 100%);
}

/* Hint object suggestions sit *inside* atmos to make it feel composed */
.r-atmos > .r-atmos__hint {
  position: absolute;
  z-index: 3;
  font-family: var(--r-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsla(44, 30%, 92%, 0.55);
  padding: 6px 10px;
  border: 1px solid hsla(44, 30%, 92%, 0.25);
  backdrop-filter: blur(2px);
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Suggested vessel silhouettes — abstract, calm */
.r-atmos__vessel {
  position: absolute;
  z-index: 1;
  background: linear-gradient(180deg, hsla(28, 16%, 22%, 0.55), hsla(28, 16%, 14%, 0.85));
  border-radius: 50% 50% 8% 8% / 24% 24% 8% 8%;
  filter: blur(0.4px);
}
.r-atmos__plane {
  position: absolute;
  z-index: 0;
  background: linear-gradient(180deg, hsla(36, 18%, 60%, 0.18), hsla(28, 16%, 22%, 0.45));
  mix-blend-mode: multiply;
}

/* Hairline rule */
.r-rule { height: 1px; background: var(--r-charcoal-12); }

/* Editorial number tag */
.r-numtag {
  font-family: var(--r-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--r-charcoal-70);
}