@import url("/brand/tokens.css");

:root {
  --ooksite-logo-width: 132px;
  --ooksite-logo-height: auto;

  /* Alias temporanei: consentono alle pagine esistenti di adottare il brand
     senza interrompere gli stili e gli script che usano ancora i token legacy. */
  --accent: var(--ooksite-sage);
  --g1: var(--ooksite-sage);
  --g2: var(--ooksite-ivory);
  --grad: linear-gradient(135deg, var(--ooksite-sage), var(--ooksite-ivory));
}

html.light {
  --accent: var(--ooksite-petrol);
  --g1: var(--ooksite-petrol);
  --g2: var(--ooksite-sage);
  --grad: linear-gradient(135deg, var(--ooksite-petrol), var(--ooksite-sage));
}

body {
  font-family: var(--ooksite-font-body);
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: ooksite-page-enter .46s cubic-bezier(.22, 1, .36, 1) both;
  }

  body.ooksite-page-leaving {
    opacity: 0;
    animation: none;
    transition: opacity .18s ease-out;
  }
}

@keyframes ooksite-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading,
.display {
  font-family: var(--ooksite-font-display);
}

.eyebrow,
.label,
[class*="mono"] {
  font-family: var(--ooksite-font-mono);
}

.ooksite-brand-logo {
  display: inline-flex !important;
  align-items: center;
  width: var(--ooksite-logo-width);
  min-width: var(--ooksite-logo-width);
  line-height: 0;
  text-decoration: none;
}

.ooksite-brand-logo img {
  display: block;
  width: 100%;
  height: var(--ooksite-logo-height);
}

.ooksite-brand-logo .ooksite-logo-primary {
  display: none;
}

.ooksite-brand-logo .ooksite-logo-reversed {
  display: block;
}

html.light .ooksite-brand-logo .ooksite-logo-primary {
  display: block;
}

html.light .ooksite-brand-logo .ooksite-logo-reversed {
  display: none;
}

footer .ooksite-brand-logo .ooksite-logo-primary,
.pl-dark-header .ooksite-brand-logo .ooksite-logo-primary,
.sidebar .ooksite-brand-logo .ooksite-logo-primary,
[data-ooksite-logo-variant="reversed"] .ooksite-logo-primary {
  display: none !important;
}

footer .ooksite-brand-logo .ooksite-logo-reversed,
.pl-dark-header .ooksite-brand-logo .ooksite-logo-reversed,
.sidebar .ooksite-brand-logo .ooksite-logo-reversed,
[data-ooksite-logo-variant="reversed"] .ooksite-logo-reversed {
  display: block !important;
}

.btn-lime,
.btn-primary,
.cta-primary {
  background: var(--ooksite-petrol) !important;
  border-color: var(--ooksite-petrol) !important;
  color: var(--ooksite-white) !important;
}

.btn-lime:hover,
.btn-primary:hover,
.cta-primary:hover {
  background: var(--ooksite-sage) !important;
  border-color: var(--ooksite-sage) !important;
  color: var(--ooksite-petrol) !important;
}

::selection {
  background: var(--ooksite-sage);
  color: var(--ooksite-petrol);
}

@media (max-width: 640px) {
  :root {
    --ooksite-logo-width: 116px;
  }
}