/* ============================================================
   TRINIGO 2.0: Design tokens (single source)
   tokens.css  |  Loaded first, on every front-end page
   Values follow the live child theme CSS v1.1.0 and the live
   Elementor kit (Default Kit #16656, read 19 Oct 2026).
   Every other stylesheet in this theme reads these variables;
   do not redeclare them elsewhere.
   ============================================================ */

:root {
  /* ── Brand colours (kit global in brackets) ── */
  --tg-teal:        #0E6F6A;  /* Ocean Teal: primary, links, icons, focus [Primary] */
  --tg-teal-dark:   #0B5C57;  /* primary hover [kit button hover] */
  --tg-blue:        #0B2C3D;  /* Deep Atlantic Blue: secondary, footer, strips [Secondary] */
  --tg-coral:       #F26A4B;  /* accent: promotions, paid badges, favourite hover [Text slot] */
  --tg-coral-dark:  #E05C40;  /* branding document accent hover; not used for text backgrounds (charcoal on it is 4.1:1) */
  --tg-sand:        #F2C94C;  /* Golden Sand: featured border, ratings, highlights [Accent slot] */

  /* ── Neutrals ── */
  --tg-bg:          #FAFAF8;  /* Soft Sand White: section background [custom] */
  --tg-white:       #FFFFFF;  /* cards, fields, kit body background [custom] */
  --tg-text:        #1E2A2F;  /* Deep Charcoal: headings, strong text [custom] */
  --tg-meta:        #5F6E73;  /* Warm Slate: body copy, meta [custom] */
  --tg-border:      #E2E6E8;  /* Light Divider: borders [custom] */

  /* ── Subtle surfaces (live CSS) ── */
  --tg-surface-subtle: #F7F9F9; /* grid card rating footer */
  --tg-divider-subtle: #F0F2F3; /* single listing info row dividers */
  --tg-badge-neutral:  #F0F4F4; /* neutral GD badges */

  /* ── Tints and overlays (live CSS) ── */
  --tg-teal-light:        rgba(14,111,106,0.06); /* intro callout background */
  --tg-teal-tint:         rgba(14,111,106,0.08); /* pill background */
  --tg-teal-tint-border:  rgba(14,111,106,0.2);  /* pill border */
  --tg-teal-stripe:       rgba(14,111,106,0.03); /* table even rows */
  --tg-sand-tint:         rgba(242,201,76,0.2);  /* sand pill on dark, grid */
  --tg-sand-tint-border:  rgba(242,201,76,0.4);
  --tg-sand-tint-soft:    rgba(242,201,76,0.15); /* sand pill on dark, list */
  --tg-sand-tint-soft-border: rgba(242,201,76,0.35);
  --tg-blue-overlay:      rgba(11,44,61,0.78);   /* image gradient overlay end */
  --tg-on-dark:           rgba(255,255,255,0.85); /* text on blue */
  --tg-on-dark-muted:     rgba(255,255,255,0.7);
  --tg-on-dark-subtle:    rgba(255,255,255,0.5);  /* icons on blue */
  --tg-on-dark-faint:     rgba(255,255,255,0.4);

  /* ── Typography: families ── */
  --tg-font-heading: "Poppins", sans-serif;
  --tg-font-body:    "Inter", sans-serif;

  /* ── Typography: kit scale (desktop) ── */
  --tg-h1-size: 42px;  --tg-h1-weight: 600; --tg-h1-lh: 1.2;
  --tg-h2-size: 34px;  --tg-h2-weight: 600; --tg-h2-lh: 1.2;
  --tg-h3-size: 26px;  --tg-h3-weight: 500; --tg-h3-lh: 1.3;
  --tg-h4-size: 22px;  --tg-h4-weight: 500; --tg-h4-lh: 1.3;
  --tg-h5-size: 18px;  --tg-h5-weight: 500; --tg-h5-lh: 1.3;
  --tg-h6-size: 16px;  --tg-h6-weight: 500; --tg-h6-lh: 1.3;
  --tg-body-size: 16px; --tg-body-lh: 1.6;   /* tablet 15px, mobile 14px */
  --tg-menu-heading-size: 17px;               /* Poppins 600, lh 1.2 */
  --tg-menu-list-size: 13px;                  /* Inter, lh 1; tablet 15px, mobile 14px */
  --tg-ui-size:    14px;  /* button and field text */
  --tg-small-size: 12px;  /* meta, pills, notes */
  --tg-label-size: 10px;  /* uppercase field labels */

  /* ── Radii ── */
  --tg-radius-card:    10px; /* listing cards, map, info box */
  --tg-radius-panel:    8px; /* review comments, legal highlight box */
  --tg-radius-control:  6px; /* buttons, fields, pagination */
  --tg-radius-tag:      4px; /* category and tag pills, badges */

  /* ── Elevation ── */
  --tg-shadow-card:       0 4px 20px rgba(11,44,61,0.08);
  --tg-shadow-card-hover: 0 14px 34px rgba(11,44,61,0.13);
  --tg-shadow-map:        0 4px 16px rgba(11,44,61,0.08);
  --tg-shadow-panel:      0 4px 20px rgba(11,44,61,0.07);
  --tg-shadow-box:        0 2px 12px rgba(11,44,61,0.06);
  --tg-shadow-comment:    0 2px 10px rgba(11,44,61,0.05);
  --tg-shadow-chip:       0 2px 6px rgba(0,0,0,0.06);
  --tg-focus-ring:        0 0 0 3px rgba(14,111,106,0.12);

  /* ── Control sizing (live CSS and kit) ── */
  --tg-btn-pad:           11px 22px; /* primary: GD search submit */
  --tg-btn-pad-secondary: 10px 20px; /* secondary: claim listing */
  --tg-btn-pad-form:      12px 24px; /* form submit: reviews */
  --tg-btn-pad-lg:        14px 26px; /* kit Theme Style buttons (all default Elementor buttons) */
  --tg-field-pad:         11px 14px; /* search fields */
  --tg-field-pad-form:    10px 14px; /* review form fields */

  /* ── Motion ── */
  --tg-ease-fast: 0.2s;   /* colour, border, background */
  --tg-ease-card: 0.22s;  /* card lift */
  --tg-ease-img:  0.4s;   /* image zoom */

  /* Breakpoints (kit): mobile < 768px, tablet 768-1024px, desktop >= 1025px.
     Custom properties cannot be used in @media; use these numbers. */
}