/* Frameland design tokens · loaded first on every page.
   Colours, type, radii and button sizes live here; shell.css, landing.css, tools.css and motionhouse.css read them. */
:root {
  /* brand */
  --fl-accent: #6B01F8;          /* buttons, links on light, focus */
  --fl-accent-hover: #5A00D6;
  --fl-accent-light: #B9A6FF;    /* accent text and icons on dark */
  --fl-accent-lilac: #C4B5FD;    /* highlighted words in dark headlines */
  --fl-accent-soft: #EFEBFE;     /* tinted fills on light */
  --fl-accent-glow: rgba(107, 1, 248, .35);

  /* neutrals */
  --fl-night: #0D0B14;           /* dark page background */
  --fl-night-2: #15131F;         /* dark surface */
  --fl-night-3: #1B1826;         /* raised dark surface */
  --fl-ink: #15131F;             /* text on light */
  --fl-muted: #5D5A6E;           /* secondary text on light */
  --fl-line: #E7E5EF;            /* borders on light */
  --fl-soft: #F6F5FA;            /* light section background */
  --fl-paper: #FFFFFF;
  --fl-on-dark: #F1EEFA;         /* text on dark */
  --fl-on-dark-muted: #A9A3BF;   /* secondary text on dark */
  --fl-line-dark: rgba(255, 255, 255, .09);

  /* states */
  --fl-ok: #17804A;              /* passes 4.5:1 with white text */
  --fl-ok-bright: #2FBF71;       /* dots and icons only, never behind text */
  --fl-ok-soft: #E5F5EC;
  --fl-warn: #A35A00;
  --fl-bad: #C2263A;

  /* type */
  --fl-font: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fl-t-xs: 12px;               /* smallest text anywhere */
  --fl-t-sm: 13px;
  --fl-t-base: 15px;
  --fl-t-md: 17px;
  --fl-t-lg: 21px;
  --fl-t-xl: 28px;
  --fl-t-2xl: clamp(32px, 3.6vw, 52px);   /* section headings */
  --fl-t-3xl: clamp(36px, 4.2vw, 60px);   /* page headline, the largest size */

  /* shape */
  --fl-r-sm: 8px;
  --fl-r-md: 12px;
  --fl-r-lg: 16px;
  --fl-r-xl: 22px;
  --fl-r-pill: 999px;

  /* buttons */
  --fl-btn-sm: 40px;
  --fl-btn-md: 48px;
  --fl-btn-lg: 56px;
}