/**
 * THEMES.LIGHT
 * Color tokens are CSS custom properties. themes.dark.css overrides them for dark mode.
 */

html {
  --color-primary:     #F8BB10;
  --color-primary-hover: #e0a707;

  --color-bg:          #fff;
  --color-text:        #939393;
  --color-heading:     #727272;
  --color-border:      #ececec;

  --color-section-header-bg:  #fafafa;
  --color-section-content-bg: #fff;

  --color-section-odd-bg:           #fbfbfb;
  --color-section-odd-content-bg:   #fff;
  --color-section-even-bg:          #f8f8f8;
  --color-section-even-content-bg:  #fcfcfc;

  --color-social-btn-bg:     #fafafa;
  --color-social-btn-border: #ededed;
  --color-icon:              #e0e0e0;
  --color-icon-social:       #c6c6c6;

  --color-overlay-bg:    #fff;
  --color-overlay-text:  #3a3a3a;
  --color-overlay-deco:  #535353;

  --color-timeline-shadow:      #fff;
  --color-timeline-shadow-even: #fcfcfc;

  --color-title-first:  #939393;
  --color-title-second: #F8BB10;
  --color-subtitle:     #939393;

  --color-theme-toggle-bg:     #fff;
  --color-theme-toggle-border: #e0e0e0;
  --color-theme-toggle-text:   #727272;
  --color-theme-toggle-shadow: rgba(0, 0, 0, 0.1);
}

/* Body */
body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Heading */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
}

/* Link Container */
.t-link-container {
  color: inherit;
  display: block;
}

.t-link-container:hover,
.t-link-container:focus,
.t-link-container:active {
  color: inherit;
}

.t-link-container .t-link-container__item--blended {
  color: inherit;
}

/* Links */
a,
.t-link-container .t-link-container__item,
.t-link-container:hover .t-link-container__item--blended {
  color: var(--color-primary);
}

/* Hover Links */
a:hover,
a:focus,
a:active,
.t-link-container:hover .t-link-container__item {
  color: var(--color-primary-hover);
}

/* Horizontal Rulers */
hr,
.t-border-color {
  border-color: var(--color-border);
}

hr,
.t-border-color-bg {
  background: var(--color-border);
}

/* Primary Color */
.t-primary-color,
.t-primary-color-line {
  color: var(--color-primary);
}

.t-primary-bg,
.t-primary-color-line {
  background: var(--color-primary);
}

/* Preloader */
.t-preloader__spinner:not(:required):before {
  border-top-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Brand Colors */
.t-title__first-word {
  color: var(--color-title-first);
}

.t-title__second-word {
  color: var(--color-title-second);
}

.t-sub-title {
  color: var(--color-subtitle);
}

/* Brand Typography */
.t-title {
  font-size: 4.8rem;
  line-height: 0.91;
}

.t-title__first-word {
  text-transform: lowercase;
  font-weight: 300;
}

.t-title__second-word {
  text-transform: uppercase;
  font-weight: 700;
  margin-top: .15em;
}

.t-sub-title {
  font-weight: 300;
  font-size: 1.5rem;
  margin-left: .3rem;
}

/* Icons */
.fas, .far, .fal, .fab {
  color: var(--color-icon);
}

/* Social Buttons */
.t-social-button {
  background: var(--color-social-btn-bg);
  border-color: var(--color-social-btn-border);
  color: var(--color-heading);
}

.t-social-button .fas,
.t-social-button .far,
.t-social-button .fal,
.t-social-button .fab {
  color: var(--color-icon-social);
}

.t-social-button:hover {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.t-social-button:hover .fas,
.t-social-button:hover .far,
.t-social-button:hover .fal,
.t-social-button:hover .fab {
  color: var(--color-primary);
}

/* Image Overlay */
.t-image-overlay {
  background: var(--color-overlay-bg);
}

.t-image-overlay * {
  color: var(--color-overlay-text);
}

.t-image-overlay:hover img {
  opacity: 0.2;
}

.t-image-overlay__deco-line {
  color: var(--color-overlay-deco);
  background: var(--color-overlay-deco);
}

/* Transition */
a,
button,
a .fa,
.t-link-container .t-link-container__item,
.t-link-container .t-link-container__item--blended {
  transition: all .15s linear;
}

/* Sections */
.t-section__header {
  background: var(--color-section-header-bg);
}

.t-section__content,
.t-section--header .t-section__header {
  background: var(--color-section-content-bg);
}

.t-section__content-border-color {
  border-color: var(--color-section-content-bg);
}

.t-timeline__point {
  box-shadow: 0 0 0 6px var(--color-timeline-shadow);
}

@media (max-width: 1023px) {
  .t-section__header {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .t-section--header .t-section__header {
    border-top: none;
    border-bottom: none;
  }
}

@media (min-width: 1024px) {
  /* Odd Sections */
  .t-section,
  .t-section__header,
  .t-section--header .t-section__header {
    background: var(--color-section-odd-bg);
  }

  .t-section__content {
    background: var(--color-section-odd-content-bg);
  }

  /* Even Sections */
  .t-section:nth-child(even),
  .t-section:nth-child(even) .t-section__header {
    background: var(--color-section-even-bg);
  }

  .t-section:nth-child(even) .t-section__content {
    background: var(--color-section-even-content-bg);
  }

  .t-section:nth-child(even) .t-timeline__point {
    box-shadow: 0 0 0 6px var(--color-timeline-shadow-even);
  }
}

/* Theme toggle button */
.c-theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--color-theme-toggle-border);
  background: var(--color-theme-toggle-bg);
  color: var(--color-theme-toggle-text);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  box-shadow: 0 2px 10px var(--color-theme-toggle-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease,
              background-color 0.3s ease, color 0.3s ease;
  padding: 0;
  outline: none;
}

.c-theme-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: scale(1.08);
  box-shadow: 0 4px 14px var(--color-theme-toggle-shadow);
}

.c-theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Show moon icon in light mode (click to go dark), sun in dark mode (click to go light) */
.c-theme-toggle__sun  { display: none; }
.c-theme-toggle__moon { display: block; }

/* Smooth transitions when theme changes */
.is-theme-transitioning,
.is-theme-transitioning *,
.is-theme-transitioning *::before,
.is-theme-transitioning *::after {
  transition:
    background-color 0.3s ease,
    color 0.25s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}