/* ============================================================
   StackRx — Colors & Type
   Brand foundations distilled from the StackRx Style Guide.
   Palette: four sage greens. Display type: Gelasio (serif).
   Body/UI type: Hanken Grotesk (designer-added pairing — see README).
   ============================================================ */

/* --- Webfonts ---------------------------------------------------
   Gelasio (the brand typeface) is SELF-HOSTED from /fonts via the
   @font-face rules below — using the user-supplied .ttf files.
   Hanken Grotesk (paired UI/body sans — FLAGGED substitution) is
   loaded from Google Fonts; no brand file was supplied for it.
----------------------------------------------------------------- */
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-2.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-3.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-4.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-2.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-3.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-4.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-2.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-3.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-4.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-2.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-3.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;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-4.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;
}


/* Gelasio — self-hosted brand serif */
@font-face { font-family:'Gelasio'; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/Gelasio-Regular.woff2") format("woff2"); }
@font-face { font-family:'Gelasio'; font-weight:400; font-style:italic;  font-display:swap; src:url("/fonts/Gelasio-Italic.woff2") format("woff2"); }
@font-face { font-family:'Gelasio'; font-weight:500; font-style:normal; font-display:swap; src:url("/fonts/Gelasio-Medium.woff2") format("woff2"); }
@font-face { font-family:'Gelasio'; font-weight:500; font-style:italic;  font-display:swap; src:url("/fonts/Gelasio-MediumItalic.woff2") format("woff2"); }
@font-face { font-family:'Gelasio'; font-weight:600; font-style:normal; font-display:swap; src:url("/fonts/Gelasio-SemiBold.woff2") format("woff2"); }
@font-face { font-family:'Gelasio'; font-weight:600; font-style:italic;  font-display:swap; src:url("/fonts/Gelasio-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family:'Gelasio'; font-weight:700; font-style:normal; font-display:swap; src:url("/fonts/Gelasio-Bold.woff2") format("woff2"); }
@font-face { font-family:'Gelasio'; font-weight:700; font-style:italic;  font-display:swap; src:url("/fonts/Gelasio-BoldItalic.woff2") format("woff2"); }

:root {
  /* === Brand palette (verbatim from style guide) =============== */
  --stack-lightest: #DDEBCB; /* RGB 221 235 203 — pale leaf      */
  --stack-pale:      #D1DEC0; /* RGB 209 222 192 — soft sage      */
  --stack-sage:      #959F89; /* RGB 149 159 137 — sage / mid     */
  --stack-dark:      #343830; /* RGB 52 56 48   — charcoal green  */

  /* === Tints (guide calls out 60% & 20% tints over white) ====== */
  --stack-lightest-60: #E9F1DF;
  --stack-lightest-20: #F7FAF2;
  --stack-pale-60:     #E0E9D5;
  --stack-pale-20:     #F5F8F1;
  --stack-sage-60:     #BFC5B6;
  --stack-sage-20:     #EAECE6;
  --stack-dark-60:     #85887F;
  --stack-dark-20:     #D6D7D5;

  /* === Neutrals (warm, green-leaning grey scale) =============== */
  --paper:   #FBFCF9; /* app background — warm off-white         */
  --surface: #FFFFFF; /* card / panel surface                    */
  --line:    #E6E9E0; /* hairline borders                        */
  --line-strong: #D3D8C9;
  --mist:    #F2F4ED; /* subtle fill / hover ground              */

  /* === Semantic color tokens ================================== */
  --bg:            var(--paper);
  --fg1:           var(--stack-dark);   /* primary text          */
  --fg2:           #5C6157;             /* secondary text        */
  --fg3:           #878C7F;             /* muted / placeholder   */
  --brand:         var(--stack-sage);   /* primary brand action  */
  --brand-ink:     var(--stack-dark);   /* text on light brand   */
  --brand-strong:  #7E886F;             /* brand hover/pressed   */
  --accent-soft:   var(--stack-lightest);
  --on-dark:       #F4F7EE;             /* text on dark surfaces */

  /* === Status (kept within the muted, natural family) ========= */
  --ok:      #5F8A5A;
  --ok-bg:   #E7F0E2;
  --warn:    #B8862F;
  --warn-bg: #F6EDD8;
  --danger:  #B0584C;
  --danger-bg:#F4E2DE;
  --info:    #5B7E86;
  --info-bg: #E2EDEF;

  /* === Radii ================================================== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* === Shadows (soft, low, natural — never harsh) ============= */
  --shadow-xs: 0 1px 2px rgba(52,56,48,0.06);
  --shadow-sm: 0 2px 8px rgba(52,56,48,0.06), 0 1px 2px rgba(52,56,48,0.05);
  --shadow-md: 0 8px 24px rgba(52,56,48,0.08), 0 2px 6px rgba(52,56,48,0.05);
  --shadow-lg: 0 18px 48px rgba(52,56,48,0.12), 0 4px 12px rgba(52,56,48,0.06);

  /* === Spacing scale (4px base) =============================== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* === Type families ========================================== */
  --font-display: 'Gelasio', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* === Type scale (fluid-ish, px) ============================= */
  --t-display: 64px;
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 24px;
  --t-h4: 19px;
  --t-body: 16px;
  --t-small: 14px;
  --t-caption: 12px;
}

/* ============================================================
   Base element styling — opt in by using these classes, or
   apply to a scoped container. Mirrors the semantic tokens.
   ============================================================ */
.stx-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.stx-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.stx-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--fg1);
}
.stx-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--fg1);
}
.stx-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--fg1);
}
.stx-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg2);
}
.stx-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg2);
}
.stx-caption {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-caption);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg3);
}
.stx-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-strong);
}
.stx-mono {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  color: var(--fg1);
}