/* ==========================================================================
   FairyFly Innovation — company-level tokens (fixed)
   Load order: company-tokens.css -> shared/styles.css -> <product>/product-theme.css
   Framework: PRODUCT_PAGE_DESIGN_FRAMEWORK_v1.0.md §8, §12.1, §13-§16
   These tokens are company-wide and MUST NOT be overridden per product:
   status semantics, focus visibility, interaction sizes, shell metrics,
   body/UI/mono fonts, spacing and container scales.
   Product-level colour values and the display font live in
   products/<slug>/product-theme.css.
   ========================================================================== */

:root {
  /* --- §8.1 Status colours: meaning never changes per product ------------- */
  --status-success: #78cfa3;
  --status-warning: #f1bd72;
  --status-error:   #f08b7f;
  --status-info:    #7fb2e0;

  /* --- §8.2 Focus ring: visible on both dark and light surfaces ----------- */
  --focus-ring-color: #f2bb7f;      /* light ring  -> contrast on dark      */
  --focus-ring-contrast: #050606;   /* dark halo   -> contrast on light     */
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  /* --- §8.3 Interaction sizes (touch target >= 44x44) -------------------- */
  --control-min-height: 44px;
  --touch-target-min: 44px;
  --form-field-height: 52px;

  /* --- §8.4 Company shell ------------------------------------------------ */
  --company-header-height: 68px;
  --company-content-max-width: 1240px;
  --company-footer-spacing: 56px;

  /* --- §12.1 Company fonts (body/UI/mono do not vary per product) -------- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-ui: var(--font-body);
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

  /* --- §13 Type scale (fluid) ------------------------------------------- */
  --text-display-xl: clamp(2.9rem, 6.2vw, 5.2rem);
  --text-display-lg: clamp(2.3rem, 4.6vw, 3.6rem);
  --text-heading-xl: clamp(1.9rem, 3.4vw, 2.6rem);
  --text-heading-lg: clamp(1.55rem, 2.6vw, 2rem);
  --text-heading-md: clamp(1.3rem, 2vw, 1.6rem);
  --text-body-lg: 1.05rem;
  --text-body-md: .95rem;
  --text-body-sm: .875rem;
  --text-label: .78rem;
  --text-caption: .72rem;

  /* --- §14 Spacing and density ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* Section rhythm: vertical air BETWEEN sections. Kept well below the old
     125px step so a viewer never scrolls through a full-screen void. */
  /* Opaque colour for CSS masks: the mask only reads alpha, so this is a utility token. */
  --mask-solid: #ffffff;
  --section-rhythm: 72px;
  --section-rhythm-sm: 56px;
  --section-space-sm: 72px;
  --section-space-md: 100px;
  --section-space-lg: 125px;
  --card-padding-sm: 24px;
  --card-padding-md: 32px;
  --card-padding-lg: 42px;

  /* --- §15 Containers and line length ----------------------------------- */
  --container-wide: 1320px;
  --container-default: 1240px;
  --container-reading: 720px;

  /* --- §16 Radius and shadow -------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-none: none;
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, .18);
  --shadow-raised: 0 18px 44px rgba(0, 0, 0, .28);
  --shadow-emphasis: 0 40px 90px rgba(0, 0, 0, .34);
  --shadow-glow: 0 0 60px rgba(242, 187, 127, .16);
}

/* Company-wide focus treatment: light ring + dark halo so the indicator stays
   >= 3:1 on dark sections and on the inverted reading surfaces. */
html :focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--focus-ring-contrast);
}