/*
 * Finotop design tokens.
 * Every colour, size, space, radius and shadow used on the site is defined here.
 */

:root {
  /* ---------- Colour: neutrals ---------- */
  --color-ink-900: #0b1b2b;
  --color-ink-700: #2c3e50;
  --color-ink-500: #52606d;
  --color-ink-300: #9aa5b1;
  --color-bg: #f7f8f6;
  --color-bg-alt: #eef3f0;
  --color-surface: #ffffff;
  --color-border: #e1e6e3;
  --color-border-strong: #c9d2cd;
  --color-input-border: #86938d;

  /* ---------- Colour: brand ---------- */
  --color-primary: #0f6e5c;
  --color-primary-hover: #0a5a4b;
  --color-primary-soft: #e3f1ec;
  --color-primary-contrast: #ffffff;
  --color-accent: #855b1a;
  --color-accent-soft: #f6eedf;

  /* ---------- Colour: semantic ---------- */
  --color-text: var(--color-ink-700);
  --color-heading: var(--color-ink-900);
  --color-muted: var(--color-ink-500);
  --color-positive: #17704a;
  --color-positive-soft: #e2f3ea;
  --color-negative: #a8322a;
  --color-negative-soft: #fbeae8;
  --color-focus: #1d6fd6;

  /* ---------- Colour: dark sections ---------- */
  --color-dark: #0b1b2b;
  --color-dark-raised: #13283b;
  --color-dark-border: #24394d;
  --color-on-dark: #e6ecf0;
  --color-on-dark-muted: #a9b7c3;

  /* ---------- Colour: WhatsApp-style mockup ---------- */
  --color-chat-bg: #efe9e1;
  --color-chat-header: #1f5c50;
  --color-chat-bubble: #ffffff;

  /* ---------- Colour: allocation chart ---------- */
  --color-chart-1: #0f6e5c;
  --color-chart-2: #4d9a86;
  --color-chart-3: #9ac7b9;
  --color-chart-4: #c79a4b;
  --color-chart-5: #5b7aa0;
  --color-chart-6: #b9c3cc;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --section-space: clamp(4rem, 2.8rem + 5vw, 7rem);

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(11, 27, 43, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 27, 43, 0.06), 0 1px 2px rgba(11, 27, 43, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(11, 27, 43, 0.08), 0 2px 4px rgba(11, 27, 43, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(11, 27, 43, 0.16), 0 4px 10px rgba(11, 27, 43, 0.05);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-gutter: clamp(1rem, 4vw, 2rem);
  --header-height: 4rem;

  /*
   * Breakpoints (mobile-first, used as min-width in responsive.css).
   * Custom properties cannot be used inside @media queries, so these
   * values are the reference that responsive.css mirrors.
   */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- Motion ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}