/*
 * Urban Living theme tokens - the ONLY place brand colours, fonts and radii are defined.
 * Change the brand by editing this file; every other stylesheet references these variables.
 */
:root {
    /* Brand */
    --color-navy: #1e2547;            /* primary dark - header, footer, headings */
    --color-navy-light: #2e3967;      /* primary - buttons, links */
    --color-navy-dark: #151a33;       /* primary hover/pressed */
    --color-gold: #d4a960;            /* accent - logo gold, highlights */
    --color-gold-dark: #b88c3f;       /* accent text on light backgrounds (meets contrast) */
    --color-gold-light: #f4ead6;      /* accent tint backgrounds */

    /* Neutrals */
    --color-bg: #ffffff;
    --color-bg-soft: #f8f6f1;         /* warm off-white section background */
    --color-bg-muted: #f1eee7;
    --color-text: #2b2f3a;
    --color-text-muted: #5b6070;
    --color-text-inverse: #ffffff;
    --color-border: #e6e1d6;

    /* States */
    --color-success: #2f8f5b;
    --color-success-bg: #eaf6ee;
    --color-danger: #c0392b;
    --color-danger-bg: #fdecea;
    --color-warning: #9a6b00;
    --color-warning-bg: #fff7e6;
    --color-info: #2e3967;
    --color-info-bg: #eef0f8;
    --color-promo: #c0392b;           /* promotional price */
    --color-booked: #c0392b;          /* booked dates on calendars */
    --color-whatsapp: #25d366;        /* WhatsApp brand green for the chat button */
    --color-overlay: rgba(10, 12, 24, 0.96); /* photo lightbox backdrop */

    /* Typography */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: var(--font-sans);
    --tracking-wide: 0.18em;          /* letter-spacing for eyebrow labels, echoing the logo */

    /* Shape & depth */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 3px rgba(21, 26, 51, 0.08);
    --shadow: 0 8px 24px rgba(21, 26, 51, 0.10);
    --shadow-lg: 0 18px 48px rgba(21, 26, 51, 0.16);

    /* Layout */
    --header-height: 76px;
    --focus-ring: 0 0 0 3px rgba(212, 169, 96, 0.55);

    /* Bootstrap mapping so framework components follow the theme */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-bg);
    --bs-link-color: var(--color-navy-light);
    --bs-link-hover-color: var(--color-gold-dark);
    --bs-border-color: var(--color-border);
    --bs-primary: var(--color-navy-light);
    --bs-primary-rgb: 46, 57, 103;
}