/*
 * Design tokens for the public site — refined hybrid palette.
 * Neutral layout (Apple-style whitespace) + warm peach accent that
 * keeps the soulful, ceremonial brand identity.
 *
 * Do not duplicate values in component files — reference these variables.
 */
:root {
    /* === Brand & accent === */
    --ub-color-brand: #c8915f;          /* deeper peach — works on white */
    --ub-color-brand-soft: #dda372;     /* original peach — tints / gradients */
    --ub-color-brand-hover: #b07c4d;
    --ub-color-brand-text: #a14f12;     /* accessible warm accent on pale chrome */
    --ub-color-accent: #503a3a;
    --ub-color-accent-hover: #6a4c45;

    /* === Text — Apple-inky scale === */
    --ub-color-heading: #1d1d1f;
    --ub-color-body: #424245;
    --ub-color-body-muted: #6e6e73;
    --ub-color-nav: #1d1d1f;
    --ub-color-on-brand: #ffffff;
    --ub-color-on-dark: #f5f5f7;

    /* === Surfaces === */
    --ub-color-page-bg: #ffffff;
    --ub-color-section-bg: #ffffff;
    --ub-color-section-soft: #f8f5f1;     /* warm whisper for alt sections */
    --ub-color-section-cool: #f5f5f7;     /* Apple-style cool surface */
    --ub-color-section-dark: #1d1d1f;     /* dark hero / contrast section */
    --ub-color-footer-bg: #f8f5f1;
    --ub-color-chrome-peach-soft: #f3e6da;
    --ub-color-dropdown-note-bg: #fbf8f5;
    --ub-color-dropdown-feature-border: #e8d5c5;
    --ub-color-footer-divider: #e3d8cf;
    --ub-color-nav-border: #ebe4de;
    --ub-color-divider: #e7e7ea;
    --ub-color-hover-tint: rgba(200, 145, 95, 0.10);

    /* === Card / panel tints — kept calm and uniform === */
    --ub-color-service-card-bg: #f8f5f1;
    --ub-color-eregelt-card-bg: #f5f5f7;
    --ub-color-faq-bg: transparent;
    --ub-color-testimonial-bg: #f8f5f1;
    --ub-color-testimonial-avatar-border: #ebe4de;
    --ub-color-partner-accent: #ff0101;

    /* === Product variant swatches — kept neutral on purpose ===
       Хөшөө/хорго материалын төрлийн зураглал — өнгөний бүртгэлээс хамаардаггүй
       ерөнхий placeholder. */
    --ub-color-swatch-stone: #84837e;
    --ub-color-swatch-charcoal: #1f1f1f;
    --ub-color-swatch-pebble: #c9c5bd;
    --ub-color-swatch-sand: #ddd2c2;
    --ub-color-product-tint: #fffbfb;
    --ub-color-product-warm-text: #564c3a;
    --ub-color-variant-count: rgba(0, 0, 0, 0.8);   /* "+N" хувилбарын тооллын текст */

    /* === Base monochromes — semantic shortcuts === */
    --ub-color-white: #ffffff;
    --ub-color-black: #000000;
    --ub-color-success-state: #4ade80;
    --ub-color-section-cream: #f8f6f1;
    --ub-color-shadow-paper: #f3f4f6;

    /* === Error/danger tones (forms, alerts) === */
    --ub-color-error-bg: #fbe9e7;
    --ub-color-error-text: #b71c1c;
    --ub-color-error-border: #e57373;

    /* === Typography ===
       Single sans-serif family — Montserrat — used for both body and display. */
    --ub-font-body: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ub-font-display: var(--ub-font-body);

    /* Type scale (px) — extended upward for Apple-style hero headlines */
    --ub-text-xs: 0.75rem;        /* 12px */
    --ub-text-sm: 0.8125rem;      /* 13px */
    --ub-text-base: 0.9375rem;    /* 15px */
    --ub-text-md: 1rem;           /* 16px */
    --ub-text-lg: 1.125rem;       /* 18px */
    --ub-text-xl: 1.25rem;        /* 20px */
    --ub-text-2xl: 1.5rem;        /* 24px */
    --ub-text-3xl: 2rem;          /* 32px */
    --ub-text-4xl: 2.5rem;        /* 40px */
    --ub-text-5xl: 3.25rem;       /* 52px */
    --ub-text-6xl: 4.25rem;       /* 68px — hero */

    /* Line-heights */
    --ub-leading-tight: 1.1;
    --ub-leading-display: 1.15;     /* large display headings */
    --ub-leading-snug: 1.4;
    --ub-leading-normal: 1.6;
    --ub-leading-body: 1.65;        /* body copy */
    --ub-leading-relaxed: 1.75;

    /* Letter-spacing — Apple uses tight tracking on display */
    --ub-tracking-display: -0.022em;
    --ub-tracking-eyebrow: 0.16em;

    /* === Spacing === */
    --ub-space-xs: 4px;
    --ub-space-s: 8px;
    --ub-space-m: 10px;
    --ub-space-l: 12px;
    --ub-space-xl: 16px;
    --ub-space-2xl: 24px;
    --ub-space-3xl: 32px;
    --ub-space-4xl: 36px;
    --ub-space-5xl: 40px;
    --ub-space-6xl: 64px;
    --ub-space-7xl: 80px;
    --ub-space-8xl: 100px;
    --ub-space-9xl: 140px;

    /* === Icon chips / decorative marks ===
       Reusable circular/contained icon sizes so chip & lotus dimensions
       are not hardcoded per component. */
    --ub-size-icon-chip-sm: 40px;   /* small section-heading mark */
    --ub-size-icon-chip-md: 44px;   /* default chip / hero lotus */
    --ub-size-icon-chip-lg: 48px;   /* larger empty-state lotus */
    --ub-size-touch-target: 44px;   /* comfortable minimum interactive target */
    --ub-size-hairline: 3px;        /* thin accent bar / rule */
    --ub-size-empty-panel: 220px;   /* capped height for empty-state panels */

    /* === Radii === */
    --ub-radius-xs: 6px;
    --ub-radius-sm: 12px;
    --ub-radius-md: 18px;
    --ub-radius-lg: 24px;
    --ub-radius-xl: 32px;
    --ub-radius-pill: 9999px;

    /* === Layout === */
    --ub-container-xs: 580px;
    --ub-container-narrow: 768px;
    --ub-container-max: 1220px;
    --ub-container-wide: 1440px;
    --ub-header-height: 72px;                           /* slimmer, Apple-style */
    --ub-section-padding-y: clamp(72px, 9vw, 140px);    /* more breath */
    --ub-page-padding-y: clamp(48px, 7vw, 96px);

    /* === Responsive breakpoints (canonical reference) ===
       CSS @media conditions cannot read custom properties, so these values
       can't be real tokens — but the public stylesheets use ONLY this set.
       Do not introduce new one-off breakpoints; snap to the nearest stop.
         640px   — large phone → tablet
         768px   — tablet (2-col content / image splits)
         1024px  — desktop (sidebar+main, summary splits)
         1280px  — wide desktop
       Mobile-side overrides use the complement max-width: 1023px. */

    /* === Form === */
    --ub-input-height: 48px;
    --ub-input-bg: #ffffff;
    --ub-input-bg-focus: #ffffff;
    --ub-color-placeholder: #767676;    /* WCAG AA — цагаан дээр 4.54:1 контраст */
    --ub-color-danger: #d04a4a;
    --ub-color-danger-text: #c44545;
    --ub-color-danger-text-strong: #a23434;
    --ub-color-danger-bg: rgba(208, 74, 74, 0.08);
    --ub-color-danger-border: rgba(208, 74, 74, 0.25);
    --ub-color-success-bg: rgba(200, 145, 95, 0.10);
    --ub-color-success-border: rgba(200, 145, 95, 0.32);

    /* === Effects === */
    --ub-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03),
                      0 8px 24px rgba(0, 0, 0, 0.04);
    --ub-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.04),
                            0 16px 40px rgba(0, 0, 0, 0.08);
    --ub-shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.10);
    --ub-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ub-transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --ub-transition-slow: 480ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === Scroll-reveal motion ===
       Зөөлөн "догь" гарч ирэх хөдөлгөөн — гүйлгэх явцад хэсэг харагдах
       талбарт орох үед fade + дээш гулсалт. .ub-reveal primitive
       (components.css) болон scroll_reveal_controller.js ашиглана. */
    --ub-reveal-duration: 640ms;
    --ub-reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);   /* зөөлөн ease-out */
    --ub-reveal-distance: 18px;
    --ub-reveal-stagger: 80ms;

    /* === Z-index === */
    --ub-z-header: 100;
    --ub-z-mobile-nav: 200;
    --ub-z-modal: 1000;
}