/* 
FILE SOURCE: static\css\pages\skeleton_base.css 
PURPOSE:
- Use as the default skeleton page that will hold all basic settings.
*/

/* ROOT COLOR */
:root {
  /* Width of space display on desktop */
  --page-max-width: 1180px;
  --page-wide-width: 1280px;

  /* Main brand */
  --color-primary: #2B2118;      /* deep agarwood brown */
  --color-primary-soft: #3A2B20;

  /* Accent */
  --color-accent: #B9822F;       /* warm temple gold */
  --color-accent-dark: #8A5A1F;

  /* Background */
  --color-bg: #FAF7F1;           /* warm ivory */
  --color-bg-soft: #F3EBDD;
  --color-card: #FFFFFF;

  /* Text */
  --color-text: #1E1A16;
  --color-muted: #7A6A58;

  /* Border */
  --color-border: #E8DED0;

  /* Trust / natural detail */
  --color-natural: #4E6045;


  /* Button / CTA */
--color-button: #6FA85A;          /* brighter fresh leaf green */
--color-button-dark: #4F7F3D;     /* deeper natural green */
--color-button-soft: #EEF7EA;     /* soft green ivory */
--color-button-text: #FFFFFF;

  
  --color-button-gold: #B9822F;     /* optional premium gold CTA */
  --color-button-gold-dark: #8A5A1F;


}

/* ================================
   GLOBAL BUTTON STYLE
================================ */

.btn,
.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;

  min-height: 2.55rem;
  padding: 0.72rem 1.15rem;

  border: 1px solid transparent;
  border-radius: 999px;

  background: linear-gradient(135deg, var(--color-button), var(--color-button-dark));
  color: var(--color-button-text);

  font-family: var(--site-font);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;

  box-shadow: 0 0.45rem 1rem rgba(63, 90, 54, 0.22);

  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    background 160ms ease;
}

.btn:hover,
.site-btn:hover {
  transform: translateY(-0.12rem);
  filter: brightness(1.04);
  box-shadow: 0 0.65rem 1.25rem rgba(63, 90, 54, 0.3);
}

.btn:active,
.site-btn:active {
  transform: translateY(0);
  box-shadow: 0 0.3rem 0.75rem rgba(63, 90, 54, 0.22);
}

.btn:focus-visible,
.site-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ===========================================================
   HOMEPAGE SHARED RESPONSIVE TOKENS
   FILE SOURCE:
   static/css/pages/test_pages_css/skeleton_base_test.css

   PURPOSE:
   - Shared font-size scale for homepage sections.
   - Hero and lifestyle use the same text scale.
   - Prevent one section using 11px while another uses 12px.
   - 1rem = 16px.
   =========================================================== */

:root {
  /* Main mobile baseline, around 360px */
  --home-kicker-size: 0.75rem;      /* 12px */
  --home-desc-size: 0.75rem;        /* 12px */
  --home-btn-size: 0.75rem;         /* 12px */

  --home-title-size: 1.22rem;
  --home-title-line: 1.1;
  --home-desc-line: 1.45;

  --home-small-title-size: 0.68rem;
  --home-small-desc-size: 0.58rem;
}

/* 0px - 320px */
@media (max-width: 320px) {
  :root {
    --home-kicker-size: 0.75rem;    /* 12px */
    --home-desc-size: 0.75rem;      /* 12px */
    --home-btn-size: 0.75rem;       /* 12px */

    --home-title-size: 1.12rem;
    --home-title-line: 1.08;
    --home-desc-line: 1.42;

    --home-small-title-size: 0.62rem;
    --home-small-desc-size: 0.54rem;
  }
}

/* 321px - 640px */
@media (min-width: 321px) and (max-width: 640px) {
  :root {
    --home-kicker-size: clamp(0.75rem, 2vw, 0.86rem);
    --home-desc-size: clamp(0.75rem, 2.35vw, 0.94rem);
    --home-btn-size: clamp(0.75rem, 2.15vw, 0.88rem);

    --home-title-size: clamp(1.22rem, 5vw, 2.1rem);
    --home-title-line: 1.08;
    --home-desc-line: 1.42;

    --home-small-title-size: 0.68rem;
    --home-small-desc-size: 0.58rem;
  }
}

/* 641px - 959px */
@media (min-width: 641px) and (max-width: 959px) {
  :root {
    --home-kicker-size: 0.86rem;
    --home-desc-size: 0.96rem;
    --home-btn-size: 0.9rem;

    --home-title-size: clamp(1.85rem, 3.4vw, 2.55rem);
    --home-title-line: 1.1;
    --home-desc-line: 1.5;

    --home-small-title-size: 0.82rem;
    --home-small-desc-size: 0.7rem;
  }
}

/* 960px+ */
@media (min-width: 960px) {
  :root {
    --home-kicker-size: clamp(0.86rem, 0.72rem + 0.22vw, 0.96rem);
    --home-desc-size: clamp(0.96rem, 0.84rem + 0.18vw, 1.15rem);
    --home-btn-size: clamp(0.94rem, 0.84rem + 0.12vw, 1rem);

    --home-title-size: clamp(2.1rem, 2vw, 3.35rem);
    --home-title-line: 1.08;
    --home-desc-line: 1.48;

    --home-small-title-size: 0.86rem;
    --home-small-desc-size: 0.72rem;
  }
}





/* ================================
   ROOT LANGUAGE FONT
================================ */
html[lang="en"] {
  --site-font: "Book Antiqua", "Palatino Linotype", Palatino, serif;
}

html[lang="vi"] {
  --site-font: "Times New Roman", Times, serif;
}

/* ================================
   BASE RESET
================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 
FONT SIZE AND OTHER 
1rem = 16px 
1 pt = 1.333 px => 12 pt = 16 px
*/
html {
  width: 100%;
  min-height: 100%;
  font-size: 1rem; /* 16px */
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--site-font);
  line-height: 1.5;
  overflow-x: hidden;
}



body,
button,
input,
textarea,
select {
  font-family: var(--site-font);
}

a,
p,
div,
span,
li,
h1,
h2,
h3,
h4,
h5,
h6,
header,
footer {
  font-family: inherit;
}

button {
  cursor: pointer;
}