/* SimpleVisa — design tokens.
   Brand layer is shared across the marketing site and the admin app. */

/* JetBrains Mono ships from Google Fonts — Poppins is local. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Poppins 400 / 500 / 600 / 700, self-hosted from app/assets/fonts. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/poppins-regular-3ffb09f3.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/poppins-medium-aac684dd.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/poppins-semibold-8f59aac1.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/poppins-bold-72adf1e6.ttf") format("truetype");
}

:root {
  /* ---- Brand palette ---- */
  /* Source of truth: --color-simplevisa = #00EDA2 in tailwind.scss. */
  --sv-green: #00EDA2;
  --sv-green-rgb: 0, 237, 162; /* for rgba() tints of the accent */
  --sv-green-700: #00C087;     /* hover/active on solid CTAs */
  --sv-green-800: #00845C;     /* accent-coloured text on light */
  --sv-green-50: #E6FBF3;      /* soft success bg */
  --sv-noire: #1B1B1B;
  --sv-noire-80: rgba(27, 27, 27, 0.80);
  --sv-noire-60: rgba(27, 27, 27, 0.60);
  --sv-noire-30: rgba(27, 27, 27, 0.30);
  --sv-noire-12: rgba(27, 27, 27, 0.12);

  /* ---- Surfaces ---- */
  --sv-cream: #FAF7F2;
  --sv-paper: #FFFFFF;
  --sv-mist:  #F4F6F8;

  /* ---- Lines & text ---- */
  --sv-line: #DADFE6;
  --sv-line-soft: rgba(27, 27, 27, 0.12);
  --sv-text:    #1B1B1B;
  --sv-muted:   #5B6470;
  --sv-subtle:  #8A93A0;

  /* ---- Functional ---- */
  --sv-success: #00EDA2;
  --sv-success-bg: #E6FBF3;
  --sv-warning: #E89B2C;
  --sv-warning-bg: #FBEFD9;
  --sv-danger:  #D8413A;
  --sv-danger-bg:  #FBE6E5;
  --sv-info:    #2E6FE8;
  --sv-info-bg: #E2ECFC;

  /* ---- Type families ---- */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Type scale (size / line-height) ---- */
  --fs-display: 64px;   --lh-display: 68px;
  --fs-h1:      40px;   --lh-h1:      48px;
  --fs-h2:      32px;   --lh-h2:      40px;
  --fs-h3:      24px;   --lh-h3:      32px;
  --fs-h4:      20px;   --lh-h4:      28px;
  --fs-body:    16px;   --lh-body:    24px;
  --fs-small:   14px;   --lh-small:   20px;
  --fs-caption: 12px;   --lh-caption: 16px;

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

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(27, 27, 27, 0.06);
  --shadow-2: 0 4px 16px rgba(27, 27, 27, 0.08);
  --shadow-3: 0 12px 32px rgba(27, 27, 27, 0.14);
  --shadow-focus: 0 0 0 3px rgba(0, 179, 136, 0.32);
}

/* ---------- Type primitives ---------- */
.sv-display    { font: 700 var(--fs-display)/var(--lh-display) var(--font-sans); letter-spacing: -0.02em; color: var(--sv-text); }
.sv-h1         { font: 700 var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: -0.015em; color: var(--sv-text); }
.sv-h2         { font: 700 var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: -0.01em; color: var(--sv-text); }
.sv-h3         { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: -0.005em; color: var(--sv-text); }
.sv-h4         { font: 600 var(--fs-h4)/var(--lh-h4) var(--font-sans); color: var(--sv-text); }
.sv-body       { font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--sv-text); }
.sv-body-strong{ font: 600 var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--sv-text); }
.sv-small      { font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--sv-text); }
.sv-muted      { color: var(--sv-muted); }
.sv-caption    { font: 500 var(--fs-caption)/var(--lh-caption) var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sv-muted); }
.sv-mono       { font: 500 var(--fs-small)/var(--lh-small) var(--font-mono); color: var(--sv-text); }