/* =====================================================================
   SOLO LAB — Design Tokens (Colors + Type)   v2  (re-grounded to real assets)
   Brand: Solo Lab by ภาณุพันธ์ เพียสุระ (พี่โจ)
   
   Colors sourced from actual logo.png analysis + website brief:
   • Dark navy   #04101F  — logo "solo" text, near-black anchor
   • Electric blue #024CDA — logo ring + "lab" wordmark, brand accent
   • Yellow      #F5C518  — website CTA accent (from brief)
   • White       #FFFFFF
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --dark:        #04101F;   /* logo dark navy — primary text + dark panels */
  --blue:        #024CDA;   /* logo electric blue — brand accent, links */
  --yellow:      #F5C518;   /* CTA accent (from brief) */
  --white:       #FFFFFF;

  /* ---------- DARK SCALE (near-black navy) ---------- */
  --dark-50:   #F0F2F5;
  --dark-100:  #DDE1EA;
  --dark-200:  #BAC0CF;
  --dark-300:  #8A94A9;
  --dark-400:  #5E6A82;
  --dark-500:  #3E4A5E;
  --dark-600:  #263040;
  --dark-700:  #152030;
  --dark-800:  #0A1525;
  --dark-900:  #04101F;   /* === primary dark === */
  --dark-950:  #020A14;

  /* ---------- BLUE SCALE (brand electric blue) ---------- */
  --blue-50:   #EEF3FD;
  --blue-100:  #D6E3FB;
  --blue-200:  #ADC6F7;
  --blue-300:  #7BA3F1;
  --blue-400:  #4979E9;
  --blue-500:  #1D58E0;
  --blue-600:  #024CDA;   /* === brand blue === */
  --blue-700:  #023FB5;
  --blue-800:  #022F8A;
  --blue-900:  #011E5C;
  --blue-950:  #010F30;

  /* ---------- YELLOW SCALE (CTA accent) ---------- */
  --yellow-50:   #FEFBED;
  --yellow-100:  #FEF6D4;
  --yellow-200:  #FDECA3;
  --yellow-300:  #FBDD6B;
  --yellow-400:  #F8CE3C;
  --yellow-500:  #F5C518;   /* === CTA yellow === */
  --yellow-600:  #D9A810;
  --yellow-700:  #AE820C;
  --yellow-800:  #835F0F;
  --yellow-900:  #6B4D11;

  /* ---------- NEUTRALS (dark-tinted cool gray) ---------- */
  --gray-50:   #F6F7F9;
  --gray-100:  #ECEEF2;
  --gray-200:  #D8DCE5;
  --gray-300:  #BEC4CF;
  --gray-400:  #9BA4B4;
  --gray-500:  #748196;
  --gray-600:  #566070;
  --gray-700:  #3D4655;
  --gray-800:  #283038;
  --gray-900:  #191E25;
  --gray-950:  #0D1015;

  /* ---------- SEMANTIC: SURFACES ---------- */
  --bg:            var(--white);
  --bg-subtle:     var(--gray-50);
  --bg-muted:      var(--gray-100);
  --bg-dark:       var(--dark-900);
  --bg-dark-deep:  var(--dark-950);
  --bg-blue-tint:  var(--blue-50);
  --surface:       var(--white);
  --surface-alt:   var(--gray-50);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-blue:   rgba(2,76,218,0.16);

  /* ---------- SEMANTIC: TEXT ---------- */
  --fg1:        #04101F;        /* primary — the dark color itself */
  --fg2:        var(--gray-600);/* secondary */
  --fg3:        var(--gray-500);/* muted / captions */
  --fg-invert:  var(--white);   /* on dark panels */
  --fg-on-yellow: var(--dark-900);
  --link:       var(--blue-600);
  --link-hover: var(--blue-500);

  /* ---------- SEMANTIC: ACTIONS ---------- */
  --primary:        var(--dark-900);
  --primary-hover:  var(--dark-700);
  --primary-press:  var(--dark-950);
  --accent-blue:    var(--blue-600);
  --accent-blue-hover: var(--blue-500);
  --accent:         var(--yellow-500);
  --accent-hover:   var(--yellow-400);
  --accent-press:   var(--yellow-600);

  /* ---------- SEMANTIC: STATUS ---------- */
  --success:    #1A9E62;
  --success-bg: #E6F6EE;
  --warning:    #E8A317;
  --warning-bg: #FDF3DD;
  --error:      #D93B3B;
  --error-bg:   #FCEAEA;
  --info:       var(--blue-600);
  --info-bg:    var(--blue-50);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Kanit', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Thai', 'Kanit', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE WEIGHTS ---------- */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   800;

  /* ---------- FLUID TYPE SCALE ---------- */
  --fs-display: clamp(44px, 6vw, 72px);
  --fs-h1:      clamp(36px, 4.5vw, 56px);
  --fs-h2:      clamp(28px, 3.4vw, 40px);
  --fs-h3:      clamp(23px, 2.4vw, 30px);
  --fs-h4:      20px;
  --fs-body-lg: 19px;
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ---------- LETTER SPACING ---------- */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-eyebrow: 0.16em;

  /* ---------- RADII ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill:999px;

  /* ---------- SPACING (4pt base) ---------- */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px;
  --sp-4:  16px; --sp-5:  20px; --sp-6:  24px;
  --sp-8:  32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* ---------- SHADOWS (dark-tinted) ---------- */
  --shadow-xs:  0 1px 2px rgba(4,16,31,0.06);
  --shadow-sm:  0 2px 6px rgba(4,16,31,0.07);
  --shadow-md:  0 8px 20px rgba(4,16,31,0.09);
  --shadow-lg:  0 16px 40px rgba(4,16,31,0.11);
  --shadow-xl:  0 28px 64px rgba(4,16,31,0.15);
  --shadow-blue:   0 8px 24px rgba(2,76,218,0.28);
  --shadow-yellow: 0 10px 24px rgba(245,197,24,0.38);
  --shadow-focus:  0 0 0 4px rgba(2,76,218,0.22);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- LAYOUT ---------- */
  --container:  1200px;
  --container-narrow: 760px;
}

