/* ===========================================================================
   AXIS · Fonts
   Greenhouse uses exactly two families: Poppins (display) + Geist (everything).
   Loaded from Google Fonts. If you need offline/embedded binaries, swap these
   @import lines for local @font-face rules pointing at hosted .woff2 files.
   =========================================================================== */

/* ===========================================================================
   AXIS · Color tokens
   Source of truth: greenhouse-eo/DESIGN.md front-matter (mirror of the live MUI
   theme). Greenhouse is built on bright neutral surfaces, deep structural blues,
   and one strong accent at a time. Core Blue is the default product energy;
   green/amber/crimson are controlled signals, never a rainbow.
   =========================================================================== */

.gh-content-module {
  /* --- Brand · Efeonce / Greenhouse logo colors ------------------------- */
  --brand-navy: #004070;        /* Efeonce institutional wordmark + "house" */
  --brand-green: #6ec207;       /* Greenhouse leaf / "green" + isotype accent */
  --brand-green-deep: #4b8405;  /* AA-legible green for text/fills */

  /* --- Primary · Core Blue (canonical CTA + active state) --------------- */
  --primary: #0375db;
  --primary-light: #3691e3;
  --primary-dark: #024c8f;
  --primary-tonal: #d7e9f9;     /* soft fill behind dark text */
  --on-primary: #ffffff;

  /* --- Secondary · AXIS green (structural / intentional action) --------- */
  --secondary: #4b8405;         /* secondary-700 — crisp, AA on white (4.56:1) */
  --secondary-light: #6ec207;   /* secondary-500 — bright lime, TINT/accent only */
  --secondary-dark: #396504;    /* secondary-800 — hover / active */
  --on-secondary: #ffffff;

  /* --- Info ------------------------------------------------------------- */
  --info: #1f6fd4;
  --on-info: #ffffff;

  /* --- Semantic · feedback (semantic only, never decorative) ------------ */
  --success: #157f47;           /* AA on white 5.05:1 */
  --warning: #ffb703;           /* uses DARK ink — white fails AA on amber */
  --error: #dc2e39;             /* AA on white 4.6:1 */
  --on-success: #ffffff;
  --on-warning: #2f2b3d;
  --on-error: #ffffff;

  /* Tonal feedback (soft surface + AA ink — the default chip/alert look).
     NEVER use the solid --warning/--error as a TEXT color; use the ink. */
  --success-tonal: #e3f3ea;
  --success-ink: #0f6b3b;
  --warning-tonal: #fff4d6;
  --warning-ink: #8a5a00;
  --error-tonal: #fbe1e3;
  --error-ink: #b71f29;
  --info-tonal: #e0edfb;
  --info-ink: #1a5cae;

  /* --- Neutrals · light mode (AXIS) ------------------------------------- */
  --neutral: #f8f7fa;           /* app-shell body background */
  --surface: #ffffff;           /* card / paper */
  --surface-alt: #fafafa;       /* quiet inset / striped row */
  --text-primary: #2f2b3d;      /* ink */
  --text-secondary: #6b6876;    /* secondary copy / metadata */
  --text-disabled: #a7a5ae;     /* disabled — also the brand slogan grey #848484 family */
  --border-subtle: #dbdbdb;     /* 1px card border + dividers */
  --border-strong: #c4c3cc;

  /* --- Neutrals · dark mode (AXIS) -------------------------------------- */
  --background-dark: #25293c;   /* dark app-shell body */
  --surface-dark: #2f3349;      /* dark paper */
  --text-primary-dark: #e1def5;
  --text-secondary-dark: #acabc1;
  --border-dark: #44485e;

  /* --- Data-storytelling semaphore (KPI health — distinct from UI feedback)
     Per UX_WRITING_RESEARCH §15. Pair color with icon + text, never color alone. */
  --semaphore-optimal: #6ec207;
  --semaphore-attention: #ff6500;
  --semaphore-critical: #bb1954;

  /* --- Chart series · "Deep-bright" categorical (self-contained, NOT brand)
     A chart series must never be mistaken for a UI status color. */
  --chart-1: #5145e0;  /* indigo */
  --chart-2: #1fba85;  /* verde */
  --chart-3: #fb7a00;  /* naranja */
  --chart-4: #d633c9;  /* magenta */
  --chart-5: #3cc9f0;  /* cian */
  --chart-6: #9be036;  /* lima */
  /* directional (finance / deltas) */
  --chart-positive: #3dba5d;
  --chart-caution: #f0a526;
  --chart-negative: #ff4d49;
  --chart-neutral: #94a3b8;

  /* === Semantic aliases (consume these in product UI) ==================== */
  --app-bg: var(--neutral);
  --surface-card: var(--surface);
  --surface-sunken: var(--surface-alt);
  --text-body: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-link: var(--primary);
  --action-primary: var(--primary);
  --action-primary-hover: var(--primary-dark);
  --focus-ring: var(--primary);
  --divider: var(--border-subtle);
}

