/*
 * MyClevan design tokens.
 * Source of truth: the MyClevan design system (project/tokens.json).
 * UI colours follow agoda.com (computed styles measured 2026-09-28); the
 * MyClevan brand palette is reserved for signature elements only: logo/mark,
 * favicon, "New to MyClevan" / special-label ribbons, favourites and the
 * MyClevan Assistant chatbot.
 * Public site only — admin never loads this file, so rules elsewhere may use
 * var(--token, <legacy value>) to keep the admin shell unchanged.
 */
:root {
    /* MyClevan brand palette (signature elements only) */
    --dusty-blue: #687d9a;
    --blush: #ddaeb6;
    --blush-deep: #a34e60; /* readable blush for text on light surfaces (≥5:1 on white) */
    --deep-blue: #405968;
    --graphite: #2f3135;
    --fur-white: #f6f5f1;
    --gem-highlight: #f0e7e5;
    --collar-mist: #b4bac3;

    /* Semantic colours — former action/brand blues: deep blue → deep blush,
       light blue → light blush, site-wide (user decision 2026-09-30) */
    --action: var(--blush-deep);
    --action-rgb: 163, 78, 96;
    --action-hover: #8c4153;
    --action-pressed: #733443;
    /* Hover states: primary lightens slightly, outline/text buttons get a light-pink wash */
    --action-hover-light: #ad5d6e;
    --action-hover-wash: #fbeff1;
    --nav-hover: var(--blush-deep); /* header + footer link hover (user decision 2026-09-29) */
    --brand: var(--blush-deep);
    --brand-rgb: 163, 78, 96;
    --brand-strong: #8c4153;
    --brand-subtle: #f8e6ea;
    --info-subtle: #fcf2f4;
    --accent: var(--blush);
    --accent-subtle: #fdf3f3;
    --ai: #2067da; /* AI-generated elements (summaries, AI badges) use blue (user decision 2026-10-03) */
    --whatsapp: #15803d; /* WhatsApp (enquiry) buttons; darker than WhatsApp's #25d366 so white text passes AA */
    --whatsapp-hover: #166534;
    --text-default: #252c38;
    --text-strong: #2a2a2e;
    --text-subtle: #5e6b82;
    --text-disabled: rgba(13, 17, 24, 0.32);
    --text-inverted: #ffffff;
    --price-strike: #737373;
    --surface: #ffffff;
    --surface-panel: #ffffff;
    --surface-dark: #20274d;
    --background: #ffffff;
    --background-subtle: #f8f7f9;
    --border-default: rgba(94, 107, 130, 0.32);
    --border-subtle: rgba(94, 107, 130, 0.16);
    --border-field: rgba(94, 107, 130, 0.32);
    --focus-border: var(--deep-blue); /* focused fields are neutral, never pink: pink next to red error text reads as "wrong" (user decision 2026-10-17) */
    --focus-rgb: 64, 89, 104; /* --deep-blue, for focus rings */
    --border-divider: #dddfe2;
    --border-inactive: rgba(13, 17, 24, 0.64);
    --skeleton: #e9ebee; /* loading placeholders (Agoda) */
    --overlay: rgba(4, 7, 10, 0.64);
    --urgency: #c53829;
    --urgency-strong: #e12d2d;
    --success-subtle: #e2f2e5;
    --success-teal: #0f766e; /* a met password rule (≥5:1 on white) */
    --success: #00622f;
    --warning: #eab308;

    /* Typography */
    --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mobile: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Spacing */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;

    /* Radius */
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-max: 999px;

    /* Shadow */
    --shadow-s: 0px 1px 3px 0px rgba(4, 7, 10, 0.16);
    --shadow-m: 0px 2px 7px 0px rgba(4, 7, 10, 0.24);
    --shadow-panel: 0px 2px 8px 3px rgba(0, 0, 0, 0.2);
    --shadow-soft: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
    --shadow-list: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);

    /* Sizes */
    --control-l: 44px;
    --control-m: 36px;
    --control-s: 28px;
    --field-desktop: 66px;
    --field-mobile: 46px;
    --header-desktop: 60px;
    --header-mobile: 64px;
    --icon: 20px;

    /* Layout */
    --container-xl: 1124px;
    --container-results: 1100px;
    --container-l: 900px;
    --gutter-mobile: 12px;
    --gutter-tablet: 24px;
}