/* ========================================
   GLOBAL DESIGN TOKENS
   Sakura Hotels — Pinterest Design System
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {

    /* ===== COLORS ===== */

    /* --- Brand & Accent --- */
    --clr-primary:              #e60023;
    --clr-primary-pressed:      #cc001f;
    --clr-on-primary:           #ffffff;

    /* --- Surface --- */
    --clr-canvas:               #ffffff;
    --clr-surface-soft:         #fbfbf9;
    --clr-surface-card:         #f6f6f3;
    --clr-secondary-bg:         #e5e5e0;
    --clr-secondary-pressed:    #c8c8c1;
    --clr-surface-dark:         #262622;
    --clr-hairline:             #dadad3;
    --clr-hairline-soft:        #e5e5e0;

    /* --- Text --- */
    --clr-ink:                  #000000;
    --clr-ink-soft:             #211922;
    --clr-body:                 #33332e;
    --clr-charcoal:             #262622;
    --clr-mute:                 #62625b;
    --clr-ash:                  #91918c;
    --clr-stone:                #c8c8c1;
    --clr-on-dark:              #ffffff;

    /* --- Semantic --- */
    --clr-error:                #9e0a0a;
    --clr-error-deep:           #cc001f;
    --clr-success-deep:         #103c25;
    --clr-success-pale:         #c7f0da;
    --clr-focus-outer:          #435ee5;
    --clr-focus-inner:          #ffffff;
    --clr-warning:              #f59e0b;
    --clr-star:                 #FFB400;

    /* --- Editorial Accents --- */
    --clr-accent-pressed-blue:  #617bff;
    --clr-accent-purple:        #7e238b;
    --clr-accent-purple-deep:   #6845ab;


    /* ===== TYPOGRAPHY ===== */

    /* --- Font Family --- */
    --ff-primary:               'Inter', -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --ff-display:               'Manrope', 'Inter', -apple-system, system-ui, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

    /* --- Font Size --- */
    --fs-display-xl:            70px;
    --fs-display-lg:            44px;
    --fs-heading-xl:            28px;
    --fs-heading-lg:            22px;
    --fs-heading-md:            18px;
    --fs-body-md:               16px;
    --fs-body-sm:               14px;
    --fs-caption-md:            12px;
    --fs-caption-sm:            12px;
    --fs-icon-lg:               24px;
    --fs-button-md:             14px;
    --fs-button-sm:             12px;

    /* --- Font Weight --- */
    --fw-regular:               400;
    --fw-medium:                500;
    --fw-semibold:              600;
    --fw-bold:                  700;

    /* --- Line Height --- */
    --lh-display-xl:            1.1;
    --lh-display-lg:            1.15;
    --lh-heading-xl:            1.2;
    --lh-heading-lg:            1.25;
    --lh-heading-md:            1.3;
    --lh-body:                  1.4;
    --lh-caption:               1.5;
    --lh-button:                1;

    /* --- Letter Spacing --- */
    --ls-display-xl:            -1.2px;
    --ls-display-lg:            -0.8px;
    --ls-heading-xl:            -1.2px;
    --ls-normal:                0px;


    /* ===== SPACING ===== */

    --sp-xxs:                   4px;
    --sp-xs:                    6px;
    --sp-sm:                    8px;
    --sp-md:                    12px;
    --sp-lg:                    16px;
    --sp-xl:                    24px;
    --sp-xxl:                   32px;
    --sp-section:               64px;


    /* ===== BORDER RADIUS (ROUNDNESS) ===== */

    --rd-none:                  0px;
    --rd-sm:                    8px;
    --rd-md:                    16px;
    --rd-lg:                    32px;
    --rd-full:                  9999px;


    /* ===== LAYOUT ===== */

    --container-max:            1280px;
    --container-gutter:         24px;
    --grid-gutter:              8px;
    --nav-height:               64px;
    --btn-height:               40px;
    --input-height:             44px;
    --search-height:            48px;


    /* ===== BREAKPOINTS (reference only, use in media queries) ===== */
    /* ultrawide:    1920px  */
    /* desktop-lg:   1440px  */
    /* desktop:      1280px  */
    /* desktop-sm:   1024px  */
    /* tablet:        768px  */
    /* mobile:        480px  */
    /* mobile-narrow: 320px  */
}


/* ========================================
   RESET & BASE
   ======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ff-primary);
    font-size: var(--fs-body-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-normal);
    color: var(--clr-body);
    background: var(--clr-surface-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: var(--ff-primary);
}


/* ========================================
   UTILITIES
   ======================================== */

.rme-mt-24 {
    margin-top: 24px !important;
}

.mb-xs { margin-bottom: var(--sp-xs) !important; }
.mb-sm { margin-bottom: var(--sp-sm) !important; }
.mb-md { margin-bottom: var(--sp-md) !important; }
.mb-lg { margin-bottom: var(--sp-lg) !important; }
.mb-xl { margin-bottom: var(--sp-xl) !important; }
.p-md { padding: var(--sp-md) !important; }
.mr-sm { margin-right: var(--sp-sm) !important; }
.cursor-pointer { cursor: pointer !important; }
.gap-lg { gap: var(--sp-lg) !important; }
.txt-ash { color: var(--ash) !important; }
.w-full { width: 100% !important; }

.rme-hint-small {
    margin-bottom: 12px !important;
    font-size: var(--fs-caption-sm) !important;
    color: var(--clr-mute) !important;
}

.rme-flex-1 {
    flex: 1 !important;
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */

/* Tablet */
@media (max-width: 768px) {
    :root {
        --sp-section:           48px;
        --container-gutter:     24px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --fs-display-xl:        44px;
        --sp-section:           32px;
        --container-gutter:     16px;
    }
}

/* Mobile Narrow */
@media (max-width: 320px) {
    :root {
        --fs-display-xl:        36px;
        --sp-section:           32px;
    }
}

.d-none {
    display: none !important;
}

.editorjs-wrapper {
    border: 1px solid var(--clr-ash);
    border-radius: var(--rd-md);
    padding: var(--sp-md);
    background-color: var(--clr-canvas);
    min-height: 150px;
}

/* ========================================
   POPUP EDITOR & MODAL
   ======================================== */
.rich-text-preview {
    width: 100%;
    box-sizing: border-box;
    font-size: var(--fs-caption-md);
    padding: 8px 12px;
    margin-top: 8px;
    border: 1px solid var(--clr-ash);
    border-radius: var(--rd-md);
    background: var(--clr-canvas);
    color: var(--clr-ink);
    cursor: pointer;
    
    /* line clamp 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.2s ease;
}

.rich-text-preview:hover {
    border-color: var(--clr-ink);
}

.rich-text-preview:empty::before {
    content: "Click to edit description...";
    color: var(--clr-ash);
}

.hme-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.hme-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.hme-modal-card {
    background: var(--clr-canvas);
    border-radius: var(--rd-lg);
    padding: var(--sp-xxl);
    width: 600px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.hme-modal-overlay.active .hme-modal-card {
    transform: translateY(0);
}

.hme-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-lg);
}

.hme-modal-title {
    font-size: var(--fs-heading-lg);
    font-weight: var(--fw-semibold);
    color: var(--clr-ink);
    margin: 0;
}

.hme-modal-close {
    background: var(--clr-surface-card);
    border: none;
    width: 40px; height: 40px;
    border-radius: var(--rd-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-ink);
    font-size: var(--fs-icon-lg);
    line-height: 1;
}

.hme-modal-close:hover {
    background: var(--clr-secondary-bg);
}

.hme-modal-body {
    margin-bottom: var(--sp-lg);
}

.hme-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-sm);
}