/**
 * @file
 * Values two or more components have to agree on.
 *
 * Consumers should alias these into a component-scoped property rather than
 * reading them directly in a declaration.
 */

:root {
  /* Brand red, ours. Originally copied from Site Studio's "Red button" custom
     style, which this no longer tracks. */
  --ln-color-red: #cf0000;
  --ln-color-red-hover: #961f00;

  /* Body and heading foreground except where a comp says otherwise. */
  --ln-color-ink: #1c1c1c;

  /**
   * The two section backgrounds that are also card surfaces.
   *
   * Creme is the section's "creme" background and the full-width card's face;
   * slate is the section's "grey" background, and the colour every card sits
   * on in the Owner Hub band. A card drawn a shade off the section behind it is
   * a visible bug, which is the test for living here rather than in a component.
   *
   * @see css/layout.css .section-background-creme / -grey
   */
  --ln-color-creme: #fbf6f0;
  --ln-color-slate: #242a2a;

  /**
   * Radius of the testimonial card AND of the carousel window that clips it.
   *
   * Shared because the window is exactly the card's width: mid-slide the card's
   * own corners have travelled out of the window, so if the window is not
   * rounded to the same value the moving card shows square corners.
   *
   * @see components/testimonials/testimonials.css .glide__track
   */
  --ln-testimonial-radius: 16px;

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

  /**
   * Display face for text set over an image.
   *
   * The desktop comp draws Test Tiempos Headline, a trial licence we do not
   * hold; the mobile comp (Figma 4188:3177) names Playfair Display, which is
   * OFL and is what ships.
   */
  --ln-font-display: "Playfair Display", Georgia, serif;

  /**
   * Surface behind the tabbed panel and the feature carousel.
   *
   * Flat, not a gradient: the tab videos have their background baked in and a
   * baked-in slice cannot track a CSS gradient across viewport widths.
   *
   * Open: the delivered clips are composited on #e8e8e8, not this #ededed, so a
   * faint edge shows around each. Either this moves or the next export does.
   */
  --ln-color-surface-gray: #ededed;

  /* The Site Studio master template's header, until a theme owns one. Read by
     the sticky offsets and anchor margins. */
  --ln-site-header-height: 60px;

  /**
   * Page container: a 1440px box centred with auto margins. The width is ours,
   * and happens to be the one Site Studio's .coh-style-max-width--1440 uses.
   *
   * The gutter is INSIDE the 1440, on the same box as the max-width, so content
   * settles at 1410px — which is why the form card's width is 1410. Putting it
   * on the section root instead would widen the container to 1470.
   *
   * One value at every breakpoint; there is no mobile step.
   */
  --ln-container-max: 1440px;
  --ln-container-gutter: 15px;

  /**
   * Primary call-to-action geometry, shared with the form's submit button.
   *
   * --ln-cta-min-width applies above 62rem only, and that breakpoint stays
   * duplicated in every consumer — a media query cannot read a custom property.
   */
  --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;
}