/* ============================================================
   GGR TRADE — DESIGN TOKENS
   Colour + type values are derived from the GGR dossier (live
   Elementor tokens + logo/collateral samples). Semantic roles
   are used everywhere; raw hex is not scattered across the CSS.
   ============================================================ */
:root {
  /* ---- Brand palette (source-derived) ---- */
  --c-navy:        #061B55; /* deep industrial navy — anchors premium bands */
  --c-blue:        #0F75BC; /* GGR website blue — trust & structure */
  --c-blue-logo:   #0870B8;
  --c-blue-royal:  #0040B0;
  --c-red:         #BF1E2E; /* GGR website red — urgent / safety CTAs */
  --c-red-logo:    #B81828;
  --c-red-strong:  #D00010;
  --c-teal:        #10A898; /* GGR teal — verified / success states */
  --c-white:       #FFFFFF;
  --c-black:       #0C0C0C; /* near-black */
  --c-grey:        #E9E9E9; /* light grey */

  /* ---- Derived cool-white & pale-blue surfaces ---- */
  --c-surface:      #FFFFFF;
  --c-surface-2:    #F5F8FC; /* pale cool white */
  --c-surface-3:    #EDF3FA; /* pale blue */
  --c-surface-navy: #061B55;
  --c-surface-navy-2: #0A2A6E;
  --c-line:         #DCE4EE; /* hairline borders */
  --c-line-strong:  #C2CEDD;

  /* ---- Ink (text) ---- */
  --ink-1: #0C1626; /* headings on light */
  --ink-2: #334155; /* body on light */
  --ink-3: #5A6B80; /* muted / captions */
  --ink-inv-1: #FFFFFF; /* on navy */
  --ink-inv-2: #C7D6EC; /* muted on navy */

  /* ---- Semantic roles ---- */
  --brand:            var(--c-blue);
  --brand-strong:     var(--c-blue-royal);
  --brand-navy:       var(--c-navy);
  --accent:           var(--c-red);
  --accent-strong:    var(--c-red-strong);
  --verified:         var(--c-teal);
  --verified-deep:    #0B8577;

  /* status */
  --ok:      #0B8577;
  --ok-bg:   #E3F6F2;
  --warn:    #9A6A00;
  --warn-bg: #FBF1DA;
  --danger:  #BF1E2E;
  --danger-bg:#FBE7E9;
  --info:    #0F75BC;
  --info-bg: #E7F1FB;
  --muted-bg:#EEF1F5;

  /* ---- Typography ---- */
  --font-display: "Rajdhani", "Inter Tight", "Segoe UI Semibold", "Arial Narrow", system-ui, sans-serif;
  --font-heading: "Inter Tight", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-alt: "Plus Jakarta Sans", var(--font-heading);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* fluid type scale */
  --fs-300: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --fs-400: clamp(0.9rem, 0.87rem + 0.15vw, 0.97rem);
  --fs-500: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-600: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-700: clamp(1.4rem, 1.28rem + 0.6vw, 1.75rem);
  --fs-800: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-900: clamp(2.15rem, 1.7rem + 2.2vw, 3.4rem);
  --fs-1000: clamp(2.6rem, 1.9rem + 3.2vw, 4.25rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* ---- Space scale ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  /* ---- Radius ---- */
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 22px; --r-pill: 999px;

  /* ---- Shadows (measured, restrained) ---- */
  --sh-1: 0 1px 2px rgba(6,27,85,.06), 0 1px 3px rgba(6,27,85,.08);
  --sh-2: 0 4px 12px rgba(6,27,85,.08), 0 2px 4px rgba(6,27,85,.05);
  --sh-3: 0 12px 28px rgba(6,27,85,.12), 0 4px 10px rgba(6,27,85,.06);
  --sh-4: 0 24px 60px rgba(6,27,85,.18);

  /* ---- Layout ---- */
  --wrap: 1240px;
  --wrap-wide: 1440px;
  --wrap-narrow: 780px;
  --header-h: 112px;
  --header-h-scrolled: 72px;
  --bottomnav-h: 66px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .14s; --dur-2: .24s; --dur-3: .4s;

  --focus: 0 0 0 3px rgba(15,117,188,.45);
  --focus-accent: 0 0 0 3px rgba(191,30,46,.4);
}

@media (max-width: 900px) {
  :root { --header-h: 64px; --header-h-scrolled: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; }
}