/* ============================================================
   Design tokens — 3FS Technology / Pospal POS marketing site
   3FS Technology Sdn. Bhd.
   Provenance and derivation notes: see NOTES.md
   ============================================================ */

:root {
  /* --- Brand ramp: 3FS orange, tinted to white / shaded to black --- */
  --brand-50:  #fff2e6;
  --brand-100: #ffe8cc;
  --brand-200: #ffd199;
  --brand-300: #ffb966;
  --brand-400: #ffa233;
  --brand-500: #ff8b00;   /* 3FS primary — sampled from the logo artwork */
  --brand-600: #cc6f00;
  --brand-700: #995300;
  --brand-800: #663800;
  --brand-900: #331c00;
  --brand-950: #1a0e00;

  --brand-a10: rgb(255 139 0 / 0.10);
  --brand-a15: rgb(255 139 0 / 0.15);
  --brand-a25: rgb(255 139 0 / 0.25);

  /* --- Neutral ramp --- */
  --n-0:   #ffffff;
  --n-50:  #fafaf9;
  --n-100: #f5f4f2;
  --n-200: #e7e5e1;
  --n-300: #d4d1cc;
  --n-400: #a3a09a;
  --n-500: #78756f;
  --n-600: #57544f;
  --n-700: #403e3a;
  --n-800: #292824;
  --n-900: #171614;

  /* --- Dark surfaces (from the 3FS corporate palette) --- */
  --ink:       #121a2f;   /* --anti-fraud-background */
  --ink-deep:  #0b1120;
  --ink-soft:  #222429;   /* --footer-background */

  /* --- Glass layers --- */
  --glass-a60: rgb(255 255 255 / 0.60);
  --glass-a80: rgb(255 255 255 / 0.80);
  --glass-blur: saturate(180%) blur(14px);

  /* --- Semantic --- */
  --surface:       var(--n-0);
  --surface-sunk:  var(--n-50);
  --surface-tint:  var(--brand-50);
  --text:          var(--ink);
  --text-muted:    var(--n-500);
  --text-invert:   var(--n-0);
  --border:        var(--n-200);
  --border-strong: var(--n-300);

  /* --- Type scale (fluid) --- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text-eyebrow: 0.6875rem;
  --text-sm:   0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --text-h3:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-h2:   clamp(1.875rem, 1.35rem + 2.2vw, 3.25rem);
  --text-h1:   clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);

  /* --- Spacing rhythm (deliberately uneven, not a uniform 8pt march) --- */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --measure: 68ch;
  --max-w: 1240px;

  /* --- Radius: intentionally varied, not one value everywhere --- */
  --r-pill: 999px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;

  /* --- Elevation: layered, warm-tinted shadows --- */
  --shadow-sm: 0 1px 2px rgb(18 26 47 / 0.05), 0 1px 3px rgb(18 26 47 / 0.04);
  --shadow-md: 0 2px 4px rgb(18 26 47 / 0.04), 0 8px 20px -6px rgb(18 26 47 / 0.10);
  --shadow-lg: 0 4px 8px rgb(18 26 47 / 0.05), 0 24px 48px -12px rgb(18 26 47 / 0.16);
  --shadow-brand: 0 8px 24px -6px rgb(255 139 0 / 0.35);

  /* --- Motion --- */
  --dur-fast: 140ms;
  --dur-mid:  260ms;
  --dur-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}