/* ===========================================================================
   AXIS · Typography tokens
   Two active families only: Poppins for controlled display moments, Geist for
   everything else (body, tables, forms, chips, buttons, IDs, KPI values).
   Numeric runs use Geist with tabular-nums — never a monospace family.
   Sizes are rem (scale with the user's font-size preference; WCAG 1.4.4).
   Weight roles: 400 body · 600 labels/titles/buttons · 700 strong · 800 display/KPI.
   =========================================================================== */

.gh-content-module {
  /* --- Families -------------------------------------------------------- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-numeric: "Geist", system-ui, sans-serif; /* with font-feature-settings "tnum" 1 */

  /* --- Weight roles ---------------------------------------------------- */
  --fw-regular: 400;     /* @kind font */
  --fw-semibold: 600;    /* @kind font */
  --fw-bold: 700;        /* @kind font */
  --fw-extrabold: 800;   /* @kind font */
  --fw-black: 900;       /* @kind font */ /* brand slogan only */

  /* --- Display scale · Poppins (controlled moments only) --------------- */
  --type-headline-display-size: 2rem;       --type-headline-display-weight: 800; --type-headline-display-lh: 1.25;
  --type-headline-lg-size: 1.5rem;          --type-headline-lg-weight: 700;      --type-headline-lg-lh: 1.25;
  --type-headline-md-size: 1.25rem;         --type-headline-md-weight: 600;      --type-headline-md-lh: 1.25;
  --type-page-title-size: 1.25rem;          --type-page-title-weight: 600;       --type-page-title-lh: 1.4;
  --type-surface-hero-size: 2.125rem;       --type-surface-hero-weight: 600;     --type-surface-hero-lh: 1.15;
  --type-surface-hero-size-mobile: 1.75rem;

  /* --- Text scale · Geist --------------------------------------------- */
  --type-section-title-size: 1rem;          --type-section-title-weight: 600;    --type-section-title-lh: 1.5;
  --type-label-lg-size: 1rem;               --type-label-lg-weight: 600;
  --type-label-md-size: 0.875rem;           --type-label-md-weight: 600;         --type-label-md-lh: 1.5;
  --type-label-sm-size: 0.8125rem;          --type-label-sm-weight: 600;
  --type-body-lg-size: 1rem;                --type-body-lg-weight: 400;          --type-body-lg-lh: 1.5;
  --type-body-md-size: 0.875rem;            --type-body-md-weight: 400;          --type-body-md-lh: 1.5;
  --type-body-sm-size: 0.8125rem;           --type-body-sm-weight: 400;          --type-body-sm-lh: 1.45; --type-body-sm-ls: 0.03em;
  --type-disclosure-size: 0.75rem;          --type-disclosure-weight: 400;       --type-disclosure-lh: 1.45; --type-disclosure-ls: 0.03em;
  --type-overline-size: 0.75rem;            --type-overline-weight: 600;         --type-overline-lh: 1.167; --type-overline-ls: 0.08em;

  /* --- Numeric (Geist + tabular-nums) --------------------------------- */
  --type-numeric-id-size: 0.875rem;         --type-numeric-id-weight: 600;       --type-numeric-id-ls: 0.01em;
  --type-numeric-amount-size: 0.8125rem;    --type-numeric-amount-weight: 700;
  --type-kpi-size: 1.75rem;                 --type-kpi-weight: 800;              --type-kpi-lh: 1.05;
}

/* --- Optional helper classes (foundations specimens / quick prototypes) --- */
.gh-content-module .t-headline-display { font-family: var(--font-display); font-size: var(--type-headline-display-size); font-weight: var(--type-headline-display-weight); line-height: var(--type-headline-display-lh); color: var(--text-primary); }
.gh-content-module .t-headline-lg { font-family: var(--font-display); font-size: var(--type-headline-lg-size); font-weight: var(--type-headline-lg-weight); line-height: var(--type-headline-lg-lh); color: var(--text-primary); }
.gh-content-module .t-page-title { font-family: var(--font-display); font-size: var(--type-page-title-size); font-weight: var(--type-page-title-weight); line-height: var(--type-page-title-lh); color: var(--text-primary); }
.gh-content-module .t-surface-hero { font-family: var(--font-display); font-size: var(--type-surface-hero-size); font-weight: var(--type-surface-hero-weight); line-height: var(--type-surface-hero-lh); color: var(--text-primary); }
.gh-content-module .t-section-title { font-family: var(--font-sans); font-size: var(--type-section-title-size); font-weight: var(--type-section-title-weight); line-height: var(--type-section-title-lh); color: var(--text-primary); }
.gh-content-module .t-.gh-content-module-lg { font-family: var(--font-sans); font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-lh); color: var(--text-primary); }
.gh-content-module .t-.gh-content-module-md { font-family: var(--font-sans); font-size: var(--type-body-md-size); font-weight: var(--type-body-md-weight); line-height: var(--type-body-md-lh); color: var(--text-primary); }
.gh-content-module .t-.gh-content-module-sm { font-family: var(--font-sans); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); letter-spacing: var(--type-body-sm-ls); color: var(--text-secondary); }
.gh-content-module .t-overline { font-family: var(--font-sans); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); line-height: var(--type-overline-lh); letter-spacing: var(--type-overline-ls); text-transform: uppercase; color: var(--text-secondary); }
.gh-content-module .t-kpi { font-family: var(--font-numeric); font-size: var(--type-kpi-size); font-weight: var(--type-kpi-weight); line-height: var(--type-kpi-lh); font-feature-settings: "tnum" 1; color: var(--text-primary); }
.gh-content-module .t-numeric { font-family: var(--font-numeric); font-feature-settings: "tnum" 1; }

