/* Salvatori Sales App — bound to Salvatori Design System tokens */

/* ======== Atlas Grotesk — DS-licensed font, served local ======== */
@font-face {
  font-family: "Atlas Grotesk";
  src: url("./fonts/AtlasGrotesk-Thin.woff2") format("woff2");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atlas Grotesk";
  src: url("./fonts/AtlasGrotesk-ThinItalic.woff2") format("woff2");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atlas Grotesk";
  src: url("./fonts/AtlasGrotesk-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atlas Grotesk";
  src: url("./fonts/AtlasGrotesk-LightItalic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atlas Grotesk";
  src: url("./fonts/AtlasGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atlas Grotesk";
  src: url("./fonts/AtlasGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Stone palette — DS canonical names */
  --bianco-carrara:    #F5F5F0;
  --crema-d-orcia:     #E8E0D5;
  --silk-georgette:    #D4CFC7;
  --pietra-grey:       #8A8A8A;
  --pietra-d-avola:    #6B6B6B;
  --gris-du-marais:    #2A2A2A;

  --tuscan-terracotta: #C4846C;
  --verde-alpi:        #3D5E4B;
  --oro-antico:        #B8A67C;

  /* Semantic — light page, never dark */
  --bg:           var(--bianco-carrara);
  --bg-warm:      var(--crema-d-orcia);
  --bg-elevated:  #FFFFFF;

  --fg:           var(--gris-du-marais);
  --fg-1:         var(--pietra-d-avola);
  --fg-2:         var(--pietra-grey);
  --fg-3:         #7A7A75;

  --rule:         #DCDAD3;
  --rule-strong:  var(--silk-georgette);

  --accent:       var(--tuscan-terracotta);
  --accent-quiet: var(--oro-antico);
  --accent-deep:  var(--verde-alpi);

  /* Cinema — only place where stone goes dark, but page chrome stays neutral */
  --cinema-bg:    var(--gris-du-marais);
  --cinema-fg:    var(--bianco-carrara);

  --font-display: "Atlas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Atlas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --weight-thin:    100;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  --track-display: 0.04em;
  --track-body:    0.005em;
  --track-eyebrow: 0.22em;
  --track-button:  0.18em;

  --lh-tight:   1.05;
  --lh-display: 1.12;
  --lh-body:    1.55;

  --hairline:        1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);

  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 600ms;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--weight-thin);
  letter-spacing: var(--track-body);
  font-size: 15px;
  line-height: var(--lh-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* height: 100dvh = altezza VISIBILE reale (esclude la barra browser di tablet/mobile).
   Con 100vh il fondo (bottone «Tocca per proseguire» ecc.) finiva dietro la toolbar.
   100vh resta come fallback per browser senza dvh. */
#root { width: 100vw; height: 100vh; height: 100dvh; position: relative; overflow: hidden; }

/* ============ Type primitives — DS-aligned ============ */
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
}
.display-it {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-style: italic;
  letter-spacing: 0;
}
.eyebrow,
.kicker,
.caps {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-size: 10px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.body {
  font-family: var(--font-body);
  font-weight: var(--weight-thin);
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--fg-1);
}

/* legacy class aliases (kept so existing JSX still styles correctly) */
.serif, .serif-lt {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  letter-spacing: var(--track-display);
}
.sans { font-family: var(--font-body); }
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* ============ Buttons / chips — quiet hairline ============ */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-size: 11px;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  padding: 14px 28px;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--dur) var(--ease-quiet), color var(--dur) var(--ease-quiet);
}
.btn-ghost:hover { background: var(--fg); color: var(--bg); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-thin);
  cursor: pointer;
  background: transparent;
  color: var(--fg);
  border-color: var(--pietra-grey);
  transition: color var(--dur) var(--ease-quiet), border-color var(--dur) var(--ease-quiet);
}
.chip:hover { color: var(--fg); border-color: var(--fg); }
.chip.on    { color: var(--bg); background: var(--fg); border-color: var(--fg); }

/* Quiet link with arrow glyph */
.link-quiet {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-size: 10px;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--fg);
  padding-bottom: 2px;
  cursor: pointer;
  background: transparent;
  border-top: none; border-left: none; border-right: none;
  border-radius: 0;
}

/* ============ Bilingual caption ============ */
.bilingual {
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  font-size: 10px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.bilingual .it { color: var(--fg-3); opacity: 0.85; }

/* ============ Hairline divider ============ */
.hr-thin { height: 1px; background: var(--rule); width: 100%; }

/* ============ Animations — quiet ============ */
@keyframes kenburns-in  { 0% { transform: scale(1.04); } 100% { transform: scale(1.10) translate3d(-0.8%, -0.5%, 0); } }
@keyframes kenburns-alt { 0% { transform: scale(1.08) translate3d(0.5%, 0.3%, 0); } 100% { transform: scale(1.02); } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fade-in { animation: fade-in 600ms var(--ease-quiet) both; }
.fade-up { animation: fade-up 600ms var(--ease-quiet) both; }

/* ============ Scrollbar hidden ============ */
.scroll-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scroll-hide::-webkit-scrollbar { display: none; }

/* ============ Image hover — restrained ============ */
.hover-lift { transition: transform 600ms var(--ease-quiet); }
.hover-lift:hover { transform: scale(1.01); }

/* ============ Swipe zone indicator (right edge — reference) ============ */
.swipe-hint {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 64px;
  background: var(--rule);
  opacity: 0.6;
}

/* Cinema overlay text — light type on dark photography */
.cinema-overlay { color: var(--cinema-fg); }
.cinema-overlay .eyebrow,
.cinema-overlay .caps { color: rgba(245, 245, 240, 0.7); }

/* Selection — warm stone, never blue */
::selection { background: var(--silk-georgette); color: var(--fg); }

/* Links — quiet, restrained */
a { color: var(--fg); text-decoration: none; }
a:hover { border-bottom: 1px solid var(--fg); }

/* Legacy --ink / --ink-dim / --line / --bg-2 aliases for components I haven't touched yet */
:root {
  --ink:        var(--fg);
  --ink-dim:    var(--fg-1);
  --ink-faint:  var(--fg-2);
  --line:       var(--rule);
  --line-soft:  var(--rule);
  --bg-2:       var(--bg-warm);
  --paper:      var(--bg);
  --paper-ink:  var(--fg);
  --stone:      var(--silk-georgette);
}