/* ==========================================================================
   DEMO PHARMA – variables.css
   One place for the whole design system:
     - brand colours (HSL numbers, used as hsl(var(--primary)))
     - corner radius
     - the Inter font family
     - shared keyframes
   Change a colour here and every page follows.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Typography – Inter (self hosted, no external request)
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
} 

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Colour tokens
   --------------------------------------------------------------------------- */
:root {
  /* ---- Brand palette: pista green + deep green (redesign, Sep 2026) ----
     Light pista tints for surfaces, deep green for actions, very dark green
     for the top bar and footer. Every pair below passes WCAG AA (4.5:1).
     --------------------------------------------------------------------- */
  --background: 0 0% 100%;
  --foreground: 152 45% 11%;          /* #102A1E near-black green */
  --card: 0 0% 100%;
  --card-foreground: 152 45% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 152 45% 11%;

  --primary: 146.21 60.95% 33.14%;    /* #21884E green - buttons, links (client colour, Sep 2026) */
  --primary-foreground: 0 0% 100%;
  --secondary: 157 60% 15%;           /* #0F3D2B dark green - top bar, footer */
  --secondary-foreground: 0 0% 100%;
  --accent: 96 42% 61%;               /* #93C572 pista - badges, highlights */
  --accent-foreground: 157 60% 15%;

  --muted: 94 44% 94%;                /* #EEF6E8 pista tint - section backgrounds */
  --muted-foreground: 150 14% 34%;    /* #4B6357 grey-green - secondary text */

  --destructive: 0 72% 51%;           /* #DC2626 */
  --destructive-foreground: 0 0% 100%;
  --success: 146.21 60.95% 33.14%;             /* same green as primary */
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;              /* #F59E0B amber - stays for warnings */
  --warning-foreground: 152 45% 11%;
  --info: 146.21 60.95% 33.14%;
  --info-foreground: 0 0% 100%;

  --border: 98 32% 85%;               /* #D5E5CC soft pista - every border */
  --input: 97 35% 90%;                /* #E3EEDC */
  --ring: 146.21 60.95% 33.14%;
  --radius: .5rem;

  /* redesign helpers */
  --pista: 96 42% 61%;                /* #93C572 */
  --pista-tint: 96 48% 86%;           /* #D7ECC9 */
  --btn-h: 42px;                      /* every button on the site */
  --section-y: 56px;                  /* space above/below each section */
  --section-y-mobile: 40px;
}
html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip
}
html {
  scroll-behavior: smooth
}
* {
  border-color: hsl(var(--border));
  box-sizing: border-box
}
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "rlig" 1, "calt" 1
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  letter-spacing: -.025em
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}
@keyframes bounce {
  0%,
  to {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(.8, 0, 1, 1)
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, .2, 1)
  }
}
@keyframes pulse {
  50% {
    opacity: .5
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}
@keyframes enter {
  0% {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
  }
}