/* ===========================================================================
   AXIS · Spacing, radius, elevation & motion tokens
   Greenhouse favors predictable spacing and strong rhythm over visual tricks.
   Spacing step = 4px · N. Radius is moderate and systematic. Depth is restrained
   and semantic: two soft shadow layers + a 1px hairline, never a heavy drop.
   =========================================================================== */

.gh-content-module {
  /* --- Spacing (theme.spacing(N) = 4N px) ------------------------------ */
  --space-xs: 4px;
  --space-sm: 8px;     /* compact inline gap */
  --space-md: 16px;    /* standard inner spacing step */
  --space-lg: 24px;    /* default card padding + container rhythm */
  --space-xl: 32px;
  --space-xxl: 40px;   /* larger section breathing room */

  /* --- Radius ---------------------------------------------------------- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;    /* DEFAULT — cards, fields, chips, common surfaces */
  --radius-lg: 8px;    /* floating / high-emphasis — docks, dialogs */
  --radius-xl: 10px;   /* larger panels & previews */
  --radius-xxl: 12px;  /* large support / editorial surfaces */
  --radius-display: 16px;
  --radius-full: 9999px; /* pills / capsules (true circle = 50%) */

  /* --- Elevation · semantic roles (two soft layers + 1px hairline) ------
     No role exceeds 0 8px 24px rgba(0,0,0,.1). The border carries separation
     under forced-colors; the shadow is the enhancement. */
  --elevation-none: none;
  --elevation-raised:  0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.06);
  --elevation-floating: 0 2px 6px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.08);
  --elevation-overlay:  0 4px 10px rgba(16, 24, 40, 0.07), 0 8px 24px rgba(16, 24, 40, 0.10);
  --elevation-modal:    0 4px 12px rgba(16, 24, 40, 0.08), 0 8px 24px rgba(16, 24, 40, 0.10);

  /* --- Borders / hairlines (px — must not scale with font) ------------- */
  --hairline: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* --- Motion (ms, fixed scale) --------------------------------------- */
  --motion-instant: 75ms;    /* @kind other */
  --motion-short: 150ms;     /* @kind other */
  --motion-standard: 200ms;  /* @kind other */
  --motion-medium: 300ms;    /* @kind other */
  --motion-long: 400ms;      /* @kind other */
  --motion-extended: 600ms;  /* @kind other */

  /* Easing — never ease-in-out as default */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);      /* @kind other */ /* default */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); /* @kind other */ /* exits */
  --ease-linear: linear;                              /* @kind other */
}

  .gh-content-module { scroll-behavior: smooth; scroll-padding-top: 84px; }
  .gh-content-module { margin:0; background:var(--app-bg); color:var(--text-body); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
  .gh-content-module * { box-sizing:border-box; }
  .gh-content-module a { color:var(--text-link); text-decoration:none; }
  .gh-content-module a:hover { color:var(--primary-dark); text-decoration:underline; }
  .gh-content-module summary::-webkit-details-marker { display:none; }
  .gh-content-module :focus-visible { outline:3px solid var(--primary); outline-offset:3px; border-radius:4px; }
  @media (prefers-reduced-motion: reduce) {
    .gh-content-module { scroll-behavior:auto; }
    .gh-content-module * { transition-duration:1ms !important; animation-duration:1ms !important; }
  }

.gh-content-module .cm-hover-1:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 14px 34px rgba(155,224,54,.36);color:#0f2000;text-decoration:none}
.gh-content-module .cm-hover-2:is(:hover,:focus-visible){background:rgba(255,255,255,.09);color:#ffffff;text-decoration:none}
.gh-content-module .cm-hover-3:is(:hover,:focus-visible){transform:translateY(-3px);border-color:var(--border-strong);text-decoration:none;color:var(--text-primary)}