/**
 * Tieu Hao Pro design tokens.
 *
 * Single source of truth for visual primitives used by component CSS.
 * Keep semantic roles stable; change values here when the visual direction evolves.
 */

:root {
    /* Brand */
    --thp-color-brand: #16834b;
    --thp-color-brand-deep: #0b4f32;
    --thp-color-action: #16a05d;
    --thp-color-success: #137a45;
    --thp-color-success-soft: #e7f6ed;
    --thp-color-warning: #9a6700;
    --thp-color-warning-soft: #fff4d6;
    --thp-color-brand-soft: #eaf7f0;

    /* Neutral */
    --thp-color-text: #17231d;
    --thp-color-text-secondary: #4d5b53;
    --thp-color-surface: #ffffff;
    --thp-color-surface-subtle: #f5f8f6;
    --thp-color-border: #dce6e0;
    --thp-color-border-strong: #b8c9bf;

    /* Typography */
    --thp-font-base: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --thp-font-size-sm: 0.875rem;
    --thp-font-size-md: 1rem;
    --thp-font-size-lg: 1.75rem;
    --thp-font-size-xl: 3rem;

    /* Layout */
    --thp-content-width: 1120px;
    --thp-wide-width: 1280px;
    --thp-container-gutter: 24px;
    --thp-header-offset: 0px;

    /* Spacing */
    --thp-space-1: 4px;
    --thp-space-2: 8px;
    --thp-space-3: 12px;
    --thp-space-4: 16px;
    --thp-space-5: 20px;
    --thp-space-6: 24px;
    --thp-space-7: 32px;
    --thp-space-8: 40px;
    --thp-space-9: 48px;
    --thp-space-10: 64px;
    --thp-space-11: 80px;
    --thp-space-12: 96px;

    /* Shape */
    --thp-radius-sm: 8px;
    --thp-radius-md: 12px;
    --thp-radius-lg: 20px;
    --thp-radius-pill: 999px;

    /* Effects */
    --thp-shadow-sm: 0 2px 8px rgb(23 35 29 / 8%);
    --thp-shadow-md: 0 8px 24px rgb(23 35 29 / 10%);
    --thp-shadow-lg: 0 16px 40px rgb(23 35 29 / 14%);
    --thp-z-modal: 1000;

    /* Motion */
    --thp-duration-fast: 160ms;
    --thp-duration-base: 240ms;
    --thp-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --thp-notification-progress: 0%;
}