/* Global CSS variables */

:root {
  /* Fonts */
  --font-times-new-roman: "Times New Roman", Arial, sans-serif;
  --font-myriad-pro: "Myriad Pro", Arial, sans-serif;
  --font-primary: var(--font-times-new-roman);
  --font-secondary: var(--font-myriad-pro);

  /* Primary color family */
  --color-primary: #a0875f;
  --color-primary-dark: #8a7451;
  --color-primary-mid: #99815b;
  --color-primary-light: #b29769;

  /* Secondary color family */
  --color-secondary: #d3d1d1;
  --color-secondary-muted: #aaa9a9;
  --color-white: #ffffff;
  --color-heading: var(--color-secondary);

  /* Body */
  --color-body-fallback: #000000;
  --color-text-body: #aaa9a9;
  --color-link: #aaa9a9;

  /* Border system */
  --border-width: 2px;
  --border-color: var(--color-primary);
  --border-radius: 0;

  /* Container inline padding — fluid (min 20px, max = former fixed value) */
  --container-sm-padding: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
  --container-md-padding: clamp(20px, 2.5vw + 0.625rem, 50px);
  --container-lg-padding: clamp(20px, 5vw + 1.25rem, 100px);
  --container-xl-padding: clamp(1.25rem, -0.7221rem + 8.4142vw, 9.375rem);
  --container-footer-padding: clamp(1.25rem, 0.25rem + 5vw, 6.25rem);

  /* Site main wrapper */
  --main-max-width: 1580px;
  --main-border-radius: 16px;
  --main-radius-top: var(--main-border-radius) var(--main-border-radius) 0 0;
  --main-radius-bottom: 0 0 var(--main-border-radius) var(--main-border-radius);

  /* Container shadow */
  --shadow-container: 10px 23px 79px 14px rgba(14, 16, 6, 0.69);

  /* Body spacing */
  --body-padding-top: 20px;
  --body-padding-bottom: 150px;
  --body-padding-inline: 40px;
  --body-padding-inline-mobile: 20px;

  /* Body typography */
  --body-font-weight: 400;
  --body-line-height: 1;
  --body-letter-spacing: normal;
  --paragraph-spacing: 20px;
  --paragraph-line-height: 1.5;
  --paragraph-font-size: 17px;
  --paragraph-font-size-mobile: 16px;

  /* Heading desktop maximum sizes (PSD → rem, 16px base) */
  --h1-size-max: 4rem;
  --h2-size-max: 3.125rem;
  --h3-size-max: 2.5rem; /* 30pt */
  --h4-size-max: 2.274rem; /* 27.29pt */
  --h5-size-max: 1.667rem; /* 20pt — hero subtitle / label */

  /* Heading responsive sizes */
  --h1-size: clamp(2rem, 2.5vw + 0.875rem, var(--h1-size-max));
  --h2-size: clamp(1.875rem, 3vw + 0.75rem, var(--h2-size-max));
  --h3-size: clamp(1.5rem, 2vw + 0.75rem, var(--h3-size-max));
  --h4-size: clamp(1.25rem, 1.5vw + 0.625rem, var(--h4-size-max));
  --h5-size: clamp(0.875rem, 1vw + 0.5rem, var(--h5-size-max));

  /* H6 — provisional (no PSD value yet) */
  --h6-size-max: 20px;
  --h6-size: clamp(0.875rem, 1vw + 0.5rem, var(--h6-size-max));
  --h6-line-height: 1.2;

  /* Hero subtitle / label line height */
  --h5-line-height: 1.235;

  /* Button — primary */
  --btn-primary-font-size: 20px;
  --btn-primary-line-height: 1;
  --btn-primary-letter-spacing: 0.2em;
  --btn-primary-color: var(--color-secondary);
  --btn-primary-padding-block: 10px;
  --btn-primary-padding-inline: 20px;
  --btn-primary-border-gap: 2px;
  --btn-primary-inner-border-width: 1px;
  --btn-primary-inner-line: #7e735c;
  --btn-primary-gap-fill: rgba(126, 115, 92, 0.4);
  /* PSD drop shadow — spread fill between outer and inner borders */
  --btn-primary-gap-shadow: inset 0 0 0 var(--btn-primary-border-gap)
    var(--btn-primary-gap-fill);

  /* Button — tertiary / fifth typography (Myriad Pro, from reference) */
  --btn-tertiary-font-size: 1.25rem; /* 15pt */
  --btn-tertiary-line-height: 1.2;
  --btn-tertiary-color: var(--color-primary);

  /* Button — arrow */
  --btn-arrow-width: 22px;
  --btn-arrow-height: 22px;
  --btn-arrow-gap: 15px;
  --btn-arrow-path: url("../images/icons/arrow-lg.svg");
  --btn-arrow-filter: brightness(0) saturate(100%) invert(44%) sepia(8%)
    saturate(1468%) hue-rotate(343deg) brightness(92%) contrast(85%);

  /* Button — fifth letter spacing */
  --btn-fifth-letter-spacing: 0.15em;

  /* Talent section */
  --talent-section-padding-block: 80px;
  --talent-card-border-color: #836955;
  --talent-card-gap-fill: #120d11;
  --talent-card-gap-block: 10px;
  --talent-card-gap-inline: 5px;
  --talent-card-body-bg: #191516;
  --talent-card-body-padding: 10px;
  --talent-card-name-size: 20px;
  --talent-card-name-color: #d3d1d1;
  --talent-card-cta-color: #99815b;
  --talent-card-credits-size: 16px;
  --talent-card-credits-color: #b0afaf;
  --talent-card-cta-offset: 20px;

  /* Talent page — directory listing */
  --talent-directory-padding-block: 80px;
  --talent-directory-header-gap: 28px;
  --talent-directory-title-gap: 48px;
  --talent-directory-group-gap: 80px;
  --talent-directory-letter-size: var(--h2-size);
  --talent-directory-letter-color: #d3d1d1;
  --talent-directory-letter-gap: 20px;
  --talent-directory-grid-gap: 24px;
  --talent-directory-grid-row-gap: 40px;
  --breadcrumb-font-size: 18px;
  --breadcrumb-letter-spacing: 0.14em;
  --breadcrumb-link-color: #d3d1d1;
  --breadcrumb-current-color: #99815b;
  --breadcrumb-separator-color: #fff;

  /* Talent profile page */
  --talent-profile-padding-block: 48px;
  --talent-profile-header-gap: 40px;
  --talent-profile-layout-gap: 20px;
  --talent-profile-aside-max-width: 320px;
  --talent-profile-footer-padding: 10px 10px;
  --talent-profile-card-content-padding-block: 32px;
  --talent-profile-card-content-padding-inline: 36px;
  --talent-profile-credits-size: 18px;
  --talent-profile-roles-size: 1.125rem;
  --talent-profile-roles-spacing: 0.12em;
  --talent-profile-credits-label-spacing: 0.14em;
  --talent-profile-tagline-size: 1.125rem;

  /* Talent carousel */
  --talent-carousel-nav-size: 52px;
  --talent-carousel-nav-bg: #000000;
  --talent-carousel-nav-border: #b59a6b;
  --talent-carousel-nav-offset: -40px;
  --talent-carousel-pagination-bg: #0e080c;
  --talent-carousel-pagination-padding-inline: 40px;
  --talent-carousel-pagination-padding-block: 15px;
  --talent-carousel-pagination-gap: 6px;

  /* Fans / video section */
  --fans-section-padding-block: 80px;
  --fans-section-padding-block-start: 0;
  --fans-section-padding-block-end: 32px;
  --fans-frame-inset-block: 34px;
  --fans-frame-inset-inline: 34px;
  --fans-frame-content-padding-block: 48px;
  --fans-frame-content-padding-inline: 56px;
  --fans-frame-bg-image: url("../images/backgrounds/neon-lights.jpg");
  --fans-frame-overlay: linear-gradient(
    180deg,
    rgb(0 0 0 / 0.62) 0%,
    rgb(0 0 0 / 0.78) 100%
  );
  --fans-layout-gap: 48px;

  /* Trust / conventions section */
  --trust-section-padding-block: 80px;
  --trust-section-padding-block-start: 32px;
  --trust-section-title-color: #9e8a5a;
  --trust-section-title-size: 1.25rem;
  --trust-section-title-spacing: 0.14em;
  --trust-section-tagline-color: #d3d1d1;
  --trust-section-tagline-size: 14px;
  --trust-section-tagline-spacing: 0.2em;
  --trust-logos-wrap-bg: #0b0e11;
  --trust-logos-wrap-padding-block: 28px;
  --trust-logo-max-height: 56px;
  --trust-logo-gap: 24px;

  /* CTA banner */
  --cta-banner-padding-block: 40px;
  --cta-banner-bg-image: url("../images/backgrounds/cta-bg.jpg");
  --cta-banner-overlay: linear-gradient(
    180deg,
    rgb(8 12 18 / 0.3) 0%,
    rgb(12 18 28 / 0.38) 100%
  );
  --cta-banner-eyebrow-size: 1rem;
  --cta-banner-eyebrow-spacing: 0.18em;
  --cta-banner-text-max-width: 720px;

  /* Button — fourth image */
  --btn-fourth-image: url("../images/buttons/fourth-button.png");

  /* Talent page — hero search */
  --talent-search-gap: 12px;
  --talent-search-max-width: 640px;
  --talent-filter-bg: #050606;
  --talent-filter-letters-max-width: 1080px;
  --talent-filter-gap: 20px;
  --talent-filter-all-color: var(--color-primary-light);
  --talent-filter-active-border: #8a7451;
  --talent-filter-active-bg: #262019;
  --talent-filter-letter-color: #d3d1d1;
  --talent-filter-letter-active-color: var(--color-primary-light);
  --talent-filter-active-radius: 4px;
  --talent-filter-letter-size: 1rem;
  --talent-filter-letter-spacing: 0.08em;
  --talent-search-input-bg: #0e0d0d;
  --talent-search-input-border: #4f4b42;
  --talent-search-input-min-height: 50px;
  --talent-search-placeholder-color: #4f4b42;
  --talent-search-input-padding-inline: 16px;
  --talent-search-icon-size: 18px;
  --talent-search-icon-offset: 14px;
  --btn-fourth-gradient: linear-gradient(
    90deg,
    #6e5a2e 0%,
    #a8874a 12%,
    #d4b05a 28%,
    #f7e08a 50%,
    #d4b05a 72%,
    #a8874a 88%,
    #6e5a2e 100%
  );
  --btn-fourth-border-color: #3a3226;
  --btn-fourth-text-color: #000000;
  --btn-fourth-radius: 6px;

  /* Button — fifth hover arrow recolor (copper → secondary) */
  --filter-arrow-secondary: brightness(0) saturate(100%) invert(88%) sepia(5%)
    saturate(207%) hue-rotate(314deg) brightness(92%) contrast(88%);

  /* Header navigation */
  --nav-font-size: 20px;
  --nav-item-gap: 30px;
  --nav-link-color: var(--color-white);
  --nav-link-hover-color: var(--color-primary-light);
  --nav-letter-spacing: 0.15em;
  --nav-underline-thickness: 1px;
  --nav-underline-offset: 10px;

  /* Header logo */
  --header-logo-width: 280px;
  --header-logo-height: 200px;
  --header-nav-cta-gap: 20px;

  /* Header mobile menu */
  --header-toolbar-gap: 16px;
  --header-menu-toggle-size: 44px;
  --header-menu-bar-width: 26px;
  --header-menu-bar-height: 2px;
  --header-menu-bar-gap: 6px;
  --header-menu-bar-color: var(--color-white);
  --header-sidebar-width: min(360px, 88vw);
  --header-sidebar-bg: rgb(14 8 12 / 0.98);
  --header-sidebar-backdrop: rgb(0 0 0 / 0.6);
  --header-sidebar-padding-block: 24px;
  --header-sidebar-padding-inline: 28px;
  --header-sidebar-link-gap: 24px;
  --header-menu-close-size: 44px;

  /* Footer */
  --footer-border-top: 2px solid rgb(160 135 95 / 0.25);
  --footer-padding-block: 30px;
  --footer-logo-width: 165px;
  --footer-logo-height: 110px;
  --footer-logo-nav-gap: 40px;
  --footer-stack-gap: 24px;
  --footer-actions-gap: 20px;
  --footer-nav-font-size: var(--nav-font-size);
  --footer-nav-gap: var(--nav-item-gap);
  --footer-btn-font-size: var(--btn-primary-font-size);
  --footer-copyright-color: #aaa9a9;
  --footer-copyright-font-size: 14px;
  --footer-copyright-spacing: 24px;

  /* Hero */
  --hero-min-height: 850px;
  --hero-bg-image: url("../images/backgrounds/hero-temp.jpg");
  --hero-social-column-width: 80px;
  --hero-connect-color: #a0875f;
  --hero-connect-label-color: #aaa9a9;
  --hero-connect-font-size: 18px;
  --hero-connect-letter-spacing: 0.3em;
  --hero-connect-line-height: 36px;
  --hero-connect-gap: 24px;
  --hero-social-icon-size: 24px;
  --hero-social-icon-gap: 30px;
  --filter-social-icon: brightness(0) saturate(100%) invert(73%) sepia(12%)
    saturate(1075%) hue-rotate(5deg) brightness(99%) contrast(80%);
  --filter-social-icon-hover: brightness(0) saturate(100%) invert(88%) sepia(5%)
    saturate(207%) hue-rotate(314deg) brightness(92%) contrast(88%);
  --hero-content-gap: 40px;
  --hero-header-gap: 60px;
  --hero-inner-padding-top: calc(
    var(--header-logo-height) + var(--header-padding-block) * 2 +
      var(--hero-header-gap)
  );
  --hero-title-line-width: 70px;
  --hero-title-line-height: 2px;
  --hero-title-line-color: var(--color-primary-light);
  --hero-pre-title-decorative: url("../images/decorative/hero-pre-title-decorative.png");
  --header-padding-block: 24px;

  /* Transitions */
  --transition-base: 0.25s ease;

  /* Breakpoints (reference tokens) */
  --bp-mobile: 640px;
  --bp-tablet: 991px;
  --bp-laptop: 1280px;
  --bp-large-laptop: 1440px;
}