/* =====================================================================
   SEMANTIC TEXT CLASSES
   ===================================================================== */
.ds-display {
  font-family:var(--font-display);font-weight:var(--w-black);
  font-size:var(--fs-display);line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);color:var(--fg1);
}
.ds-h1 {
  font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:var(--fs-h1);line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);color:var(--fg1);
}
.ds-h2 {
  font-family:var(--font-display);font-weight:var(--w-bold);
  font-size:var(--fs-h2);line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);color:var(--fg1);
}
.ds-h3 {
  font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:var(--fs-h3);line-height:var(--lh-snug);color:var(--fg1);
}
.ds-h4 {
  font-family:var(--font-display);font-weight:var(--w-semibold);
  font-size:var(--fs-h4);line-height:var(--lh-snug);color:var(--fg1);
}
.ds-eyebrow {
  font-family:var(--font-body);font-weight:var(--w-semibold);
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--blue-600);
}
.ds-body-lg { font-family:var(--font-body);font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--fg2); }
.ds-body    { font-family:var(--font-body);font-size:var(--fs-body);   line-height:var(--lh-relaxed);color:var(--fg2); }
.ds-body-sm { font-family:var(--font-body);font-size:var(--fs-body-sm);line-height:var(--lh-normal); color:var(--fg2); }
.ds-caption { font-family:var(--font-body);font-weight:var(--w-medium);font-size:var(--fs-caption);line-height:var(--lh-normal);color:var(--fg3); }
.ds-mono    { font-family:var(--font-mono);font-size:var(--fs-body-sm);color:var(--fg1); }


/* Solo Lab — Website UI kit styles  v2  (real brand colors + assets) */
/* tokens inlined */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--fg1);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}

.wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 24px}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-body);font-weight:600;font-size:16px;border:0;
  border-radius:var(--r-md);padding:14px 24px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  transition:all var(--dur-base) var(--ease-out);text-align:center;line-height:1.1}
.btn .arr{transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}

/* Yellow CTA — signature button */
.btn-cta{background:var(--yellow-500);color:var(--dark-900);box-shadow:var(--shadow-yellow)}
.btn-cta:hover{background:var(--yellow-400);box-shadow:0 14px 30px rgba(245,197,24,.5);transform:translateY(-1px)}
.btn-cta:active{background:var(--yellow-600);transform:scale(.98)}

