/*
 * INT design tokens — aligned to the live INT CMS inner pages
 * (public/assets/theme.css?v=3 from the CMS, copied as-is into this app).
 * Token names are stable across the app; values come from theme.css so there
 * is one palette, not two.
 *
 * Breakpoints used by theme.css and the components: 920px (grid collapse),
 * 991px (nav collapse), 479px (small phones).
 */
:root {
  /* colors — theme.css :root */
  --int-color-black: #0a0c10;        /* --bg / --dark: page background */
  --int-color-black-lite: #0a0c10;   /* footer background (theme .footer) */
  --int-color-dark: #0d0f14;         /* accent ink, deepest background */
  --int-color-white: #f4f5f7;        /* --ink: primary text */
  --int-color-green: #c8ff3d;        /* --accent: primary CTA and accent */
  --int-color-purple: #8b93a1;       /* secondary text (muted) */
  --int-color-yellow: #c8ff3d;       /* accent (same as primary; no second accent in the CMS) */
  --int-color-grey: #8b93a1;         /* --muted */
  --int-color-onyx: #393939;
  --int-color-stroke: rgba(255, 255, 255, .10); /* --line */
  --int-color-blue-shade: #15181f;   /* --dark-2 */
  --int-color-chinese-black: #13161d; /* --surface */
  --int-color-dark-blue: #12151c;    /* --bg-2 */
  --int-color-davy-s-grey: #575757;
  --int-color-dim-gray: #8b93a1;
  --int-color-granite-gray: #595959;
  --int-color-light-silver: #cfd4dd;
  --int-color-raisin-black: #1a1e26; /* --surface-2 */
  --int-color-rich-gray: #15181f;
  --int-color-shiny-black: #1a1e26;
  --int-color-red: #9b1c1c;
  --int-color-transparent: #0000;

  /* text and surfaces — theme.css */
  --int-color-ink-2: #c2c8d2;        /* --ink-2 */
  --int-color-on-dark-mut: #9aa1ad;  /* --on-dark-mut */
  --int-color-surface: #13161d;      /* --surface */
  --int-color-surface-2: #1a1e26;    /* --surface-2 */

  /* feedback — theme.css quote-form error colors */
  --int-color-error-bg: #fde8e8;
  --int-color-error-border: #f5b5b5;
  --int-color-error-ink: #9b1c1c;

  /* typography — theme.css body / h1-h3 / .lead */
  --int-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Tajawal, sans-serif;
  --int-font-heading: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Tajawal, sans-serif;
  --int-font-arabic: Tajawal, Inter, system-ui, sans-serif;

  --int-font-weight-normal: 400;
  --int-font-weight-medium: 500;
  --int-font-weight-semibold: 600;
  --int-font-weight-bold: 700;

  --int-h1-size: clamp(40px, 6.5vw, 80px); --int-h1-line: 1.08;
  --int-h2-size: clamp(30px, 4.2vw, 52px); --int-h2-line: 1.08;
  --int-h3-size: 22px;                     --int-h3-line: 1.08;
  --int-h4-size: clamp(20px, 2.4vw, 26px); --int-h4-line: 1.2;
  --int-h5-size: 18px;                     --int-h5-line: 1.3;
  --int-h6-size: 16px;                     --int-h6-line: 1.4;
  --int-p1-size: clamp(17px, 2vw, 21px);   /* .lead */
  --int-p2-size: 17px;
  --int-p3-size: 16px;                     /* body, line-height 1.6 */
  --int-p4-size: 14px;

  --int-letter-spacing-s: -.02em;
  --int-letter-spacing-m: -.02em;
  --int-letter-spacing-l: -.02em;
  --int-letter-spacing-xl: -.03em;

  /* spacing — unchanged scale, used by every component */
  --int-space-xxxs: 2px;  --int-space-xxs: 4px;  --int-space-xs: 6px;
  --int-space-s: 8px;     --int-space-m: 10px;   --int-space-l: 12px;
  --int-space-xl: 14px;   --int-space-xxl: 16px; --int-space-xxxl: 20px;
  --int-space-4xl: 24px;  --int-space-5xl: 28px; --int-space-6xl: 32px;
  --int-space-7xl: 40px;  --int-space-8xl: 48px; --int-space-9xl: 60px;
  --int-space-10xl: 80px; --int-space-11xl: 100px;

  /* radius — theme.css: cards 18px, large panels 28px, inputs 12px, buttons pill */
  --int-radius-xxxs: 2px; --int-radius-xxs: 4px; --int-radius-xs: 6px;
  --int-radius-s: 12px;   --int-radius-m: 10px;  --int-radius-l: 18px;
  --int-radius-xl: 18px;  --int-radius-xxl: 18px;
  --int-radius-4xl: 24px; --int-radius-5xl: 28px; --int-radius-6xl: 28px;
  --int-radius-7xl: 28px; --int-radius-8xl: 999px; /* pill */

  /* shadows — theme.css --shadow */
  --int-shadow-soft: 0 1px 3px #0000001a, 0 0 0 1px #0000001a;
  --int-shadow-lifted: 0 24px 60px -30px rgba(0, 0, 0, .6);

  /* motion — theme.css transitions */
  --int-motion-fast: .15s;
  --int-motion-base: .2s;
  --int-motion-slow: .2s;
}