/* 01-tokens-base — Design tokens (colours, radii, shadows, spacing), dark-mode tokens, base elements, layout helpers, section heads.
   Loaded on every page in file-name order (see inc/core/assets.php). */

/* =====================================================================
   The Export Business Design System  ·  v3
   Premium B2B Marketplace · Apple-glass / Luxury White + Blue
   Design tokens · Grid · Components · States · Dark-mode ready
   ===================================================================== */

:root{
  /* brand */
  --white:#FFFFFF;
  --cream:#F5F8FF;
  --cream-2:#EAF1FF;
  --ink:#0E1A38;
  --ink-2:#182B5C;
  --muted:#6A7188;
  --muted-2:#98A1B8;
  --blue:#3E6FF2;
  --blue-2:#6E93FF;
  --blue-deep:#0F2470;
  --blue-pale:#E3EBFF;
  --teal:#16806F;
  --rust:#C1440E;
  --gold:#C7A96B;
  --gold-2:#E7D3A1;
  --green:#1E9E6A;
  --amber:#E1961B;
  --red:#D64545;

  /* surfaces */
  --bg:#FFFFFF;
  --bg-alt:#F5F8FF;
  --surface:#FFFFFF;
  --surface-2:#FAFBFF;
  --glass:rgba(255,255,255,0.72);
  --glass-strong:rgba(255,255,255,0.86);
  --line:rgba(14,26,56,0.09);
  --line-2:rgba(14,26,56,0.14);

  /* text */
  --text:#0E1A38;
  --text-soft:#485073;
  --text-mut:#6A7188;

  /* radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* spacing scale (8pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* shadows */
  --shadow-sm:0 1px 2px rgba(14,26,56,0.04), 0 8px 20px rgba(14,26,56,0.06);
  --shadow-md:0 2px 6px rgba(14,26,56,0.06), 0 22px 46px rgba(14,26,56,0.13);
  --shadow-lg:0 8px 24px rgba(14,26,56,0.10), 0 40px 80px rgba(14,26,56,0.18);
  --shadow-blue:0 3px 10px rgba(62,111,242,0.20), 0 22px 44px rgba(62,111,242,0.28);
  --shadow-gold:0 3px 10px rgba(199,169,107,0.24), 0 20px 40px rgba(199,169,107,0.24);
  --glass-top:inset 0 1px 0 rgba(255,255,255,0.85);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --fast:.2s; --med:.35s; --slow:.7s;

  /* layout */
  --maxw:1240px;
  --gutter:40px;
  --header-h:78px;
}

/* dark mode ready ---------------------------------------------------- */

[data-theme="dark"]{
  --bg:#080D1C;
  --bg-alt:#0C1428;
  --surface:#111A33;
  --surface-2:#0E1730;
  --glass:rgba(17,26,51,0.66);
  --glass-strong:rgba(17,26,51,0.86);
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.14);
  --white:#111A33;
  --cream:#0E1730;
  --cream-2:#152244;
  --blue-pale:#17244a;
  --text:#EAF0FF;
  --text-soft:#B7C2E0;
  --text-mut:#8A94B6;
  --ink:#EAF0FF;
  --muted:#8A94B6;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.4);
  --shadow-md:0 2px 6px rgba(0,0,0,0.4), 0 22px 46px rgba(0,0,0,0.5);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.5), 0 40px 80px rgba(0,0,0,0.6);
}

/* ---------- 2. BASE -------------------------------------------------- */

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

html,body{margin:0;padding:0;overflow-x:clip;}

body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  transition:background var(--med) var(--ease), color var(--med) var(--ease);
}

h1,h2,h3,h4,.display{font-family:inherit; font-weight:700; letter-spacing:-0.02em; margin:0; color:var(--text);}

a{color:inherit; text-decoration:none;}

img{max-width:100%; display:block;}

p{margin:0;}

::selection{background:var(--blue-pale); color:var(--ink);}

.mono{font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:.04em;}

/* layout helpers */

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}

.section-sm{padding:52px 0;}

.section-alt{background:var(--bg-alt);}

.grid{display:grid; gap:var(--s5);}

.stack{display:flex; flex-direction:column;}

.row{display:flex; align-items:center;}

.between{display:flex; align-items:center; justify-content:space-between;}

.center{display:flex; align-items:center; justify-content:center;}

.gap2{gap:var(--s2);}

.gap3{gap:var(--s3);}

.gap4{gap:var(--s4);}

.gap5{gap:var(--s5);}

/* eyebrow / section head */

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--blue-deep);
  background:var(--blue-pale); padding:7px 14px; border-radius:var(--r-pill);
}

.section-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px;}

.section-head .tag{font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--blue-deep); margin-bottom:8px; display:block;}

.section-head h2{font-size:34px; font-weight:700;}

.section-head p{color:var(--text-mut); font-size:15px; max-width:520px;}

.viewall{font-weight:600; font-size:13.5px; color:var(--blue); display:inline-flex; align-items:center; gap:6px; transition:gap var(--fast) var(--ease);}

.viewall:hover{gap:11px;}