/* ==========================================================================
   U-LIK DESIGN TOKENS
   Source of truth: Figma "U-Lik Website Design" — Homepage frame (node 1:3091)
   Every value below was read directly from the Figma design context / variable
   defs for the Homepage. Do not hand-edit values here without checking Figma —
   these tokens are consumed by every ulik-* component.
   ========================================================================== */

:root {

  /* ---- Color: brand ---- */
  --ulik-color-primary: #1F4E9E;         /* Figma: nav CTA / headings / stat labels */
  --ulik-color-primary-rgb: 31, 78, 158;
  --ulik-color-primary-hover: #163A75;   /* derived: -15% lightness, for hover/active states (not in Figma, interaction state) */
  --ulik-color-accent: #E97324;          /* Figma: eyebrow text / card titles / big stat numbers */
  --ulik-color-accent-hover: #CC5F14;    /* derived: -12% lightness, for hover/active states (not in Figma, interaction state) */

  /* ---- Color: neutrals ---- */
  --ulik-color-text: #16181D;            /* Figma "text-black" body copy */
  --ulik-color-text-muted: #5B6B7B;      /* Figma: section descriptions / sub-headings */
  --ulik-color-white: #FFFFFF;
  --ulik-color-background: #FFFFFF;      /* Figma: default section background */
  --ulik-color-surface: #F5F7FA;         /* Figma: alternating section background (USP, Products wrap, About) */
  --ulik-color-surface-blue: #F0F3F8;    /* Figma: What's New / Blog hero left panel (node 659:87, confirmed 2026-09-04) — a distinct, slightly cooler tint from --ulik-color-surface above, not a typo/duplicate of it */
  --ulik-color-surface-tint: rgba(var(--ulik-color-primary-rgb), 0.06); /* Figma: icon chip fill */
  --ulik-color-border: #E3E9EF;          /* Figma: card borders */
  --ulik-color-footer-bg: #1F4E9E;       /* Figma: footer banner background (same brand blue) */

  /* ---- Color: CTA gradient (Figma radial gradient on "Looking for a reliable packaging partner?" banner) ---- */
  --ulik-gradient-cta: radial-gradient(
    ellipse 140% 140% at 78% 0%,
    rgba(233, 115, 36, 0.9) 0%,
    rgba(183, 106, 67, 0.925) 12%,
    rgba(132, 97, 97, 0.95) 24%,
    rgba(82, 87, 128, 0.975) 35%,
    rgba(56, 83, 143, 0.9875) 41%,
    rgba(31, 78, 158, 1) 47%,
    var(--ulik-color-primary) 100%
  );

  /* ---- Typography: families ---- */
  /* Figma uses Poppins throughout. One header CTA instance used Inter — normalized
     to Poppins for a consistent, single-family system (documented in DESIGN-ANALYSIS.md). */
  --ulik-font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --ulik-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Typography: weights ---- */
  --ulik-fw-light: 300;
  --ulik-fw-regular: 400;
  --ulik-fw-medium: 500;
  --ulik-fw-semibold: 600;
  --ulik-fw-bold: 700;
  --ulik-fw-extrabold: 800;

  /* ---- Typography: sizes ----
     MANDATORY GLOBAL TYPE SCALE. Every component references one of these
     variables — never a hand-picked px/rem value — so the whole site scales
     fluidly from one system. Each Figma pixel value is mapped to its
     *closest* step on this fixed scale (see the mapping table in
     DESIGN-ANALYSIS.md §5), not reproduced pixel-for-pixel; that is an
     intentional trade of exact Figma fidelity for one consistent, fluid,
     token-driven typography system. Do not add a new --font-size-* step or
     hand-roll a clamp() in component CSS — this list is exhaustive. */
  --font-size-84: clamp(3.4375rem, 2.2292rem + 4.0278vw, 5.25rem);
  --font-size-55: clamp(2.6875rem, 2.1875rem + 1.6667vw, 3.4375rem);
  --font-size-43: clamp(2rem, 1.5417rem + 1.5278vw, 2.6875rem);
  --font-size-32: clamp(1.75rem, 1.5833rem + 0.5556vw, 2rem);
  --font-size-28: clamp(1.5rem, 1.3333rem + 0.5556vw, 1.75rem);
  --font-size-24: clamp(1.375rem, 1.2917rem + 0.2778vw, 1.5rem);
  --font-size-22: clamp(1.25rem, 1.1667rem + 0.2778vw, 1.375rem);
  --font-size-20: clamp(1.125rem, 1.0417rem + 0.2778vw, 1.25rem);
  --font-size-18: clamp(1rem, 0.9167rem + 0.2778vw, 1.125rem);
  --font-size-16: clamp(0.875rem, 0.7917rem + 0.2778vw, 1rem);
  --font-size-14: clamp(0.75rem, 0.6667rem + 0.2778vw, 0.875rem);
  --font-size-12: clamp(0.625rem, 0.5417rem + 0.2778vw, 0.75rem);

  /* ---- Typography: line-heights ---- */
  --ulik-lh-tight: 1;         /* leading-none in Figma */
  --ulik-lh-snug: 1.2;
  --ulik-lh-relaxed: 1.5;

  /* ---- Typography: letter-spacing ---- */
  --ulik-ls-eyebrow: 0.02em;  /* uppercase eyebrow labels read tighter than default; Figma has no explicit tracking value, applied for legibility on uppercase run */
  --ulik-ls-normal: normal;

  /* ---- Spacing scale (Figma literal px, consolidated) ---- */
  --ulik-space-1: 5px;
  --ulik-space-2: 10px;
  --ulik-space-3: 20px;
  --ulik-space-4: 30px;
  --ulik-space-5: 40px;
  --ulik-space-6: 50px;
  --ulik-space-7: 80px;
  --ulik-space-8: 100px;

  /* ---- Radii ---- */
  --ulik-radius-sm: 8px;      /* Buttons */
  --ulik-radius-md: 12px;     /* Icon chips */
  --ulik-radius-lg: 15px;     /* Cards (product/service) */
  --ulik-radius-xl: 20px;     /* CTA banner */

  /* ---- Shadows ---- */
  --ulik-shadow-button: 0px 1px 2px rgba(0, 0, 0, 0.05);                    /* Figma "Button Shadow" style */
  --ulik-shadow-card-float: -10px 10px 20px 5px rgba(130, 130, 130, 0.19);  /* Hero headline card */

  /* ---- Container / layout ---- */
  --ulik-container-max: 1400px;      /* Figma canvas is 1440px; content rows run edge-to-edge with a header gutter of 40px */
  --ulik-container-gutter: 40px;     /* Desktop gutter, matches header's px-[40px] */
  --ulik-container-gutter-tablet: 32px;
  --ulik-container-gutter-mobile: 20px;

  /* ---- Transitions ---- */
  --ulik-transition-fast: 150ms ease;
  --ulik-transition-base: 220ms ease;

  /* ---- Z-index scale ---- */
  --ulik-z-header: 100;
  --ulik-z-mobile-menu: 110;
  --ulik-z-overlay: 90;
}