:root {
  /* ── Core palette ── */
  --color-bg:           #070707;
  --color-bg-soft:      #111113;
  --color-surface:      #17171b;
  --color-surface-2:    #202026;
  --color-surface-3:    #26262d;
  --color-surface-lift: #2a2a32;

  /* ── Brand gold ── */
  --color-primary:        #e2b84a;
  --color-primary-strong: #f6c84c;
  --color-primary-dark:   #b9891f;
  --color-primary-soft:   rgba(226, 184, 74, 0.16);
  --color-primary-glow:   rgba(246, 200, 76, 0.22);

  /* ── Borders ── */
  --color-border:        rgba(226, 184, 74, 0.20);
  --color-border-strong: rgba(246, 200, 76, 0.36);
  --color-border-faint:  rgba(226, 184, 74, 0.10);

  /* ── Text ── */
  --color-text:        #f5f0e4;
  --color-text-strong: #fff8ea;
  --color-muted:       #b8b0a0;
  --color-muted-2:     #8f887a;

  /* ── Semantic ── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;

  /* ── Testimonial / trust strip ── */
  --color-trust-bg:    rgba(226, 184, 74, 0.07);
  --color-trust-border: rgba(226, 184, 74, 0.18);
  --color-star:        #f6c84c;
  --color-testimonial-bg: rgba(255, 255, 255, 0.025);

  /* ── Shadows ── */
  --shadow-xs: 0 2px 8px  rgba(0,0,0,0.22);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.28);
  --shadow-md: 0 14px 34px rgba(0,0,0,0.36);
  --shadow-lg: 0 24px 54px rgba(0,0,0,0.42);
  --shadow-gold: 0 0 24px rgba(226,184,74,0.18);

  /* ── Radii ── */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* ── Typography ── */
  --font-sans:    "Noto Sans Thai", sans-serif;
  --font-display: "Noto Sans Thai", sans-serif;
  --font-alt:     "Noto Sans Thai", sans-serif;
}

@layer base {
  html {
    color: var(--color-text);
    background:
      radial-gradient(circle at top, rgba(226, 184, 74, 0.08), transparent 34%),
      linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: rgba(226, 184, 74, 0.28);
    color: var(--color-text-strong);
  }
}

@layer components {
  /* Shell */
  .ds-shell {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.02), transparent 26%),
      linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
  }

  /* Cards */
  .ds-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.03), transparent 24%),
      var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
  }

  .ds-card-strong {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), transparent 18%),
      var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
  }

  /* Gold CTA */
  .ds-cta {
    background: linear-gradient(135deg, #f7d76e 0%, #e2b84a 48%, #b9891f 100%);
    color: #111111;
    box-shadow: 0 14px 30px rgba(185,137,31,0.26);
  }
  .ds-cta:hover {
    background: linear-gradient(135deg, #f8dd82 0%, #edc95f 48%, #c59522 100%);
    box-shadow: 0 18px 38px rgba(185,137,31,0.34);
  }

  /* Pulse CTA (animated) */
  .ds-cta-pulse {
    animation: ctaPulse 2.8s ease-in-out infinite;
  }
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 14px 30px rgba(185,137,31,0.26); }
    50%       { box-shadow: 0 14px 42px rgba(246,200,76,0.52), 0 0 0 6px rgba(246,200,76,0.10); }
  }

  /* Badge */
  .ds-badge {
    background: rgba(226,184,74,0.12);
    border: 1px solid rgba(226,184,74,0.24);
    color: var(--color-text-strong);
  }

  /* Input */
  .ds-input {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(226,184,74,0.16);
    color: var(--color-text);
    border-radius: var(--radius-sm);
  }
  .ds-input:focus {
    outline: none;
    border-color: rgba(246,200,76,0.42);
    box-shadow: 0 0 0 4px rgba(226,184,74,0.12);
  }

  /* Trust badge chip */
  .ds-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-trust-bg);
    border: 1px solid var(--color-trust-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-strong);
    white-space: nowrap;
  }

  /* Testimonial card */
  .ds-testimonial {
    background: var(--color-testimonial-bg);
    border: 1px solid var(--color-border-faint);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }

  /* Accordion */
  .ds-accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    overflow: hidden;
    transition: border-color 200ms ease;
  }
  .ds-accordion-item.is-open {
    border-color: var(--color-border-strong);
    background: rgba(226,184,74,0.04);
  }

  /* Gold divider */
  .ds-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
  }

  /* Section label */
  .ds-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(226,184,74,0.10);
    border: 1px solid rgba(226,184,74,0.20);
    color: var(--color-primary-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
}