/**
 * @file
 * Values shared by more than one component.
 *
 * A component's own measurements belong in its own stylesheet. This file is only
 * for values that two or more components have to agree on, where a change made
 * in one place and missed in another is a visible bug rather than a tidiness
 * problem.
 *
 * On :root rather than a wrapper class so components stay independent — a
 * component does not need to be nested inside anything to read these, and the
 * editor stylesheet can use them too. Load order does not matter: custom
 * properties resolve at computed-value time, not parse time, so a component's
 * CSS may be parsed before this file and still see the values.
 *
 * Consumers should keep their own component-scoped alias rather than reaching
 * for these directly in a declaration, i.e.
 *
 *   .ln-thing { --ln-thing-fg: var(--ln-color-ink); }
 *   .ln-thing__label { color: var(--ln-thing-fg); }
 *
 * That keeps a single override point per component, so a one-off variant can
 * reassign --ln-thing-fg without needing to know which shared token fed it.
 *
 * Currently consumed by: button, form.
 *
 * Not yet migrated — these literals are still duplicated across component
 * stylesheets and are the obvious next candidates:
 *
 *   #1c1c1c   9 files   accordion, accordion-item, button, carousel,
 *                       comparison-table, editor-styles, form, hero, text
 *   #cf0000   8 files   as above, less accordion/editor-styles, plus tabs
 *   #961f00   4 files   button, form, tabs, text
 *   Outfit    9 files   every component
 *   #ececec   3 files   accordion-item, editor-styles, tabs
 *   #f4f4f3   2 files   accordion, comparison-table
 *   (the shared surface greys are now one token, --ln-color-surface-gray)
 *   #63666a   2 files   comparison-table, tabs
 *   60px      2 files   accordion, comparison-table — the sticky site header
 */

:root {
  /**
   * Brand colours.
   *
   * --ln-color-red-hover is not a Figma value. The comps carry no hover state
   * for the red button, so it comes from the Site Studio "Red button" custom
   * style (cohesion_custom_styles.cohesion_custom_style.fd769c62) and is the
   * colour the rest of the site already uses. Worth keeping in step with that
   * style rather than picking a new one.
   */
  --ln-color-red: #cf0000;
  --ln-color-red-hover: #961f00;

  /* Body and heading foreground everywhere except where a comp says otherwise —
     the carousel heading is #171717, which is why that one stays local. */
  --ln-color-ink: #1c1c1c;

  --ln-font-sans: Outfit, sans-serif;

  /**
   * The grey surface behind the tabbed content panel and the feature carousel.
   *
   * Flat, and one value. It was a three-stop gradient per section, each with its
   * own angle and stops from the designer:
   *
   *   carousel  linear-gradient(144.95deg, #dfdeda 15.25%, #ebebeb 33.74%, #ebebeb 64.22%, #f6f5f2 80.41%)
   *   tabs      linear-gradient(161.07deg, #dfdeda 17.59%, #ebebeb 29.84%, #ebebeb 83.50%, #f6f5f2 89.54%)
   *
   * Dropped because the tab panel's video clips have their background baked into
   * the file, and a baked-in gradient slice cannot track a CSS gradient across
   * viewport widths — the angle is resolved against the element's box, so the
   * slice matched at one size and drifted at every other. A flat colour is the
   * same everywhere, which is the property that was needed.
   *
   * Shared rather than set per component because the two sections sit near each
   * other on the page and a difference between them reads as a mistake. The
   * seam colour where the active tab meets the panel comes from here too.
   *
   * Note the designer's current video exports are composited on #e8e8e8, five
   * levels darker than this. That leaves a faint edge around each clip. Either
   * this value moves to #e8e8e8 or the next export pass composites on #ededed.
   */
  --ln-color-surface-gray: #ededed;

  /**
   * Height of the site's sticky header.
   *
   * Read with a 60px fallback by the accordion's and comparison table's sticky
   * offsets and by the anchor scroll margin in layout.css. Those three predate
   * this file and each carried the literal; defining it here makes the fallbacks
   * dead weight rather than three places to remember.
   *
   * Owned by cohesion_theme, not by this module — if the header is ever
   * re-designed this is the value to change, and the sticky offsets and anchor
   * targets follow.
   */
  --ln-site-header-height: 60px;

  /**
   * Primary call-to-action geometry.
   *
   * Shared because the hero's CTA and the form block's submit button have to be
   * the same button, and they cannot share a class: the submit's markup comes
   * from Webform, and a hook that added .ln-button to it could not tell whether
   * the form was rendering in the Layout Builder block or in a Site Studio
   * component, so it would leak the class across the whole site.
   *
   * From Figma 2026 Landing Page Updates, nodes 333:2990 / 333:2992. The padding
   * follows the comp (10px/16px) rather than Site Studio's older 8px/16px.
   *
   * --ln-cta-min-width is applied above 62rem only, and that breakpoint has to
   * stay duplicated in each consumer — a media query cannot read a custom
   * property. If it changes, grep for 62rem.
   */
  --ln-cta-padding-block: 10px;
  --ln-cta-padding-inline: 16px;
  --ln-cta-radius: 4px;
  --ln-cta-font-size: 18px;
  --ln-cta-font-weight: 400;
  --ln-cta-line-height: 1.5;
  --ln-cta-min-width: 224px;
  --ln-cta-transition: background-color 0.15s ease-in-out,
    color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}