@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ROGUE METRIC UI kit v1. Shared by the landing page and /ui-kit/. */
:root {
  --font-sans: 'Manrope', Arial, sans-serif;
  --font-display: clamp(2.5rem, 1.3rem + 5.1vw, 6rem);
  --font-section: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  --font-card: 1.5rem;
  --font-body: 1rem;
  --font-ui: .875rem;
  --font-caption: .75rem;
  --font-price: 3.5rem;

  --type-display: 800 var(--font-display)/1.08 var(--font-sans);
  --type-section: 800 var(--font-section)/1.14 var(--font-sans);
  --type-card: 700 var(--font-card)/1.3 var(--font-sans);
  --type-body: 400 var(--font-body)/1.65 var(--font-sans);
  --type-ui: 600 var(--font-ui)/1.55 var(--font-sans);
  --type-caption: 600 var(--font-caption)/1.5 var(--font-sans);
  --type-price: 800 var(--font-price)/1.1 var(--font-sans);

  --color-paper: #f4f5ed;
  --color-white: #ffffff;
  --color-ink: #11140f;
  --color-muted: #505748;
  --color-excluded: #62695e;
  --color-line: #d4d7cc;
  --color-soft: #e8ebdf;
  --color-orange: #ff6035;
  --color-pink: #efa2d5;
  --color-pink-soft: #fceaf5;
  --color-lime: #d9ff50;
  --color-meta: #0866ff;
  --color-google: #ffe27b;
  --color-dark: #141713;
  --color-dark-inset: #292d26;
  --color-on-dark: #f9faf4;
  --color-muted-on-dark: #d1d6ca;
  --color-excluded-on-dark: #b8c0ad;
  --color-line-on-dark: #42483b;
  --color-error: #b73220;
  --color-focus: #0866ff;

  /* Contextual roles. Dark and coloured components redefine these together. */
  --surface: var(--color-paper);
  --text: var(--color-ink);
  --text-secondary: var(--color-muted);
  --text-excluded: var(--color-excluded);
  --border: var(--color-line);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-sm: .75rem;
  --radius-card: 1.5rem;
  --radius-pill: 999px;
  --layout-width: 1440px;
  --layout-gutter: clamp(1.25rem, 4vw, 4rem);
  --section-space: var(--space-9);
  --header-height: 88px;
  --motion-fast: 180ms;
  --motion-base: 300ms;
  --motion-ease: cubic-bezier(.2, .7, .3, 1);
}

@media (max-width: 700px) {
  :root {
    --font-display: clamp(2.5rem, 8.6vw, 3.5rem);
    --font-section: clamp(2rem, 6.5vw, 2.5rem);
    --section-space: var(--space-8);
    --header-height: calc(76px + env(safe-area-inset-top, 0px));
  }
}