/*
 * Valera — design tokens the Elementor kit cannot express.
 *
 * GENERATED by build/generate-tokens.js from extract/design-data.json.
 * Do not hand-edit: regenerate instead, or the site and the measurements
 * stop agreeing with each other.
 *
 * Colour and typography are NOT here — they live in the Elementor kit as
 * --e-global-color-* and --e-global-typography-*, so the client can edit
 * them. A value in two places is a value that will disagree with itself.
 */

:root {
  /* Corner radii. Every authored integer in the histogram — 6 does the work.
     Dropped as residue of Figma's scale tool, which rewrites size and
     radius in place instead of writing a transform, leaving values with
     nothing to explain them:
       1.468      x2
       2.2145     x1
       3.56       x2
       3.9146     x2
       4.3746     x2
       5.5792     x2
       6.4671     x1
       12.79      x1
       12.792     x20
       24.4665    x1
   */
  --valera-radius-xs: 4px;   /* 14 nodes */
  --valera-radius-sm: 6px;   /* 117 nodes */
  --valera-radius-md: 12px;   /* 8 nodes */
  --valera-radius-lg: 16px;   /* 2 nodes */
  --valera-radius-pill: 50px;   /* 60 nodes */
  --valera-radius-round: 100px;   /* 65 nodes */

  /* Background blur. Elementor free has no backdrop-filter control, so the
     values live here and are applied through .valera-blur-* below.
     Dropped as residue rather than a decision:
       7.3        x2
   */
  --valera-blur-4: 4px;   /* 71 carriers */
  --valera-blur-10: 10px;   /* 4 carriers */
  --valera-blur-20: 20px;   /* 18 carriers */

  /* Image scrim. 55 of 60 gradients in scope are this same ramp
     (#666666@0->#000000@1); only the layer opacity differs, at 0.8 and 1.
     The remaining few are one-offs and stay per-element.
     The ANGLE is not a token: each carrier has its own gradient transform
     matrix. 180deg is our default and is a judgement, not a measurement. */
  --valera-scrim: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 1) 100%);

  /* Grid. The column width is NOT written as a literal: 1312/12 at a 24px
     gutter is 87.333333px, which repeat(12, 1fr) divides exactly at any
     width, while the literal is wrong as soon as the container is not
     1312px. Figma's grid is STRETCH and never materialises a column. */
  --valera-content: 1312px;
  --valera-gutter: 24px;
  --valera-gutter-mobile: 20px;
}

/* 12 columns at 1440, 2 at 360 — the two artboard widths. There is no
   tablet artboard; the middle range is ours and is a judgement, not a
   measurement. */
.valera-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--valera-gutter);
  max-width: var(--valera-content);
}

@media (max-width: 767px) {
  .valera-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--valera-gutter-mobile);
  }
}

.valera-blur-4 { backdrop-filter: blur(var(--valera-blur-4)); -webkit-backdrop-filter: blur(var(--valera-blur-4)); }
.valera-blur-10 { backdrop-filter: blur(var(--valera-blur-10)); -webkit-backdrop-filter: blur(var(--valera-blur-10)); }
.valera-blur-20 { backdrop-filter: blur(var(--valera-blur-20)); -webkit-backdrop-filter: blur(var(--valera-blur-20)); }

.valera-scrim { background-image: var(--valera-scrim); }