/* ============================================================================
 * JoJo Cal Salepage — Design System CSS
 * Source of truth: design/salepage/line-mini-app/project/_ds/jojo-design-
 * system-.../tokens/{colors,typography,radius,spacing,payment}.css
 * Fonts: Mitr (heading) / Noto Sans Thai (body) / Inter (numbers)
 * Loaded once, shared by every public page + admin panel.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@300;400;500;600&family=Noto+Sans+Thai:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand: Orange (primary — CTA, mascot accent, calorie progress) ---- */
  --orange-50:  #FFF3E4;
  --orange-100: #FFE3C2;
  --orange-200: #FFCB90;
  --orange-300: #FFB05C;
  --orange-400: #FF9C38;
  --orange-500: #FF8A1F; /* JoJo Orange — primary */
  --orange-600: #F05A1A; /* JoJo Deep Orange — hover/active */
  --orange-700: #C6480F;
  --orange-800: #9B380C;
  --orange-900: #6E280A;

  /* ---- Brand: Green (mint health, success) ---- */
  --green-50:  #E7F8F1;
  --green-100: #C6EFDF;
  --green-200: #92E1C4;
  --green-300: #5FD3A8;
  --green-400: #3FCB97;
  --green-500: #31C48D; /* Mint Health */
  --green-600: #22A06B; /* Leaf Green */
  --green-700: #1B7E54;
  --green-800: #155F40;
  --green-900: #10462F;

  /* ---- Brand: Blue (water tracking, info) ---- */
  --blue-50:  #EAF4FF;
  --blue-100: #CCE4FF;
  --blue-200: #A0CCFF;
  --blue-300: #74B4FF;
  --blue-400: #5AA8FF;
  --blue-500: #4DA3FF; /* Sky Blue */
  --blue-600: #2F86E6;
  --blue-700: #2168B4;
  --blue-800: #184E86;
  --blue-900: #123A63;

  /* ---- Neutrals (warm cream) ---- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FFF9F1;
  --gray-50:  #FFF5E8;
  --gray-100: #F6ECDD;
  --gray-200: #EADCCB;
  --gray-300: #D8C6B0;
  --gray-400: #BFAE99;
  --gray-500: #8A7869;
  --gray-600: #6B5A50;
  --gray-700: #4A3D34;
  --gray-800: #372B22;
  --gray-900: #2E241F;

  /* ---- Semantic status ---- */
  --success-bg: var(--green-50);
  --success:    #31C48D;
  --success-fg: var(--green-800);
  --warning-bg: #FFF3DE;
  --warning:    #FFB020;
  --warning-fg: #8A5A0A;
  --error-bg:   #FDECEC;
  --error:      #F05252;
  --error-fg:   #8A1F1F;
  --info-bg:    var(--blue-50);
  --info:       #4DA3FF;
  --info-fg:    var(--blue-800);

  /* ---- Macro accents ---- */
  --macro-protein: var(--orange-500);
  --macro-carbs:   var(--blue-500);
  --macro-fat:     var(--warning);
  --macro-fiber:   var(--green-500);

  /* ---- Semantic aliases ---- */
  --brand:            var(--orange-500);
  --brand-hover:      var(--orange-600);
  --brand-active:     var(--orange-700);
  --brand-subtle:     var(--orange-50);
  --brand-on:         #FFFFFF;

  --accent-green:     var(--green-500);
  --accent-blue:      var(--blue-500);

  --bg-app:           var(--gray-50);
  --bg-surface:       var(--gray-0);
  --bg-subtle:        var(--gray-25);
  --bg-sunken:        var(--gray-100);
  --bg-inverse:       var(--gray-900);

  --text-strong:      var(--gray-900);
  --text-body:        var(--gray-700);
  --text-muted:       var(--gray-600);
  --text-faint:       var(--gray-500);
  --text-disabled:    #CFC4B8;
  --text-on-brand:    #FFFFFF;
  --text-inverse:     var(--gray-25);

  --border-subtle:    #F0E6D8;
  --border-default:   var(--gray-200);
  --border-strong:    var(--gray-300);
  --focus-ring:       var(--orange-400);

  /* ---- Payment / plan themes ---- */
  --plan-free:        #8A7869;
  --plan-free-light:  #F6ECDD;

  --plan-pro:         #6D4AB8;
  --plan-pro-deep:    #4E2F92;
  --plan-pro-light:   #EFE8FB;
  --plan-pro-accent:  #F9B233;
  --plan-pro-grad:    linear-gradient(135deg, #7C5CD6, #4E2F92);

  --plan-max:         #D98A00;
  --plan-max-deep:    #A66A00;
  --plan-max-light:   #FFF3D6;
  --plan-max-accent:  #22A06B;
  --plan-max-grad:    linear-gradient(135deg, #F9B233, #22A06B);

  --plan-scan:        #17B0A6;
  --plan-scan-deep:   #0E8A82;
  --plan-scan-light:  #DCF6F3;
  --plan-scan-accent: #4DA3FF;
  --plan-scan-grad:   linear-gradient(135deg, #2ED3C6, #4DA3FF);

  /* ---- Typography ---- */
  --font-display: 'Mitr', 'Noto Sans Thai', system-ui, sans-serif;
  --font-body:    'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  --font-metric:  'Inter', 'Noto Sans Thai', ui-monospace, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display:  3.5rem;
  --fs-h1:       2.5rem;
  --fs-h2:       2rem;
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-lg:       1.125rem;
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-xxs:      0.6875rem;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --ls-tight:    -0.01em;
  --ls-snug:     -0.005em;
  --ls-normal:   0;
  --ls-wide:     0.03em;
  --ls-caps:     0.06em;

  /* ---- Radius & shadows ---- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-full: 50%;

  --shadow-xs:  0 1px 2px rgba(74, 46, 31, 0.05);
  --shadow-sm:  0 2px 8px rgba(74, 46, 31, 0.06);
  --shadow-md:  0 4px 16px rgba(74, 46, 31, 0.08);
  --shadow-lg:  0 10px 28px rgba(74, 46, 31, 0.12);
  --shadow-xl:  0 20px 48px rgba(74, 46, 31, 0.16);
  --shadow-brand: 0 8px 24px rgba(255, 138, 31, 0.24);
  --shadow-green: 0 8px 22px rgba(49, 196, 141, 0.24);
  --shadow-inset: inset 0 1px 2px rgba(74, 46, 31, 0.05);

  /* ---- Spacing (4px base grid) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --content-max: 1200px;
}

/* ============================================================================
 * Base / reset
 * ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-strong);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-hover);
}

img {
  max-width: 100%;
}

::selection {
  background: var(--orange-200);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

/* ============================================================================
 * Layout helpers
 * ========================================================================== */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--brand);
}

.section {
  padding: 80px 24px;
}

.section-subtle {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

/* ============================================================================
 * Buttons
 * ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: 1.02rem;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.btn-primary:hover {
  background: var(--brand-hover);
  color: #fff;
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-body);
  border: 1px solid var(--border-default);
}

.btn-secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 0.9rem;
}

/* ============================================================================
 * Cards
 * ========================================================================== */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.card-sm {
  border-radius: var(--radius-lg);
}

/* ============================================================================
 * Forms (admin)
 * ========================================================================== */
input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-strong);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  background: var(--bg-surface);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-subtle);
}

label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-body);
}

/* ============================================================================
 * Utilities
 * ========================================================================== */
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-brand { color: var(--brand); }
.text-center { text-align: center; }