/* ============================================================
   tokens.css — RekberPay Design Tokens
   DO NOT override these values in component files — use them via var().
   ============================================================ */

/* NOTE: the Inter + Plus Jakarta Sans @import was removed — the same family
   is loaded via the <link> in index.html (parallel, with preconnect), so the
   duplicate request here was render-blocking dead weight. */

:root {
   /* ── Brand Colors (CSS) ── */
   --color-brand: #2fce65;
   /* Primary green — buttons, accents */
   --color-brand-hover: #52d67e;
   /* Hover state for brand green */
   --color-brand-dark: #1e9b48;
   /* Pressed / dark variant */
   --color-brand-light: #eafaf0;
   /* Tint bg for badges, highlights */

   /* ── Greyscale (CSS) ── */
   --color-black: #101010;
   /* Primary text / dark backgrounds */
   --color-black-soft: #0e0e0e;
   /* Slightly darker for dark buttons */
   --color-grey-1: #363839;
   /* Dark hover bg */
   --color-grey-2: #525456;
   /* Secondary text */
   --color-grey-3: #6e7072;
   /* Tertiary / label text */
   --color-grey-4: #636669;
   /* Muted text — darkened from #888c8f for WCAG AA (≥4.5:1)
       on both #eef1ec page bg (~4.7:1) and #fff footer bg (~5.8:1) */
   --color-grey-5: #b2b5b6;
   /* Disabled text */
   --color-grey-6: #cfd1d2;
   /* Border color */
   --color-grey-7: #e2e4e4;
   /* Light border */
   --color-grey-8: #f4f5f5;
   /* Very light bg (section bg) */
   --color-white: #ffffff;

   /* ── Semantic Aliases ── */
   --color-bg-page: var(--color-white);
   --color-bg-subtle: var(--color-grey-8);
   --color-text-primary: var(--color-black);
   --color-text-body: var(--color-grey-2);
   --color-text-muted: var(--color-grey-4);
   --color-border: var(--color-grey-6);
   --color-border-light: var(--color-grey-7);

   /* ── Typography ── */
   /* Greenly uses proprietary PangeaMedium/Bold. We use Plus Jakarta Sans */
   --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Inter', system-ui, -apple-system, sans-serif;

   /* ── Font Weights ── */
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
   --fw-extrabold: 800;

   /* ── Type Scale (from @media tokens) ── */
   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 2rem;
   /* 32px */
   --text-4xl: 2.25rem;
   /* 36px */
   --text-5xl: 3rem;
   /* 48px */

   /* ── Line Heights ── */
   --lh-tight: 1.2;
   --lh-snug: 1.35;
   --lh-normal: 1.5;

   /* ── Spacing ── */
   --space-1: 0.25rem;
   /* 4px */
   --space-2: 0.5rem;
   /* 8px */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-10: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-14: 3.5rem;
   /* 56px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-32: 8rem;
   /* 128px */
   --space-40: 10rem;
   /* 160px */

   /* ── Border Radius (from CSS) ── */
   --radius-sm: 6px;
   /* Small tags, dropdowns */
   --radius-md: 8px;
   /* Buttons, inputs, small cards */
   --radius-lg: 14px;
   /* Feature cards */
   --radius-xl: 16px;
   /* Video box, large cards */
   --radius-2xl: 24px;
   /* Section backgrounds (rounded sections) */
   --radius-full: 9999px;
   /* Pills, avatar circles */

   /* ── Shadows ── */
   --shadow-sm: 0 1px 2px rgba(16, 16, 16, 0.05);
   --shadow-md: 0 4px 12px rgba(16, 16, 16, 0.08);
   --shadow-lg: 0 10px 30px rgba(16, 16, 16, 0.12);
   --shadow-xl: 0 20px 40px rgba(16, 16, 16, 0.16);

   /* ── Transitions ── */
   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;
   --transition-slow: 500ms cubic-bezier(0.33, 3.2, 0.515, 1);

   /* ── Layout ── */
   --container-max: 1240px;
   --container-pad: 1.5rem;
   /* 24px side gutters */
   --navbar-height: 80px;
   --navbar-height-mobile: 58px;
}