/* Blue primary */
.btn-blue{background:var(--blue-600);color:#fff;box-shadow:var(--shadow-blue)}
.btn-blue:hover{background:var(--blue-500);transform:translateY(-1px)}
.btn-blue:active{background:var(--blue-700);transform:scale(.98)}

/* Dark primary */
.btn-primary{background:var(--dark-900);color:#fff}
.btn-primary:hover{background:var(--dark-700);transform:translateY(-1px)}
.btn-primary:active{background:var(--dark-950);transform:scale(.98)}

/* Outline */
.btn-secondary{background:#fff;color:var(--dark-900);border:1.5px solid var(--gray-300)}
.btn-secondary:hover{border-color:var(--dark-500);background:var(--gray-50)}

/* Ghost */
.btn-ghost{background:transparent;color:var(--blue-600);padding:14px 8px}
.btn-ghost:hover{color:var(--blue-500)}

.btn-lg{font-size:18px;padding:17px 30px}
.btn-sm{font-size:14px;padding:10px 16px}
.btn-block{width:100%;justify-content:center}

/* ---------- Eyebrow ---------- */
.eyebrow{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600)}

/* ---------- Nav links ---------- */
.nav-links a,.login-link{white-space:nowrap}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) var(--ease-out)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* ---------- Badge ---------- */
.badge{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;
  display:inline-flex;align-items:center;gap:5px;line-height:1;white-space:nowrap}
.badge-yellow{background:var(--yellow-500);color:var(--dark-900)}
.badge-blue{background:var(--blue-600);color:#fff}
.badge-blue-soft{background:var(--blue-50);color:var(--blue-600)}
.badge-dark{background:var(--dark-900);color:#fff}
.badge-soft{background:var(--gray-100);color:var(--gray-700)}
.badge-green{background:var(--success-bg);color:var(--success)}
.badge-red{background:var(--error-bg);color:var(--error)}

/* ---------- Icon ---------- */
.ic{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.ic svg{display:block}

/* ---------- Section ---------- */
.section{padding:88px 0}
.section-sm{padding:56px 0}
.center{text-align:center}

/* ---------- Pill tag ---------- */
.tag{font-size:12px;font-weight:600;padding:5px 12px;border-radius:8px;
  background:var(--gray-100);color:var(--gray-700)}

/* ---------- Book cover ---------- */
.book{position:relative;border-radius:6px 12px 12px 6px;
  background:linear-gradient(135deg,var(--dark-800),var(--dark-900));
  box-shadow:var(--shadow-lg);overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between}
.book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:rgba(0,0,0,.22)}
.book .spineline{position:absolute;left:16px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.1)}

/* ---------- Avatar / Photo ---------- */
.avatar{border-radius:50%;background:var(--blue-50);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;flex:none}
.photo{background:var(--gray-100);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--gray-400)}
.photo.blue{background:var(--blue-50);color:var(--blue-200)}

/* ---------- Two-pillar colors ---------- */
.pillar-psych{--pc:#6C3FC5;--pb:#F0EAFF}   /* psychology: purple */
.pillar-digital{--pc:var(--blue-600);--pb:var(--blue-50)} /* digital: brand blue */

@media (prefers-reduced-motion:reduce){.btn,.card{transition:none}}

/* =====================================================================
   RESPONSIVE  —  desktop / tablet / mobile
   External !important overrides inline grid styles set in JSX.
   ===================================================================== */

/* mobile-only chrome, hidden on desktop */
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--fg1)}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:10px 18px 18px;
  border-top:1px solid var(--border);background:#fff}
.mobile-menu a{font-size:16px;font-weight:600;color:var(--fg1);padding:12px 10px;border-radius:10px}
.mobile-menu a.active{background:var(--blue-50);color:var(--blue-600)}

/* ---------- TABLET  ≤ 1024px ---------- */
@media (max-width:1024px){
  .r-cards-3{grid-template-columns:repeat(2,1fr) !important}
  .r-ebooks {grid-template-columns:repeat(3,1fr) !important}
  .r-footer {grid-template-columns:1.5fr 1fr 1fr !important;gap:32px !important}
  .section{padding:64px 0 !important}
}

/* ---------- MOBILE  ≤ 768px ---------- */
@media (max-width:768px){
  /* nav: hide desktop links, show hamburger */
  .nav-links,.login-link,.desktop-cta{display:none !important}
  .nav-toggle{display:inline-flex !important}
  .mobile-menu[data-open="1"]{display:flex !important}

  /* stack every multi-column grid */
  .r-hero,.r-pillars,.r-2col,.r-cards-2,.r-cards-3,
  .r-split,.r-learn,.r-quiz,.r-about{grid-template-columns:1fr !important}
  .r-ebooks{grid-template-columns:repeat(2,1fr) !important}
  .r-footer{grid-template-columns:1fr 1fr !important;gap:28px !important}

  /* tighter side padding on all containers */
  .wrap{padding-left:18px !important;padding-right:18px !important}
  .wrap-narrow{padding-left:18px !important;padding-right:18px !important}

  /* section rhythm */
  .section{padding:48px 0 !important}
  .section-sm{padding:36px 0 !important}

  /* hero */
  .r-hero{gap:30px !important;padding-top:36px !important;padding-bottom:44px !important;text-align:left}
  .hero-h1{font-size:30px !important;line-height:1.18 !important}
  .hero-photo{width:min(280px,76vw) !important;height:auto !important;aspect-ratio:3/3.8}
  .float-bl{left:-6px !important;bottom:-14px !important}
  .float-tr{right:-6px !important;top:8px !important}

  /* pillars: drop the vertical divider */
  .r-pillars>div{border-right:0 !important;border-bottom:1px solid var(--border)}
  .r-pillars>div:last-child{border-bottom:0 !important}

  /* big inline-padded cards (about / quiz / pricing) */
  .pad-m{padding:28px 22px !important}
  .quiz-h2{font-size:23px !important}

  /* course/ebook detail: drop sticky so the buy card flows inline */
  .no-sticky-m{position:static !important;top:auto !important}

  /* let the buy card / hero image not get squeezed */
  .r-split{gap:32px !important}
}

/* ---------- SMALL PHONES  ≤ 400px ---------- */
@media (max-width:400px){
  .r-ebooks{grid-template-columns:1fr 1fr !important;gap:12px !important}
  .hero-h1{font-size:27px !important}
  .pad-m{padding:24px 18px !important}
}