/* CleverMobi design tokens. Source: Figma "CleverGroup - Design", frame Home 2459:5028.
   Names follow the Figma variables (Brand → Mid = --color-brand-mid). See var/tmp/figma/tokens.md. */

@font-face { font-family: "PST Mail Sans"; src: url("../fonts/PSTMailSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* The Bold webfont places the baseline 0.1em lower than the PST Mail Sans Bold that Figma uses
   (measured on the Home export). These overrides move the line gap below the baseline, as Figma does. */
@font-face { font-family: "PST Mail Sans"; src: url("../fonts/PSTMailSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 114.7%; descent-override: 58.84%; line-gap-override: 0%; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/MonaSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Monaspace Neon"; src: url("../fonts/MonaspaceNeon-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Monaspace Neon"; src: url("../fonts/MonaspaceNeon-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fuzzy Bubbles"; src: url("../fonts/FuzzyBubbles-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Colour: brand */
  --color-brand-deep: #0d271c;
  --color-brand-dark: #007319;
  --color-brand-mid: #5ea306;
  --color-brand-light: #a5ce01;
  --color-brand-pale: #f3f7e4;
  --color-brand-gradient-end: #8fc302;

  /* Colour: foreground */
  --color-fg-primary: #141414;
  --color-fg-secondary: #3e403d;
  --color-fg-tertiary: #5e615c;
  --color-fg-heading-news: #041a11;
  --color-white: #ffffff;
  --color-white-secondary: rgba(255, 255, 255, 0.83); /* Figma: 0.8; 0.83 reaches WCAG AA 4.5:1 on Brand → Dark */
  --color-black: #000000;

  /* Colour: background */
  --color-bg-base: #ffffff;
  --color-bg-accent: #eaede8;
  --color-bg-image: #e9ede6;
  --color-device-ring: rgba(20, 20, 20, 0.3);
  --color-surface-dark: #141414;
  --color-white-border: rgba(255, 255, 255, 0.2);
  --color-white-hover: rgba(255, 255, 255, 0.1);

  /* Colour: code tile */
  --color-code-text: #f3f7e4;
  --color-code-var: #72ff99;
  --color-code-cmd: #fcff57;

  /* Gradients (angle per element, see components.css) */
  --gradient-brand-stops: var(--color-brand-mid) 0%, var(--color-brand-gradient-end) 100%;
  --gradient-brand-light-stops: var(--color-brand-mid) 0%, var(--color-brand-light) 93.563%;

  /* Typography: families */
  --font-display: "PST Mail Sans", "Mona Sans", system-ui, sans-serif;
  --font-body: "Mona Sans", system-ui, sans-serif;
  --font-mono: "Monaspace Neon", ui-monospace, "SFMono-Regular", monospace;
  --font-hand: "Fuzzy Bubbles", "Comic Sans MS", cursive;
  --font-features-display: "liga" 0;
  --font-features-body: "ss01" 1, "liga" 0;

  /* Typography: sizes (desktop values; fluid where the design scales) */
  --text-hero: clamp(2.75rem, 1.2rem + 4.4vw, 5rem);          /* 80 */
  --text-title: clamp(2rem, 1.2rem + 3.2vw, 4rem);          /* 64 */
  --text-h2: clamp(2rem, 1.5rem + 1.75vw, 3rem);             /* 48 */
  --text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);           /* 32 */
  --text-h4: clamp(1.375rem, 1.25rem + 0.45vw, 1.625rem);     /* 26 */
  --text-h5: 1.125rem;                                        /* 18 */
  --text-h6: 1rem;                                            /* 16 */
  --text-pill: 1.5rem;                                        /* 24 */
  --text-body-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);  /* 20 */
  --text-quote: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);    /* 20 */
  --text-body-md: 1.125rem;                                   /* 18 */
  --text-body-sm: 1rem;                                       /* 16 */
  --text-body-xs: 0.875rem;                                   /* 14 */
  --text-code: 0.75rem;                                       /* 12 */
  --text-button: 1.125rem;                                    /* 18 */
  --text-button-sm: 1rem;                                     /* 16 */

  --leading-hero: 1.02;
  --leading-title: 1;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --leading-body-lg: 1.7;
  --leading-speech: 1.1;
  --leading-code: 1.25;

  --tracking-heading: -0.03em;
  --tracking-h5: -0.02em;
  --tracking-h6: -0.01em;
  --tracking-body-md: -0.02em;
  --tracking-body-sm: -0.01em;
  --tracking-button: -0.02em;
  --tracking-button-sm: -0.015em;
  --tracking-speech: -0.04em;

  /* Space */
  --gap-gutter: 72px;
  --gap-section: 96px;
  --gap-separation: 48px;
  --gap-home-section: 120px;
  --gap-heading-content: 64px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-54: 54px;
  --space-60: 60px;

  /* Widths */
  --width-5col: 498px;
  --width-8col: 840px;
  --width-12col: 1296px;
  --width-full: 1440px;
  --width-topbar: 1368px;

  /* Radius */
  --radius-xs: 4px;
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 32px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-overlay: 0 1px 4px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 0, 0, 0.03);
  --shadow-tile: 0 0.5px 2px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05), 0 1.5px 4px rgba(0, 0, 0, 0.03);
  --shadow-knob: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08)) drop-shadow(0 20px 24px rgba(0, 0, 0, 0.08)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.05)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.03));

  /* Interaction (not in the design; derived) */
  --focus-ring: 2px solid var(--color-brand-light);
  --focus-ring-dark: 2px solid var(--color-brand-dark);
  --focus-offset: 2px;
  --duration-fast: 160ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layout: page gutter per breakpoint */
  --page-gutter: var(--gap-gutter);
  --section-gap: var(--gap-home-section);
  --topbar-height: 88px;
}

@media (max-width: 1279px) {
  :root { --page-gutter: 48px; --section-gap: 104px; }
}
@media (max-width: 767px) {
  :root { --page-gutter: 24px; --section-gap: 80px; --gap-heading-content: 40px; --topbar-height: 72px; }
}