/* ============================================================
   We Smile Dental Clinic — Foundations
   Color + Type tokens. Import this file once at the root.
   ============================================================ */

@font-face {
  font-family: 'Anuphan';
  src: url('fonts/Anuphan-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Anuphan-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ---------- */
  /* Pulled from the logo: deep indigo-navy + saturated orange. */
  --ws-navy-900: #1A2A6C;   /* deepest, used for text on white */
  --ws-navy-800: #213585;   /* primary brand navy (logo outline) */
  --ws-navy-700: #2E45A8;
  --ws-navy-500: #4A63D6;
  --ws-navy-200: #C8D1F2;
  --ws-navy-100: #E6EAF8;
  --ws-navy-50:  #F2F4FB;

  --ws-orange-700: #C9450E;
  --ws-orange-600: #E85A14;   /* primary CTA */
  --ws-orange-500: #F26B1F;   /* logo orange */
  --ws-orange-300: #FBB388;
  --ws-orange-200: #FDD4B8;
  --ws-orange-100: #FFE9D9;
  --ws-orange-50:  #FFF5EC;

  /* ---------- Neutrals ---------- */
  --ws-white:    #FFFFFF;
  --ws-bone:     #FBFAF7;     /* warm off-white, page bg */
  --ws-cloud:    #F5F6F8;     /* cool surface */
  --ws-line:     #E7E9EE;     /* hairline borders */
  --ws-line-strong: #D2D6DE;
  --ws-ink-700:  #2A2F3A;     /* body */
  --ws-ink-500:  #5A6172;     /* secondary text */
  --ws-ink-400:  #8089A0;     /* muted */
  --ws-ink-300:  #B5BBC9;     /* placeholder */

  /* ---------- Semantic ---------- */
  --ws-bg:           var(--ws-bone);
  --ws-surface:      var(--ws-white);
  --ws-surface-soft: var(--ws-orange-50);
  --ws-surface-cool: var(--ws-navy-50);

  --ws-fg-1: var(--ws-navy-900);   /* headings */
  --ws-fg-2: var(--ws-ink-700);    /* body */
  --ws-fg-3: var(--ws-ink-500);    /* secondary */
  --ws-fg-4: var(--ws-ink-400);    /* muted */

  --ws-primary:        var(--ws-orange-600);
  --ws-primary-hover:  var(--ws-orange-700);
  --ws-primary-soft:   var(--ws-orange-100);
  --ws-accent:         var(--ws-navy-800);
  --ws-accent-hover:   var(--ws-navy-900);

  --ws-success: #C9450E;   /* dark orange — confirmation in brand */
  --ws-warning: #E0A106;   /* yellow */
  --ws-danger:  #D7443A;
  --ws-info:    #2EA8C9;   /* cyan-blue, distinct from brand navy */

  /* ---------- Typography ---------- */
  --ws-font-sans: 'Anuphan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ws-font-thai: 'Anuphan', sans-serif;
  --ws-font-display: 'Anuphan', -apple-system, sans-serif;

  --ws-text-xs:   12px;
  --ws-text-sm:   14px;
  --ws-text-base: 16px;
  --ws-text-md:   18px;
  --ws-text-lg:   20px;
  --ws-text-xl:   24px;
  --ws-text-2xl:  32px;
  --ws-text-3xl:  40px;
  --ws-text-4xl:  56px;
  --ws-text-5xl:  72px;

  --ws-leading-tight:  1.15;
  --ws-leading-snug:   1.3;
  --ws-leading-normal: 1.5;
  --ws-leading-loose:  1.7;

  --ws-tracking-tight:  -0.02em;
  --ws-tracking-normal: 0;
  --ws-tracking-wide:   0.04em;
  --ws-tracking-caps:   0.12em;

  /* ---------- Spacing ---------- */
  --ws-space-1:  4px;
  --ws-space-2:  8px;
  --ws-space-3:  12px;
  --ws-space-4:  16px;
  --ws-space-5:  24px;
  --ws-space-6:  32px;
  --ws-space-7:  48px;
  --ws-space-8:  64px;
  --ws-space-9:  96px;
  --ws-space-10: 128px;

  /* ---------- Radii ---------- */
  --ws-radius-xs:   6px;
  --ws-radius-sm:   10px;
  --ws-radius-md:   14px;
  --ws-radius-lg:   20px;
  --ws-radius-xl:   28px;
  --ws-radius-2xl:  40px;
  --ws-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  /* Soft, warm-tinted shadows — no hard blacks. */
  --ws-shadow-xs: 0 1px 2px rgba(33, 53, 133, 0.06);
  --ws-shadow-sm: 0 2px 8px rgba(33, 53, 133, 0.07);
  --ws-shadow-md: 0 8px 24px rgba(33, 53, 133, 0.08), 0 1px 2px rgba(33, 53, 133, 0.05);
  --ws-shadow-lg: 0 18px 44px rgba(33, 53, 133, 0.10), 0 4px 10px rgba(33, 53, 133, 0.05);
  --ws-shadow-xl: 0 32px 80px rgba(33, 53, 133, 0.14);
  --ws-shadow-cta: 0 10px 24px rgba(232, 90, 20, 0.28);
  --ws-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --ws-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ws-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ws-dur-fast:    140ms;
  --ws-dur-base:    220ms;
  --ws-dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --ws-container:   1200px;
  --ws-container-narrow: 880px;
  --ws-gutter:      24px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html { color: var(--ws-fg-2); background: var(--ws-bg); }
body {
  font-family: var(--ws-font-sans);
  font-size: var(--ws-text-base);
  line-height: var(--ws-leading-normal);
  color: var(--ws-fg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ws-h1, h1.ws {
  font-family: var(--ws-font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: var(--ws-leading-tight);
  letter-spacing: var(--ws-tracking-tight);
  color: var(--ws-fg-1);
  text-wrap: balance;
}

.ws-h2, h2.ws {
  font-family: var(--ws-font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: var(--ws-leading-tight);
  letter-spacing: var(--ws-tracking-tight);
  color: var(--ws-fg-1);
  text-wrap: balance;
}

.ws-h3, h3.ws {
  font-family: var(--ws-font-sans);
  font-weight: 700;
  font-size: var(--ws-text-2xl);
  line-height: var(--ws-leading-snug);
  color: var(--ws-fg-1);
  letter-spacing: -0.01em;
}

.ws-h4, h4.ws {
  font-family: var(--ws-font-sans);
  font-weight: 700;
  font-size: var(--ws-text-xl);
  line-height: var(--ws-leading-snug);
  color: var(--ws-fg-1);
}

.ws-eyebrow {
  font-family: var(--ws-font-sans);
  font-size: var(--ws-text-xs);
  font-weight: 600;
  letter-spacing: var(--ws-tracking-caps);
  text-transform: uppercase;
  color: var(--ws-primary);
}

.ws-lead {
  font-size: var(--ws-text-md);
  line-height: var(--ws-leading-loose);
  color: var(--ws-fg-3);
  text-wrap: pretty;
}

.ws-p, p.ws {
  font-size: var(--ws-text-base);
  line-height: var(--ws-leading-loose);
  color: var(--ws-fg-2);
  text-wrap: pretty;
}

.ws-small { font-size: var(--ws-text-sm); color: var(--ws-fg-3); }
.ws-caption { font-size: var(--ws-text-xs); color: var(--ws-fg-4); letter-spacing: 0.02em; }