/* ============================================================
   Celeste Sovereign — Design Tokens
   ------------------------------------------------------------
   Usage: import this file first in HTML
   <link rel="stylesheet" href="./tokens.css">
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR
     ---------------------------------------------------------- */

  /* Backgrounds */
  --color-bg:             #F7F1E8;   /* cream — Hero, My Passion, Footer */
  --color-bg-soft:        #EFE3D4;   /* warm beige — About, Contact */

  /* Text */
  --color-text:           #2B211C;   /* dark cocoa — headings + body */
  --color-text-muted:     #6F5E52;   /* warm taupe — overline, captions */
  --color-text-inverse:   #F7F1E8;   /* on dark bg — button text */

  /* Accent */
  --color-accent:         #9B6A4E;   /* warm caramel — links */
  --color-accent-hover:   #7E5642;   /* darker caramel — hover state */

  /* UI */
  --color-border:         #E3D4C2;   /* soft divider, form input border */

  /* Button */
  --color-btn-bg:         #2B211C;
  --color-btn-text:       #F7F1E8;


  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  --font-heading:   "Cormorant Garamond", Georgia, serif;
  --font-body:      "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Weights */
  --fw-heading-light:   300;   /* Hero name */
  --fw-heading:         400;   /* Section titles, general headings */
  --fw-body:            400;
  --fw-ui:              500;   /* Buttons, nav, overline */

  /* Font Sizes — Mobile (default) */
  --fs-h1:          44px;    /* Hero name */
  --fs-h2:          32px;    /* Section titles */
  --fs-h3:          24px;    /* My Passion topic names */
  --fs-overline:    13px;    /* Hero subtitle */
  --fs-tagline:     19px;    /* Hero main line */
  --fs-body:        16px;
  --fs-small:       13px;
  --fs-btn:         14px;
  --fs-nav:         14px;

  /* Line Heights */
  --lh-heading:     1.1;
  --lh-tagline:     1.4;
  --lh-body:        1.7;

  /* Letter Spacing */
  --ls-heading:     -0.01em;
  --ls-overline:    2px;      /* uppercase overline */
  --ls-btn:         1px;      /* uppercase button */
  --ls-normal:      normal;


  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --container-max:        1080px;
  --text-max-width:       680px;
  --container-pad-sm:     24px;    /* mobile */
  --container-pad-lg:     48px;    /* desktop */

  /* Section Padding */
  --section-pad-hero-top:     80px;
  --section-pad-hero-bottom:  80px;
  --section-pad-top:          64px;
  --section-pad-bottom:       64px;
  --footer-pad:               40px;

  /* Spacing Scale */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    40px;
  --space-2xl:   64px;
  --space-3xl:   96px;

  /* Radius */
  --radius-sm:   2px;    /* buttons — nearly square, editorial */
  --radius-md:   4px;

  /* Shadow */
  --shadow-soft: 0 4px 24px rgba(43, 33, 28, 0.06);

  /* Button */
  --btn-pad:       14px 32px;
  --btn-radius:    var(--radius-sm);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.6s ease-out;   /* fade-in scroll animation */

  /* Z-Index */
  --z-header:    500;
  --z-overlay:   800;
  --z-modal:     1000;
}


/* ============================================================
   Desktop overrides (≥ 768px)
   ============================================================ */

@media (min-width: 768px) {
  :root {
    --fs-h1:              72px;
    --fs-h2:              42px;
    --fs-h3:              24px;
    --fs-overline:        14px;
    --fs-tagline:         24px;
    --fs-body:            18px;
    --fs-small:           14px;
    --fs-btn:             15px;

    --section-pad-hero-top:     120px;
    --section-pad-hero-bottom:  120px;
    --section-pad-top:          96px;
    --section-pad-bottom:       96px;
    --footer-pad:               48px;
  }
}


/* ============================================================
   Base Styles
   ============================================================ */

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  color: var(--color-text);
  letter-spacing: var(--ls-heading);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-heading-light); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin: 0 0 1rem;
  line-height: var(--lh-body);
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); }

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}


/* ============================================================
   Container
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--container-pad-lg);
    padding-right: var(--container-pad-lg);
  }
}

.text-container {
  max-width: var(--text-max-width);
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   Section Backgrounds
   ============================================================ */

.section--base { background-color: var(--color-bg); }
.section--soft { background-color: var(--color-bg-soft); }

.section--hero {
  padding-top: var(--section-pad-hero-top);
  padding-bottom: var(--section-pad-hero-bottom);
  background-color: var(--color-bg);
}

.section {
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

.section-footer {
  padding-top: var(--footer-pad);
  padding-bottom: var(--footer-pad);
  background-color: var(--color-bg);
}


/* ============================================================
   Typography Utilities
   ============================================================ */

.overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: var(--fw-ui);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  margin-bottom: var(--space-md);
  display: block;
}

.tagline {
  font-family: var(--font-heading);
  font-size: var(--fs-tagline);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-tagline);
  color: var(--color-text);
}

.text-muted  { color: var(--color-text-muted); }
.text-center { text-align: center; }
.text-sm     { font-size: var(--fs-small); }
.italic      { font-style: italic; }


/* ============================================================
   Button
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: var(--fw-ui);
  letter-spacing: var(--ls-btn);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-btn-text);
  background-color: var(--color-btn-bg);
  border: none;
  border-radius: var(--btn-radius);
  padding: var(--btn-pad);
  cursor: pointer;
  transition: filter var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}

.btn:hover {
  filter: brightness(115%);
  color: var(--color-btn-text);
}


/* ============================================================
   Form — Bottom Border Style
   ============================================================ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-ui);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-sm) 0;
  transition: border-color var(--transition-base);
  resize: none;
}

.input::placeholder { color: var(--color-text-muted); }

.input:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}


/* ============================================================
   Navigation
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(247, 241, 232, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ============================================================
   Scroll Fade-in Animation (only allowed animation)
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}