/* ==========================================================================
   LogNex Forwarders — Design Tokens
   Single source of truth for color, type, spacing, motion.
   Dark/light is driven by remapping the semantic tokens under [data-theme].
   ========================================================================== */

:root {
  /* --- Brand palette ----------------------------------------------------- */
  --indigo-50:  #eef0ff;
  --indigo-100: #dfe2ff;
  --indigo-300: #9aa2ff;
  --indigo-500: #2531e0;   /* primary brand */
  --indigo-600: #1d27c4;
  --indigo-700: #161e9c;
  /* Secondary accent — a refined warm coral that complements the indigo. */
  --coral-50:   #fff1ec;
  --coral-300:  #ffae99;
  --coral-500:  #f4623f;   /* secondary accent */
  --coral-600:  #e14e2c;
  --ink:        #0a0b12;   /* near-black */
  --ink-800:    #14161f;
  --ink-700:    #1d2030;

  /* Neutral scale aligned to the brand style guide
     (light bg #f2f2f2, silver #666666, soft silver #747474, stroke #e2e2e2). */
  --gray-50:  #f7f7f8;
  --gray-100: #f2f2f2;   /* Light Bg */
  --gray-200: #e2e2e2;   /* Stroke */
  --gray-300: #d2d2d2;
  --gray-400: #9a9a9d;
  --gray-500: #666666;   /* Silver */
  --gray-450: #747474;   /* Soft Silver */
  --gray-600: #444444;
  --white:    #ffffff;

  /* --- Semantic tokens (LIGHT defaults) ---------------------------------- */
  --bg:            var(--gray-100);
  --bg-alt:        var(--white);
  --surface:       var(--white);
  --surface-2:     var(--gray-100);
  --surface-glass: rgba(255, 255, 255, 0.74);
  --text:          var(--ink);
  --text-soft:     #2a2a2e;
  --text-muted:    var(--gray-500);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --accent:        var(--indigo-500);
  --accent-hover:  var(--indigo-600);
  --accent-contrast: var(--white);
  --accent-2:      var(--coral-500);   /* secondary accent */
  --accent-2-hover: var(--coral-600);
  --accent-2-soft: var(--coral-50);
  --on-dark:       rgba(255, 255, 255, 0.92);
  --on-dark-muted: rgba(255, 255, 255, 0.62);

  /* Always-dark surfaces (used for Why band, CTA, footer in light mode) */
  --dark-bg:       var(--ink);
  --dark-surface:  var(--ink-800);

  /* --- Typography -------------------------------------------------------- */
  /* Sarabun across headings and body for a warmer, more elegant system. */
  --font-display: "Sarabun", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    "Sarabun", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;

  --fw-display: 700;   /* large headings */
  --fw-heading: 700;   /* sub headings */
  --fw-medium:  500;
  --fw-semibold: 600;

  --fs-eyebrow: 0.76rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.08rem, 1.3vw, 1.22rem);
  --fs-h6: 1.0625rem;
  --fs-h5: 1.2rem;
  --fs-h4: clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-h3: clamp(1.45rem, 2.3vw, 1.95rem);
  --fs-h2: clamp(1.7rem, 3vw, 2.5rem);
  --fs-h1: clamp(2.15rem, 4.6vw, 3.6rem);
  --fs-mega: clamp(3rem, 9vw, 6.5rem);

  --lh-tight: 1.06;
  --lh-snug:  1.18;
  --lh-body:  1.72;   /* Sarabun reads best with a little more leading */
  /* Tight tracking on Inter display type; Sarabun body sits at normal. */
  --tracking-tight: -0.038em;   /* large headings */
  --tracking-snug:  -0.024em;   /* sub headings */
  --tracking-body:  0;
  --tracking-eyebrow: 0.12em;

  /* --- Spacing 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;
  --sp-10: 8rem;
  --section-y: clamp(4.5rem, 10vw, 9rem);

  /* --- Layout ------------------------------------------------------------ */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);

  /* Consistent section-head rhythm */
  --head-gap: clamp(0.9rem, 1.6vw, 1.25rem);   /* eyebrow -> title */
  --head-mb:  clamp(2.5rem, 5vw, 4rem);         /* head -> content */

  /* --- Radii ------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Shadows ----------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10, 11, 18, 0.06), 0 2px 8px rgba(10, 11, 18, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 11, 18, 0.08), 0 2px 6px rgba(10, 11, 18, 0.05);
  --shadow-lg: 0 24px 60px rgba(10, 11, 18, 0.14), 0 8px 18px rgba(10, 11, 18, 0.06);
  --shadow-glass: 0 18px 50px rgba(10, 11, 18, 0.16);
  --shadow-accent: 0 14px 34px rgba(37, 49, 224, 0.32);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t-med:  0.32s;
  --t-slow: 0.6s;

  color-scheme: light;
}

/* ==========================================================================
   DARK THEME — remap semantic tokens only
   ========================================================================== */
[data-theme="dark"] {
  --bg:            #07080d;
  --bg-alt:        #0b0d14;
  --surface:       #11131c;
  --surface-2:     #161926;
  --surface-glass: rgba(17, 19, 28, 0.72);
  --text:          #f3f4f8;
  --text-soft:     #d7dae3;
  --text-muted:    #9aa0ae;
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --accent:        #5560ff;
  --accent-hover:  #6b75ff;
  --accent-2:      #ff7a5a;
  --accent-2-hover: #ff8e72;
  --accent-2-soft: rgba(244, 98, 63, 0.16);
  --accent-contrast: var(--white);

  --dark-bg:      #0b0d14;
  --dark-surface: #11131c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.6);
  --shadow-glass: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 14px 34px rgba(85, 96, 255, 0.4);

  color-scheme: dark;
}