/* =========================================================
   style.css
   Global styles: CSS variables (design tokens), typography,
   color system, base element resets.

   This file is the single source of truth for the site's
   look and feel. To change the whole theme, change the
   variables in :root below — avoid hardcoding colors,
   spacing, or radii anywhere else in the project.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600&family=Sarabun:wght@300;400;500;600&display=swap');

:root {
    /* ---- Color palette ----
       Minimal pastel / cute / clean. Keep this list short
       (4–6 core colors) and reuse them everywhere. */
    --color-bg: #FBF6EF;          /* warm cream page background */
    --color-surface: #FFFFFF;     /* cards, keypad buttons, panels */
    --color-primary: #E7B8BE;     /* dusty pink — primary actions */
    --color-secondary: #9CB89A;   /* sage — secondary accents */
    --color-accent: #C3B6DE;      /* soft lavender — highlights */
    --color-text: #4A4038;        /* warm dark brown-gray — body text */
    --color-muted: #9A8F82;       /* muted text, placeholders, hints */
    --color-error: #C97B7B;       /* soft dusty red — error state only */

    /* Chat bubble colors (Page 3). Kept as their own tokens so the
       chat can lean less on pink than the rest of the site while
       still reading as part of the same pastel family. */
    --color-bubble-in: #FFFFFF;      /* incoming message bubble */
    --color-bubble-out: #E9EFE5;     /* outgoing (chosen) bubble — soft sage tint */

    /* ---- Radii ---- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-round: 50%;

    /* ---- Shadow ---- */
    --shadow-soft: 0 8px 24px rgba(74, 64, 56, 0.10);
    --shadow-softer: 0 4px 12px rgba(74, 64, 56, 0.06);

    /* ---- Transitions ---- */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 550ms cubic-bezier(0.22, 1, 0.36, 1);

    /* ---- Typography ---- */
    --font-display: 'Mitr', 'Noto Sans Thai', sans-serif;
    --font-body: 'Sarabun', 'Noto Sans Thai', sans-serif;

    /* ---- Spacing scale ---- */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;

    /* ---- Viewport-aware sizes ----
       These scale with the viewport's HEIGHT (not width), so a
       tall stack of elements (illustration + title + dots + a
       4-row keypad) always fits the visible screen without
       producing a vertical scrollbar, on short phones and tall
       screens alike. dvh falls back to vh automatically in any
       browser that doesn't support it. */
    --hero-size: clamp(84px, 16dvh, 150px);
    --keypad-key-size: clamp(46px, 8dvh, 76px);
    --keypad-gap: clamp(8px, 1.6dvh, 16px);
    --stack-gap: clamp(10px, 2.2dvh, 24px);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Prevents horizontal scroll from any stray wide element */
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* ---- Typography base ---- */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.35;
}

.page-title {
    font-size: clamp(1.1rem, 4.4dvh, 1.4rem);
}

p {
    max-width: 60ch;
}

/* ---- Visible keyboard focus (accessibility floor) ---- */
:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ---- Respect reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Shared page shell ----
   Every page centers its content in a single-column column
   that never exceeds a comfortable reading/interaction width. */
.page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4dvh, 40px) var(--space-sm);
}

.page-content {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--stack-gap);
}