/* ============================================================================
   ORABELLA — base.css
   ----------------------------------------------------------------------------
   Design tokens, reset and element defaults. Loaded first on every page.

   1. Design tokens
   2. Reset & box model
   3. Element defaults
   4. Motion preferences
   5. Accessibility helpers
   ==========================================================================  */


/* ============================================================================
   1. DESIGN TOKENS
   ==========================================================================  */

:root {
    /* --- Brand & text colours ------------------------------------------- */
    --color-brand: #d79fa0;
    --color-brand-strong: #c07f81;
    --color-heading: #222222;
    --color-body: #555555;
    --color-muted: #828181;
    --color-muted-strong: #7e7e7e;

    /* --- Surfaces -------------------------------------------------------- */
    --color-surface: #ffffff;
    --color-surface-subtle: #fafafa;
    --color-surface-tinted: #f5f5f5;
    --color-surface-dark: #1b1b1b;
    --color-surface-darkest: #000000;
    --color-surface-footer-bar: #333333;

    /* --- On-dark text ---------------------------------------------------- */
    --color-on-dark: #ffffff;
    --color-on-dark-muted: #929292;

    /* --- Lines & overlays ------------------------------------------------ */
    --color-border: #efefef;
    --color-label: #aba9a9;
    --color-overlay: rgba(10, 10, 10, 0.55);
    --color-overlay-strong: rgba(10, 10, 10, 0.85);
    --color-veil: rgba(255, 255, 255, 0.55);

    /* --- Social brand colours -------------------------------------------- */
    --color-facebook: #3b5999;
    --color-instagram-start: #fdf497;
    --color-instagram-mid: #fd5949;
    --color-instagram-deep: #d6249f;
    --color-instagram-end: #285aeb;
    --color-line: #06c755;

    /* --- Typography ------------------------------------------------------ */
    --font-family-base: "Lato", "Noto Sans Thai", sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    --font-size-caption: 1.2rem;
    /* 12px */
    --font-size-body: 1.4rem;
    /* 14px */
    --font-size-nav: 1.5rem;
    /* 15px */
    --font-size-button: 1.5rem;
    /* 15px */
    --font-size-widget-title: 1.6rem;
    /* 16px */
    --font-size-icon: 1.8rem;
    /* 18px */
    --font-size-card-title: 2rem;
    /* 20px  (22px from md)   */
    --font-size-section-title: 2.6rem;
    /* 26px  (30px from md)   */
    --font-size-hero-title: 3rem;
    /* 30px  (up to 45px)     */

    --line-height-body: 1.7;
    --line-height-heading: 1.2;
    --line-height-tight: 1;

    /* --- Spacing scale --------------------------------------------------- */
    --space-2xs: 0.4rem;
    --space-xs: 0.8rem;
    --space-sm: 1.2rem;
    --space-md: 1.6rem;
    --space-lg: 2.4rem;
    --space-xl: 3.2rem;
    --space-2xl: 4.8rem;
    --space-3xl: 7rem;

    /* Vertical rhythm between page sections */
    --section-spacing: 7rem;
    --section-header-spacing: 4.5rem;

    /* --- Layout ---------------------------------------------------------- */
    --layout-max-width: 117rem;
    /* 1170px content width */
    --layout-gutter: 1.5rem;
    --grid-gap: 2rem;

    --hero-height: 35rem;
    --category-aspect: 16 / 10;
    --sidebar-width: 28rem;

    /* --- Shape, motion, elevation ---------------------------------------- */
    --radius-sm: 0.4rem;
    --radius-pill: 5rem;
    --radius-circle: 50%;

    --transition-fast: 0.25s ease;
    --transition-base: 0.4s ease;
    --transition-zoom: 0.3s ease-in-out;
    --transition-reveal: 0.55s cubic-bezier(0.22, 0.7, 0.3, 1);
    --transition-slow: 1s ease;

    --shadow-menu: 0 0.6rem 2.4rem rgba(0, 0, 0, 0.12);
    --shadow-float: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.24);

    /* Image zoom on hover — matches the original site */
    --zoom-scale: 1.3;

    --z-header: 100;
    --z-drawer: 200;
    --z-lightbox: 300;
    --z-floating: 150;
}

@media (min-width: 480px) {
    :root {
        --font-size-hero-title: 3.5rem;
        /* 35px */
    }
}

@media (min-width: 576px) {
    :root {
        --category-aspect: 5 / 6;
    }
}

@media (min-width: 768px) {
    :root {
        --font-size-card-title: 2.2rem;
        /* 22px */
        --font-size-section-title: 3rem;
        /* 30px */
        --font-size-hero-title: 4rem;
        /* 40px */
        --section-spacing: 9rem;
        --grid-gap: 3rem;
        --hero-height: 45rem;
    }
}

@media (min-width: 992px) {
    :root {
        --font-size-hero-title: 4.5rem;
        /* 45px */
        --section-spacing: 10rem;
        --hero-height: 53rem;
    }
}


/* ============================================================================
   2. RESET & BOX MODEL
   ==========================================================================  */

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

html {
    /* 62.5% → 1rem = 10px */
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 8rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-body);
    background-color: var(--color-surface);
    overflow-x: hidden;
}

body.is-locked {
    overflow: hidden;
}


/* ============================================================================
   3. ELEMENT DEFAULTS
   ==========================================================================  */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

p {
    margin: 0 0 var(--space-xs);
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

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

figure {
    margin: 0;
}

address {
    font-style: normal;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
}


/* ============================================================================
   4. MOTION PREFERENCES
   ==========================================================================  */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================================
   5. ACCESSIBILITY HELPERS
   ==========================================================================  */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    z-index: calc(var(--z-header) + 1);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-body);
    color: var(--color-on-dark);
    background-color: var(--color-brand);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}