/* ==========================================================================
   RADICO design tokens
   Source of truth: Figma variables, file hyvOoR3M4Ln10eJ0dkXgBE (2026-09-03).
   Raw pull: design/tokens/figma-variables.json

   NOTE: the Figma file contains desktop frames only (all 1920px wide).
   Tablet/mobile values below are DERIVED, not designed — flagged inline.
   ========================================================================== */

:root {
  /* ---- Brand blues ---- */
  --radico-blue-950:  #0b2f41;   /* Color/Main Blue/950 — primary */
  --radico-blue-900:  #194960;
  --radico-blue-700:  #146b8a;
  --radico-blue:      #195770;   /* Color/Main/Blue */

  /* ---- Accents / grounds ---- */
  --radico-akaroa:      #f2eee2; /* Color/Akaroa/100 — warm cream */
  --radico-akaroa-200:  #e4dbc4; /* Color/Akaroa/200 — Home office hero gradient */
  --radico-hippie-100:  #ddedf0; /* Color/Hippie Blue/100 — Business nav bar */
  --radico-hippie-200:  #bfdbe2; /* Color/Hippie Blue/200 */
  --radico-hippie-50:   #f2f8f9; /* Color/Hippie Blue/50 */
  --radico-tower-300:   #a4bcc6; /* Color/Tower Gray/300 */

  /* ---- Neutrals (Outer Space ramp) ---- */
  --radico-space-950: #070b0d;
  --radico-space-500: #6a7a81;
  --radico-space-400: #9aaab1;
  --radico-space-300: #d1d8d8;
  --radico-space-200: #e2e7e9;
  --radico-nevada-200: #e4e6e7;  /* Color/Nevada/200 — mini cart thumbnails */
  --radico-nevada-100: #f4f5f5;  /* Color/Nevada/100 — active filter pill */
  --radico-space-100: #f3f5f6;
  --radico-space-50:  #fafafa;
  --radico-grey-900:  #272c32;
  --radico-border:    #eceeee;   /* Colors/Border/border-secondary */
  --radico-white:     #ffffff;

  /* ---- Semantic ---- */
  --radico-text:      var(--radico-blue-950);
  --radico-bg:        var(--radico-white);

  /* ---- Type ---- */
  --radico-font: "Geologica", "Helvetica Neue", Arial, sans-serif;
  --radico-fw-light:    300;   /* Geologica/B-Regular */
  --radico-fw-semibold: 600;   /* Geologica/H3-semibold */
  --radico-fw-bold:     700;   /* Geologica/H1–H5, B-Bold */

  /* Desktop scale — straight from Figma named styles */
  --radico-fs-h1:      56px;
  --radico-fs-h2:      48px;
  --radico-fs-h3:      40px;
  --radico-fs-h4:      32px;
  --radico-fs-h5:      24px;
  --radico-fs-body:    18px;   /* Geologica/B-Bold size; body size used in build */
  --radico-fs-body-sm: 14px;   /* Geologica/B-Regular */

  --radico-lh-heading: 1.1;
  --radico-lh-body:    1.5;

  /* ---- Space ---- */
  --radico-pad-section: 112px; /* Section Padding/padding-section-large */
  --radico-pad-global:  64px;  /* Page Padding/padding-global */
  --radico-space-xxs:   2px;

  /* ---- Layout ---- */
  --radico-frame:        1920px; /* design frame width */
  --radico-content:      1696px; /* 1920 - 112*2 — boxed content width */
  --radico-container-lg: 1280px; /* Container/container-large — inner text constraint */

  /* ---- Radius / stroke ---- */
  /* Chevron used as a mask by CTA rows and the enquiry form's submit. */
  --radico-empty-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E");

  --radico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");

  --radico-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");

  --radico-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");

  --radico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  --radico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  --radico-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='12' viewBox='0 0 6 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 5-4 5'/%3E%3C/svg%3E");

  --radico-radius:      0px;   /* Radius/Medium = 0 — square corners by design */
  --radico-radius-xs:   4px;
  --radico-radius-sm:   6px;
  --radico-radius-full: 9999px;
  --radico-border-w:    1px;

  /* ---- Elevation ---- */
  --radico-shadow-sm: 0 1px 2px 0 #1018280f, 0 1px 3px 0 #1018281a;
}

/* DERIVED breakpoints — no tablet/mobile frames exist in the Figma file.
   Ratios follow the steps used in the Aug 2026 Elementor build (~0.85 / ~0.68). */
@media (max-width: 1024px) {
  :root {
    --radico-fs-h1: 48px; --radico-fs-h2: 40px; --radico-fs-h3: 34px;
    --radico-fs-h4: 28px; --radico-fs-h5: 22px;
    --radico-fs-body: 17px;
    --radico-pad-section: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --radico-fs-h1: 38px; --radico-fs-h2: 32px; --radico-fs-h3: 28px;
    --radico-fs-h4: 24px; --radico-fs-h5: 20px;
    --radico-fs-body: 16px;
    --radico-pad-section: 24px;
  }
}

/* ---- Base ---- */
body {
  font-family: var(--radico-font);
  font-weight: var(--radico-fw-light);
  font-size: var(--radico-fs-body);
  line-height: var(--radico-lh-body);
  color: var(--radico-text);
  background: var(--radico-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--radico-font);
  font-weight: var(--radico-fw-bold);
  line-height: var(--radico-lh-heading);
  color: var(--radico-blue-950);
  margin-block: 0;
}

h1 { font-size: var(--radico-fs-h1); }
h2 { font-size: var(--radico-fs-h2); }
h3 { font-size: var(--radico-fs-h3); }
h4 { font-size: var(--radico-fs-h4); }
h5 { font-size: var(--radico-fs-h5); }

/* Square corners are a deliberate design decision (Radius/Medium = 0). */
.radico-sharp { border-radius: var(--radico-radius); }