/* =====================================================================
   SIMPLIA DESIGN TOKENS
   ---------------------------------------------------------------------
   Colours, type and spacing for every Simplia app. Values come from
   simpliaboutique.com. Customer-specific overrides (accent colour) are
   applied at runtime from config/tenant.js; nothing here is customer
   specific.
   ===================================================================== */

/* === SECTION: FONTS === */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
/* === /SECTION: FONTS === */

/* === SECTION: COLOUR TOKENS === */
:root {
  /* Simplia brand */
  --bg: #0c2e30;
  --bg-alt: #0f3638;
  --circle: #1e4445;
  --coral: #e56f49;
  --coral-hover: #ef7f5b;
  --coral-deep: #b4491f;
  --cream: #f4f1e8;
  --card: #cdd9d5;
  --ink: #0c2e30;
  --sub: #456260;
  --muted: #a9bdb9;
  --line: #1f4a4a;
  --white: #ffffff;

  /* Accent used by buttons and highlights (tenant can override) */
  --accent: var(--coral);
  --accent-hover: var(--coral-hover);
  --accent-ink: var(--ink);

  /* Light surfaces (forms, tables) */
  --surface: var(--cream);
  --surface-2: #e9e5d8;
  --surface-line: #d8d3c3;
  --surface-ink: var(--ink);
  --surface-sub: var(--sub);

  /* Status colours: on light surfaces */
  --ok: #23704b;
  --ok-soft: #d6eadc;
  --warn: #8a5a00;
  --warn-soft: #f6e5bf;
  --bad: #a8321a;
  --bad-soft: #f6d6cb;
  --info: #1d5f73;
  --info-soft: #d3e6ea;

  /* Status colours: on the dark background */
  --ok-dark: #84d3a6;
  --warn-dark: #f2c46b;
  --bad-dark: #ff9a7c;

  --focus: #ffd38a;
}
/* === /SECTION: COLOUR TOKENS === */

/* === SECTION: TYPE AND SPACE TOKENS === */
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: clamp(26px, 4vw, 34px);
  --fs-3xl: clamp(32px, 5.5vw, 52px);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.14);
  --shadow-2: 0 10px 40px rgba(0, 0, 0, 0.35);

  --header-h: 64px;
  --nav-h: 68px;
  --rail-w: 232px;
  --content-max: 1180px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}
/* === /SECTION: TYPE AND SPACE TOKENS === */