/* Design tokens for Software Farm.
   Update values here to theme the entire site. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Colours */
  --color-bg: #f9fafb;             /* softer, cleaner page background */
  --color-surface: #ffffff;        /* cards, header, footer */
  --color-surface-muted: #f4f7f5;  /* subtle warm neutral for panels */
  --color-border: #e5e7eb;         /* light borders */
  --color-border-strong: #cbd5e1;  /* stronger borders */
  --color-text: #0f172a;           /* main text */
  --color-text-muted: #4b5563;     /* secondary text */

  --color-accent: #15803d;         /* main accent (green) */
  --color-accent-soft: #dcfce7;    /* pale accent background */
  --color-accent-strong: #166534;  /* darker accent for hover/focus */

  --color-band-soft: #f1f5f9;      /* very light band background */
  --color-band-strong: #022c22;    /* deep green band background */
  --color-danger: #b91c1c;         /* for error text/messages if needed */

  /* Layout */
  --page-max-width: 1120px;        /* between 1080 and 1200 as agreed */
  --page-padding-inline: 1rem;     /* default horizontal padding */
  --navbar-height: 68px;           /* fixed header height */

  /* Typography */
  --font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.7;

  --font-size-h1: 2.7rem;          /* bolder hero headings */
  --font-size-h2: 2rem;
  --font-size-h3: 1.3rem;

  /* Spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;              /* 4px */
  --space-2: 0.5rem;               /* 8px */
  --space-3: 0.75rem;              /* 12px */
  --space-4: 1rem;                 /* 16px */
  --space-5: 1.5rem;               /* 24px */
  --space-6: 2rem;                 /* 32px */
  --space-7: 2.5rem;               /* 40px */
  --space-8: 3rem;                 /* 48px */
  --space-9: 3.5rem;               /* 56px */

  /* Border radius */
  --radius-sm: 0.5rem;             /* 8px */
  --radius-md: 0.9rem;             /* 14–15px, cards/buttons */
  --radius-full: 9999px;           /* pills */

  /* Shadows (very subtle) */
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-card-strong: 0 10px 30px rgba(15, 23, 42, 0.08);

  /* Breakpoints */
  --bp-small: 600px;
  --bp-medium: 768px;
  --bp-large: 1024px;
}

/* Small screens: tighter padding */
@media (max-width: 600px) {
  :root {
    --page-padding-inline: 0.75rem;
  }
}