/* =================================================================
   Design tokens — values taken from the Figma file (GSB Home for p.poh).
   Section files may use raw values for one-off details; anything
   shared across sections belongs here.
   ================================================================= */
:root {
  /* Brand */
  --gsb-pink: #ED008C;
  --gsb-pink-2: #EF008C;
  --gsb-pink-tint: #FFEEF8;          /* product cards, secondary buttons */
  --gsb-pink-tint-2: #FFEEF1;
  --gsb-coral: #FD715B;              /* sparkles */
  --gsb-gradient: linear-gradient(90deg, #ED008C 0%, #FD266E 56.7%, #FC8555 100%);
  --gsb-navy: #1D2471;               /* rates card */
  --gsb-navy-deep: #060B3C;
  --gsb-blue: #385FD2;
  --gsb-gold: #A17B21;
  --gsb-green: #52D956;

  /* Neutrals */
  --ink: #2A2A2A;                    /* primary text */
  --ink-2: #5A5A5A;                  /* body / descriptions */
  --ink-3: #636363;                  /* pills, chips */
  --ink-4: #666666;
  --ink-5: #9A9A9A;                  /* placeholder */
  --line: #EBEBEB;
  --line-2: #D9D9D9;
  --line-3: #CCCCCC;
  --surface: #FFFFFF;
  --surface-2: #F9F9F9;
  --surface-3: #F7F7F7;
  --surface-4: #F6F6F8;

  /* Type */
  --font: "Google Sans", "Noto Sans Thai", "Sukhumvit Set", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Layout */
  --page-max: 1440px;                /* design frame width */
  --container: 1140px;               /* content width at 1440 (150px margins) */
  --gutter: 150px;                   /* fluid: see base.css */

  /* Radius */
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-pill: 100px;

  /* Motion — short, confident, interruptible */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 520ms;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(42, 42, 42, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(42, 42, 42, 0.22);
  --shadow-pink: 0 12px 28px -10px rgba(237, 0, 140, 0.45);
}