/*
 * Flintbury Labs design tokens (Facets identity), v1.0, 10 Oct 2026.
 * Source of truth for the website. Use these variables; do not add new colours,
 * fonts or radii without updating BRAND.md.
 *
 * Fonts: self-hosted on this site, see assets/css/fonts.css (not Google Fonts).
 */

:root {
  /* Core palette */
  --fl-ink: #10162B;          /* text, dark sections */
  --fl-cobalt: #2F4BE0;       /* primary brand colour, buttons, links */
  --fl-cobalt-hover: #2640C7; /* button hover / pressed */
  --fl-cobalt-bright: #3D5BFF;/* cobalt tiles and accents on Ink only (not for text) */
  --fl-cloud: #F4F6FB;        /* page background */
  --fl-white: #FFFFFF;        /* cards, raised surfaces */

  /* Facet colours: tiles, illustration, per-app accents. Not for body text. */
  --fl-coral: #FF6A55;
  --fl-teal: #0B8277;
  --fl-sun: #FFC23D;
  --fl-coral-text: #C8402B; /* the word "spark" in coral on Cloud/White: 4.6:1 */

  /* Text */
  --fl-text: var(--fl-ink);           /* 16.6:1 on Cloud */
  --fl-text-muted: #3D4560;           /* 8.8:1 on Cloud: body copy, sub-heads */
  --fl-text-subtle: #5A6275;          /* 5.7:1 on Cloud: captions, meta */
  --fl-text-on-dark: #F4F6FB;         /* on Ink: 16.6:1 */
  --fl-text-on-dark-muted: #9AA6D6;   /* on Ink: 7.5:1 */
  --fl-text-on-cobalt: #FFFFFF;       /* on Cobalt: 6.6:1 */
  --fl-text-on-cobalt-muted: #DCE2FF; /* on Cobalt: 5.1:1 */
  --fl-link: var(--fl-cobalt);        /* on Cloud/White: 6.1:1 */
  --fl-link-on-dark: #8FA2FF;         /* on Ink: 7.5:1 */
  /* Sun on Ink is 11.1:1 (any size). Sun on Cobalt is 4.1:1: headline size (24px+ bold) only. */

  /* Lines and tile tones */
  --fl-border: #D5DAE8;
  --fl-tile-on-cloud: #E3E8F4;
  --fl-tile-on-cobalt: #3B57EA;
  --fl-tile-on-ink: #1B2340;

  /* Status (forms, alerts) */
  --fl-success: #067647;  /* 5.7:1 on White */
  --fl-error: #B42318;    /* 6.6:1 on White */

  /* Type */
  --fl-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale: fluid between 360px and 1280px viewports */
  --fl-text-display: clamp(2.75rem, 1.9rem + 3.8vw, 4.5rem); /* 44 to 72px, hero only */
  --fl-text-h1: clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);     /* 36 to 56px */
  --fl-text-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);      /* 28 to 40px */
  --fl-text-h3: 1.375rem;   /* 22px */
  --fl-text-lead: 1.25rem;  /* 20px, intro paragraphs */
  --fl-text-body: 1.0625rem;/* 17px */
  --fl-text-small: 0.875rem;/* 14px */
  --fl-text-label: 0.8125rem;/* 13px, mono labels */

  --fl-leading-tight: 1.05; /* display, h1 */
  --fl-leading-snug: 1.2;   /* h2, h3 */
  --fl-leading-body: 1.6;

  --fl-tracking-display: -0.04em;
  --fl-tracking-heading: -0.025em;
  --fl-tracking-label: 0.06em;

  --fl-weight-body: 500;
  --fl-weight-semibold: 600;
  --fl-weight-bold: 700;
  --fl-weight-heavy: 800;

  /* Spacing: 4px base */
  --fl-space-1: 0.25rem;  /* 4 */
  --fl-space-2: 0.5rem;   /* 8 */
  --fl-space-3: 0.75rem;  /* 12 */
  --fl-space-4: 1rem;     /* 16 */
  --fl-space-5: 1.5rem;   /* 24 */
  --fl-space-6: 2rem;     /* 32 */
  --fl-space-7: 3rem;     /* 48 */
  --fl-space-8: 4rem;     /* 64 */
  --fl-space-9: 6rem;     /* 96 */
  --fl-section-y: clamp(4rem, 3rem + 4vw, 7rem);
  --fl-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* Layout */
  --fl-container: 1200px;
  --fl-measure: 65ch;

  /* Radius */
  --fl-radius-sm: 8px;     /* inputs, small chips */
  --fl-radius-md: 12px;    /* buttons */
  --fl-radius-lg: 20px;    /* cards, panels */
  --fl-radius-tile: 22.5%; /* app-icon tiles: always relative to tile size */
  --fl-radius-pill: 999px;

  /* Elevation: used sparingly, cards on Cloud only */
  --fl-shadow-card: 0 1px 2px rgba(16, 22, 43, 0.06), 0 8px 24px rgba(16, 22, 43, 0.06);
  --fl-focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--fl-cobalt);

  /* Motion */
  --fl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fl-duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fl-duration: 0ms; }
}