/* =============================================================================
   Ingolo Hosting HostBill theme | css/variables.css
   PURPOSE: Design tokens (colour, radius, shadow, spacing, type, layout) and the Inter @font-face rules.
   WHERE USED: Loaded first on every page by header.shared.tpl; every other theme CSS file reads these custom properties.
   DEPENDENCIES: fonts/Inter-*.woff2.
   SAFE EDITS: Change token values (keep names). Brand colours: primary #2097CE, primary-strong #1B8FD1, ink #0B1822, body #233642, muted #586F7F, border #D9E3E9.
   TEST AFTER EDITING: Text contrast of body/muted text on white and surface (WCAG AA 4.5:1), button colours, focus ring visibility.
   SCOPE: storefront rules are prefixed with .ig (set on the header/footer chrome and
          <main> of store pages) so they never restyle HostBill's own client-area markup.
   ============================================================================= */

/* Inter, self-hosted (fonts/LICENSE.txt, SIL Open Font License 1.1). No third-party font requests. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Inter-ExtraBold.woff2") format("woff2"); }

:root {
  /* Colour */
  --color-primary: #2097CE;
  --color-primary-strong: #1B8FD1;
  --color-primary-soft: #E8F4FB;
  --color-ink: #0B1822;
  --color-ink-2: #142734;
  --color-body: #233642;
  --color-muted: #586F7F;
  --color-border: #D9E3E9;
  --color-surface: #F4F8FA;
  --color-surface-2: #EEF4F7;
  --color-white: #FFFFFF;
  --color-success: #2d8468;
  --color-success-soft: #E4F3EC;
  --color-warning: #d98a1f;
  --color-warning-soft: #FFF4DF;
  --color-danger: #b54747;
  --color-danger-soft: #FBEAEA;
  --color-link: #1B8FD1;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #B9C9D3;

  /* Radius */
  --radius-sm: 8px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 8px 28px rgba(20, 46, 62, 0.04);
  --shadow-raised: 0 18px 50px rgba(11, 24, 34, 0.10);
  --shadow-glow: 0 10px 24px rgba(32, 151, 206, 0.22);

  /* Spacing (8px scale) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);   /* up to ~80px desktop */
  --fs-h2: clamp(2rem, 1.4rem + 2vw, 3rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --lh-body: 1.6;
  --lh-tight: 1.1;
  --track-heading: -0.03em;
  --track-eyebrow: 0.16em;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}